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