DHX Scheduler undefined

Question

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.

Answer 1

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>