Блог

Я начинаю использовать VueJS 3 с TS и api композиции.

Я нашел этот учебник о том, как импортировать планировщик в VueJS.

К сожалению, это не полностью охватывает мой случай, и поэтому я нахожу некоторые проблемы.

В частности, я сталкиваюсь с этой ошибкой:

планировщик не определен

В комментариях они предлагают использовать:

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

но тогда он больше не находит планировщика:

TS2304: Не удается найти имя «планировщик».

IDE предлагает мне импортировать его следующим образом:

 import { scheduler } from 'dhtmlx-scheduler'
 

Но даже в этом случае планировщик не определен.

Для использования dhtmlx-scheduler с TypeScript обязательно импортируйте dhtmlx-scheduler в дополнение к SchedulerStatic типу:

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

Тогда вы могли бы использовать window.scheduler вот так:

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

Пример SFC машинописного текста на основе документов:

 <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>