`DHX Scheduler not found`

Question

`DHX Scheduler not found`

Currently, I am delving into VueJs 3 with TypeScript and the composition API.

I stumbled upon a helpful tutorial on integrating the scheduler in VueJs.

However, it doesn't cover all aspects that apply to my specific situation, leading to some difficulties.

More precisely, I have encountered the following error message:

scheduler is not defined

In the mentioned tutorial comments, they suggest using:

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

Despite this, the scheduler remains inaccessible, triggering the error:

TS2304: Cannot find name 'scheduler'.

My IDE recommends importing it as follows:

import { scheduler } from 'dhtmlx-scheduler'

Yet, even after implementing this suggestion, the scheduler remains undefined.

typescript vue.js undefined scheduler vuejs3

Answer 1

Answer №1

If you want to integrate dhtmlx-scheduler with TypeScript, remember to import both dhtmlx-scheduler and the SchedulerStatic type:

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

This will allow you to access window.scheduler as shown below:

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

Check out this TypeScript SFC example based on the documentation:

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

<script lang="ts"&g>.
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>

Answer 2

If you want to integrate dhtmlx-scheduler with TypeScript, remember to import both dhtmlx-scheduler and the SchedulerStatic type:

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

This will allow you to access window.scheduler as shown below:

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

Check out this TypeScript SFC example based on the documentation:

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

<script lang="ts"&g>.
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>

`DHX Scheduler not found`

Answer №1

Similar questions

Why do I keep receiving a <prototype> object for each API request?

Following an update, the functioning of Visual Studio Tools for Apache Cordova ceases to operate accurately

What causes TypeScript to generate an error when using two array of object types, but not when using the shape of both?

What is the best way to leverage *ngIf within the host of my Directive?

parsing a TypeScript query

Setting line chart data for Chart.js

Ways to activate a click event using typescript

Vue is currently running in development mode. Please note that both $attrs and $listeners are set as readonly variables

"Enhance your Vue 3 experience with a stylish Instagram Feed featuring

What is the reason that the protected keyword is not retained for abstract properties in TypeScript?

Vue/Vite vanilla setup encountering a 'Failed to fetch dynamically imported module' TypeError

Strategies for implementing searchbar filtering in Ionic3 and Angular5 data manipulation

The V-Model is failing to bind with the jQuery mask

Creating a ref in React with TypeScript to access the state of a child component

Exported Members or Node Modules are not available

An issue arises following an upgrade in Angular from version 9 to version 10, where the property 'propertyName' is being utilized before it has been initialized

Simple method for wrestling with objects in TypeScript HTTP POST responses

Leverage and implement a reusable class in Typescript

Encountering issues with TypeScript class

Technique in CSS/SASS to repair a div