CODEWITHSUNDEEP
typescriptvue.jsundefinedschedulervuejs3
Little Monkey
Little Monkey

Reputation: 6157

DHX Scheduler undefined

I'm starting to use VueJs 3 with TS and composition api.

I found this tutorial about how to import the scheduler in VueJs.

Unfortunately it doesn't cover completely my case and therefore I'm finding some troubles.

In the specific, I'm facing this error:

scheduler is not defined

In the comments they propose to use:

/*global scheduler*/
import 'dhtmlx-scheduler'

but then it doesn't find the scheduler anymore:

TS2304: Cannot find name 'scheduler'.

The IDE proposes me to import it like this:

import { scheduler } from 'dhtmlx-scheduler'

But, even in this case, the scheduler is undefined.

Upvotes: 0

Views: 500

Answers (1)

tony19
tony19

Reputation: 138606

To use dhtmlx-scheduler with TypeScript, make sure to import dhtmlx-scheduler in addition to the SchedulerStatic type:

import 'dhtmlx-scheduler'
import { SchedulerStatic } from 'dhtmlx-scheduler'

Then you could use window.scheduler like this:

const scheduler: SchedulerStatic = (window as any).scheduler
scheduler.init(/*...*)

Example of TypeScript SFC based on docs:

<template>
  <div ref="scheduler"></div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import 'dhtmlx-scheduler'
import { SchedulerStatic } from 'dhtmlx-scheduler'

export default defineComponent({
  name: 'scheduler',
  props: {
    events: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    const scheduler: SchedulerStatic = (window as any).scheduler // eslint-disable-line
    scheduler.skin = 'material'
    scheduler.config.header = [
        'day',
        'week',
        'month',
        'date',
        'prev',
        'today',
        'next'
    ]

    scheduler.init(this.$refs.scheduler as HTMLElement, new Date(2020, 0, 20), 'week')
    scheduler.parse(this.$props.events)
  }
})
</script>

<style>
@import "~dhtmlx-scheduler/codebase/dhtmlxscheduler_material.css";
</style>

Upvotes: 3

Related Questions