Can I use vue2 and Javascript to use event calendar?

Can I use vue2 and Javascript to use event calendar?

it seems that I can’t compile, I am using vue2 with Javascript
can you give me some instructions?

Here are detailed steps to integrate the DHTMLX Event Calendar into a Vue.js v2 app:

  • Make sure you have Vue CLI installed. If not, you can install it globally using the following command:
npm install -g @vue/cli
  • Create Vue app:
vue create vue2-calendar
  • Navigate to the app directory:
cd vue2-calendar
  • Install dependencies:
npm install
  • Get DHTMLX Event Calendar code:
npm config set @dhx:registry
npm i @dhx/trial-eventcalendar
  • Create CalendarComponent.vue file in the components folder and add the next lines of code into it:
import { EventCalendar } from "@dhx/trial-eventcalendar";
import "@dhx/trial-eventcalendar/dist/event-calendar.css";

export default {
  props: ["events", "date"],

  mounted() {
    new EventCalendar(this.$refs.cont, {
  unmounted() {
    this.$refs.cont.innerHTML = "";

  <div ref="cont" style="width: 100%; height: 100%"></div>
  • Update App.vue with the provided code:
import Calendar from "./components/Calendar.vue";
import { getData } from "./data";

export default {
  components: { Calendar },
  data() {
    return {
      records: getData(),
      date: new Date(2024, 5, 10),

  <Calendar :events="records" :date="date" />
  • Create a data.js file in the src folder with sample event data:
export function getData() {
	return [
			id: '27',
			type: 'work',
			start_date: new Date('2024-06-10T14:00:00'),
			end_date: new Date('2024-06-10T18:30:00'),
			text: ' Olympiastadion - Berlin ',
			details: ' Berlin, GER ',
			id: '28',
			type: 'rest',
			start_date: new Date('2024-06-12T14:00:00'),
			end_date: new Date('2024-06-12T16:00:00'),
			text: ' Commerz Bank Arena ',
			details: ' Frankfurt, GER ',
			id: '29',
			type: 'meeting',
			start_date: new Date('2024-06-13T11:00:00'),
			end_date: new Date('2024-06-13T16:00:00'),
			text: ' Olympic Stadium - Munich ',
			details: ' Munich, GER ',
  • Run your Vue.js app:
npm run serve

I have prepared an example, please take a look:

You can also find an online example in the following article: Integration with Vue | DHTMLX Event Calendar Docs