Vue Monthly Calendar

Vue Monthly Calendar Editions

DayPilot Lite (Open-Source)

The open-source DayPilot Lite for Vue package is available at @daypilot/daypilot-lite-vue.

npm install @daypilot/daypilot-lite-vue

DayPilot Pro

You can install the daypilot-pro-vue package using a link from npm.daypilot.org.

How to Use the Vue Monthly Calendar Component

This is a basic example that displays the Vue calendar. It uses the open-source DayPilot Lite version (@daypilot/daypilot-lite-vue package).

<template>
  <DayPilotMonth id="dp" :config="config" />
</template>

<script>
import {DayPilot, DayPilotMonth} from '@daypilot/daypilot-lite-vue'

export default {
  name: 'MonthlyCalendar',
  data: function() {
    return {
      config: {
        startDate: "2023-05-01",
      }
    }
  },
  components: {
    DayPilotMonth
  },
}
</script>

The config object specifies the calendar properties and event handlers.

To load the calendar event data, you can use either the :events attribute:

<template>
  <DayPilotMonth id="dp" :config="config" :events="events" />
</template>

<script>
import {DayPilot, DayPilotMonth} from '@daypilot/daypilot-lite-vue'

export default {
  name: 'MonthlyCalendar',
  data: function() {
    return {
      config: {
        startDate: "2023-05-01",
      },
      events: []
    }
  },
  components: {
    DayPilotMonth
  },
  mounted() {
    const events = [
      {
        id: 1,
        start: "2023-05-04T00:00:00",
        end: "2023-05-05T00:00:00",
        text: "Calendar Event"
      },
    ];

    this.events = events;
  }
}
</script>

Or you can use the direct API and load events using the update() method:

<template>
  <DayPilotMonth id="dp" :config="config" ref-"calendar" />
</template>

<script>
import {DayPilot, DayPilotMonth} from '@daypilot/daypilot-lite-vue'

export default {
  name: 'MonthlyCalendar',
  data: function() {
    return {
      config: {
        startDate: "2023-05-01",
      }
    }
  },
  components: {
    DayPilotMonth
  },
  computed: {
    calendar: function () {
      return this.$refs.calendar.control;
    },
  },  
  mounted() {
    const events = [
      {
        id: 1,
        start: "2023-05-04T00:00:00",
        end: "2023-05-05T00:00:00",
        text: "Calendar Event"
      },
    ];

    this.calendar.update({events});
  }
}
</script>

Handling Drag and Drop Events

To handle drag and drop events (such as event moving), add the respective event handlers to the config object.

This example shows how to handle drag and drop event moving:

data: function() {
  return {
    config: {
      startDate: "2023-05-01",
      onEventMoved: args => {
        const name = args.e.data.text;
        console.log(`Event ${name} moved to ${args.newStart}");
      }
    }
  }
},