Vue Date Picker

DayPilot Editions

DayPilot Lite

The Navigator date picker component is included in @daypilot/daypilot-lite-vue package.

DayPilot Pro

The Navigator is included in DayPilot Pro for JavaScript.

Tutorials

• Vue Date Picker with Free/Busy Highlighting (Open-Source)
• Vue.js Weekly Calendar Tutorial (Open-Source)

Example

<template>
  <DayPilotNavigator id="nav" :config="navigatorConfig" />
</template>

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

export default {
  name: 'DatePicker',
  data: function() {
    return {
      navigatorConfig: {
        showMonths: 3,
        skipMonths: 3,
        selectMode: "Week",
        startDate: "2022-03-01",
        selectionDay: "2022-02-28",
        onTimeRangeSelected: args => {
          console.log("new date", args.day);
        }
      },
    }
  },
  props: {
  },
  components: {
    DayPilotNavigator
  },
  methods: {
  }
}
</script>