There is now a Vue Composition API example available in the documentation:
https://doc.daypilot.org/calendar/vue-js/
Here is a shortened version that shows how to access the DayPilot.Calendar object using ref().
- You need to add ref="calendarRef" attribute to the <DayPilotCalendar> tag
- Define calendarRef as ref(null)
- After the component is mounted, you can access the DayPilot.Calendar object as "calendarRef.value.control"
<template>
<DayPilotCalendar id="dp" :config="config" ref="calendarRef" />
</template>
<script>
import {DayPilot, DayPilotCalendar} from '@daypilot/daypilot-lite-vue'
import {onMounted, ref} from "vue";
export default {
name: 'WeeklyCalendar',
props: {
},
components: {
DayPilotCalendar
},
setup() {
const calendarRef = ref(null);
const config = {
viewType: "Week",
// ...
};
const loadEvents = () => {
// placeholder for an HTTP call
var data = [
{
id: 1,
start: DayPilot.Date.today().addHours(10),
end: DayPilot.Date.today().addHours(11),
text: 'Event 1',
},
// ...
];
calendarRef.value.control.update({ events: data });
};
onMounted(() => {
loadEvents();
});
return {
config,
calendarRef
};
}
}
</script>