Dhtmlx Event Calendar 付费版使用

<template>
  <div ref="eventCalendarRef" class="event-calendar"></div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
// @ts-ignore
import { eventCalendar } from "./lib/event-calendar.dev.js";
import "./lib/event-calendar.css";
import { eventCalendarProps } from "./event-calendar";
defineOptions({ name: "EventCalendar" });
const {
  events,
  date,
  config,
  locale,
  mode,
  calendars,
  colors,
  editorConfig,
  editorValidation,
} = defineProps(eventCalendarProps);
const eventCalendarRef = ref();
const eventCalendarInstance = ref();
const { EventCalendar } = eventCalendar;
onMounted(() => {
  eventCalendarInstance.value = new EventCalendar(eventCalendarRef.value, {
    config: config,
    events: events,
    calendars: calendars,
    date: date,
    mode: mode,
    colors: colors,
    editorConfig: editorConfig,
    editorValidation: editorValidation,
    locale: eventCalendar[locale],
  });
});

defineExpose({
  instance: eventCalendarInstance,
});
</script>

<style lang="scss" scoped>
</style>