Can I use vue2 and Javascript to use event calendar?

Event Calendar
#1

Can I use vue2 and Javascript to use event calendar?

#2

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

#3

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 https://npm.dhtmlx.com
npm i @dhx/trial-eventcalendar
  • Create CalendarComponent.vue file in the components folder and add the next lines of code into it:
<script>
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, {
      events: this.events,
      date: this.date,
    });
  },
  unmounted() {
    this.$refs.cont.innerHTML = "";
  },
};
</script>

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

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

<template>
  <Calendar :events="records" :date="date" />
</template>
  • 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: https://files.dhtmlx.com/30d/99400d9f78c1da8ae2d4395c0eb1f4ec/vue2-calendar.zip

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