Vue Calendar component is not exposing its properties and methods

Asked by Domenico Grasso
3 years ago.

Hello,

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 "https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial".
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 'https://vuejs.org/guide/essentials/template-refs.html#ref-on-component') 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

Thank

Answer posted by Dan Letecky [DayPilot]
3 years ago.

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>

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