Vue Date Picker Component (DayPilot)

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

Example

<template>
  <DayPilotNavigator
    :showMonths="showMonths"
    :skipMonths="skipMonths"
    :selectMode="selectMode"
    @timeRangeSelected="onTimeRangeSelected"
  />
</template>

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

const showMonths = ref(3)
const skipMonths = ref(3)
const selectMode = ref('Week')

const onTimeRangeSelected = (args) => {
  console.log('new date', args.day)
}
</script>