search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Vue Calendar component is not exposing its properties and methods

Asked by Domenico Grasso
7 months ago.


I am new to daypilot, I am trying to add a calendar to one of my applications in Vue 3 Composition API with the <script setup> syntax. the guide I am following is this "".
Unfortunately I got stuck at the point where I need to create a reference to the <DayPilotCalendar> component.
It shows me an error on the calendar update telling me that it is not a function, personally I think the problem is that I know I am using the <script setup> syntax (reference '') so the component is not exposing its properties and methods in the component instance, but I am not sure, in case I ask for support on how I can solve the problem


Answer posted by Dan Letecky [DayPilot]
7 months ago.

There is now a Vue Composition API example available in the documentation:

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"
  <DayPilotCalendar id="dp" :config="config" ref="calendarRef" />

import {DayPilot, DayPilotCalendar} from '@daypilot/daypilot-lite-vue'
import {onMounted, ref} from "vue";

export default {
  name: 'WeeklyCalendar',
  props: {
  components: {
  setup() {
    const calendarRef = ref(null);

    const config = {
      viewType: "Week",
      // ...

    const loadEvents = () => {
      // placeholder for an HTTP call
      var data = [
          id: 1,
          text: 'Event 1',
        // ...
      calendarRef.value.control.update({ events: data });

    onMounted(() => {

    return {
This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.