Vue Date Picker

The Vue date picker (DayPilot Navigator) displays a compact calendar for choosing a day, week, month, or custom date range. Use it beside a larger Calendar, Month, or Scheduler view to change the displayed dates. It can show several months at once and mark days that contain events, so users can see scheduled dates before opening them.

The component is available in DayPilot Lite (open-source, Apache License 2.0) and DayPilot Pro (commercial). Both include Vue integration and TypeScript declarations.

Vue Date Picker Features

• Day, week, and month selection. A click can select one day, the containing week, or the containing month. selectMode controls that choice; weekStarts sets the week boundary. Enable freeHandSelectionEnabled to allow a dragged range as well: a click still uses the configured selection mode.

• One or several months. Set showMonths to control how many months are visible and skipMonths to control the arrow-navigation step. For example, display three months but advance one month at a time. Choose vertical orientation for a sidebar or horizontal orientation for a row of months.

• Free/busy highlighting. Supply event start/end dates to mark days with scheduled events. The default theme uses bold text; CSS and onBeforeCellRender can customize the appearance. A marker means that the supplied data contains an event on that day; it does not mean every time slot is occupied or prevent date selection.

• Calendar integration. Use the selected date or range to update Calendar, Month, or Scheduler. Browsing months and changing the selection are separate actions: the navigation arrows can show another month while the main view keeps its selected date. Load event data for every displayed Navigator month when showing busy markers.

Vue Date Picker Examples

Show Busy Dates Across Several Months

The free/busy tutorial displays a three-month Navigator beside a weekly Calendar. Both components receive the same event collection. The Navigator uses the event dates to mark busy days across the overview; selecting a week shows its events in the larger Calendar.

The tutorial styles busy-date cells as circles. Selection highlighting remains visible over the selected week.

The example styles navigator_default_busy cells as red circles. Moving an event to a different date changes the affected busy markers as well as the event's Calendar position. A single appointment is enough to mark a day: the marker indicates that there is something scheduled, not that the day is fully booked. Try moving an event and checking the date picker.

Keep the data range large enough for the overview. If the Navigator shows three months but the server returns only the selected week's events, dates outside that week cannot be marked accurately. Load using the Navigator's visibleStart() and visibleEnd(), including the adjacent-month days at the edges of the grid.

Keep View Selection and Cell Content in Vue

The combined-view tutorial switches the Navigator's selection mode together with its Day, Week, and Month views. For custom date-cell content, the Vue integration also provides a cell slot. The example below adds a dot when cell.events.all() contains events, while keeping the Navigator's day number. CSS styling and Vue templates offer two ways to show the same underlying date information.

Demos and Tutorials

Each tutorial includes a downloadable project. The edition used by the example is shown beside its link.

Free/Busy and Calendar Navigation

• Vue Date Picker with Free/Busy Highlighting (Open-Source) · Live demo (Lite)
  Share event data with a date picker and highlight busy dates.

• Vue.js Weekly Calendar Tutorial (Open-Source) · Live demo (Lite)
  Build a weekly calendar with date navigation and event editing.

• Vue Calendar: Day/Week/Month Views (Open-Source) · Live demo (Lite)
  Connect day, week, and month views to shared event data and a date picker.

Installation

DayPilot Lite

Install @daypilot/daypilot-lite-vue from npm:

npm install @daypilot/daypilot-lite-vue

DayPilot Pro

At npm.daypilot.org, select Vue and copy the installation command for daypilot-pro-vue. Licensed customers can obtain their package URL in the customer area.

The examples use Vue 3 and the Composition API with <script setup>.

Select a Date

Choose a date in the Navigator. The text below it shows the selected day.

Navigator.vue

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

const selectedDay = ref('2026-10-05');

function onTimeRangeSelected(args) {
  selectedDay.value = args.day.toString('yyyy-MM-dd');
}
</script>

<template>
  <DayPilotNavigator
    startDate="2026-10-01"
    :showMonths="2"
    :skipMonths="1"
    selectMode="Day"
    :selectionDay="selectedDay"
    @timeRangeSelected="onTimeRangeSelected"
  />
  <p>Selected day: {{ selectedDay }}</p>
</template>

The selected date and visible months are separate settings. startDate sets the first displayed month, showMonths sets the number of months, and skipMonths sets the navigation step. selectionDay supplies the selected date; the callback returns the clicked date in args.day.

These examples use Lite. For Pro, change the import to daypilot-pro-vue.

Connect a Calendar and Highlight Busy Dates

Use one selected date to control the week shown by the Calendar, and one event collection for both components. The Navigator highlights dates with events. Select another week to change the Calendar; move an appointment to update its date and the Navigator’s busy marker.

NavigatorConnected.vue

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

const selectedDay = ref('2026-10-05');
const events = ref([
  {id: 'meeting', text: 'Meeting',
    start: '2026-10-05T10:00:00', end: '2026-10-05T12:00:00'}
]);

function selectWeek(args) {
  selectedDay.value = args.day.toString();
}

function refreshBusyDates(args) {
  events.value = [...args.control.events.list];
}
</script>

<template>
  <DayPilotNavigator
    startDate="2026-10-01"
    :showMonths="2"
    :skipMonths="1"
    selectMode="Week"
    :weekStarts="1"
    :selectionDay="selectedDay"
    :events="events"
    @timeRangeSelected="selectWeek"
  />
  <DayPilotCalendar
    :startDate="selectedDay"
    viewType="Week"
    :weekStarts="1"
    :events="events"
    @eventMoved="refreshBusyDates"
    @eventResized="refreshBusyDates"
  />
</template>

The Calendar moves and resizes events automatically. The callbacks here notify the second component that its busy-date data changed. They are useful because the Navigator is another consumer of the collection; the Calendar needs no callback merely to display its own edit.

Use the same weekStarts value in both components. For a monthly view, connect a Month component and set selectMode: "Month". See binding to a main control and selection modes.

Busy-day highlighting marks dates represented in the supplied data; it does not disable empty dates. In a backend application, load events for all displayed Navigator months, including visible days from adjacent months. Use visibleStart()/visibleEnd() and reload after onVisibleRangeChanged. Loading only the selected Calendar week would incorrectly make other dates look free.

Add a Busy Marker with a Vue Template

This variation keeps the same Calendar connection and adds a marker to busy cells. The Navigator already displays the day number, so the slot only adds the dot.

NavigatorContent.vue

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

const selectedDay = ref('2026-10-05');
const events = ref([
  {id: 'meeting', text: 'Meeting',
    start: '2026-10-05T10:00:00', end: '2026-10-05T12:00:00'}
]);

function selectWeek(args) {
  selectedDay.value = args.day.toString();
}

function refreshBusyDates(args) {
  events.value = [...args.control.events.list];
}
</script>

<template>
  <DayPilotNavigator
    startDate="2026-10-01"
    :showMonths="2"
    :skipMonths="1"
    selectMode="Week"
    :weekStarts="1"
    :selectionDay="selectedDay"
    :events="events"
    @timeRangeSelected="selectWeek"
  >
    <template #cell="{cell}">
      <small v-if="cell.events.all().length">•</small>
    </template>
  </DayPilotNavigator>
  <DayPilotCalendar
    :startDate="selectedDay"
    viewType="Week"
    :weekStarts="1"
    :events="events"
    @eventMoved="refreshBusyDates"
    @eventResized="refreshBusyDates"
  />
</template>

The cell slot provides day, isToday, isWeekend, isCurrentMonth and events.all(). Pro templates also track reactive parent values and refresh their content when those values change.

Select a Custom Date Range

For a date-range picker, enable freeHandSelectionEnabled. This is a separate complete example: drag across several days to display the selected range.

NavigatorRange.vue

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

const range = ref('');

function selectRange(args) {
  range.value = args.start.toString('yyyy-MM-dd') + ' – ' +
    args.end.toString('yyyy-MM-dd');
}
</script>

<template>
  <DayPilotNavigator
    startDate="2026-10-01"
    :freeHandSelectionEnabled="true"
    @timeRangeSelected="selectRange"
  />
  <p>{{ range }}</p>
</template>

args.end is exclusive. Selecting October 12–14 therefore returns October 15 as the end. args.days gives the number of selected days. Use the range to filter application data or configure a custom-length main view.

Select Today Using the Navigator API

The select() method changes the selection, brings it into view and triggers the selection callback. This Today button therefore also updates the selected-day text.

NavigatorApi.vue

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

const navigator = ref(null);

const selectedDay = ref('2026-10-05');

function onTimeRangeSelected(args) {
  selectedDay.value = args.day.toString('yyyy-MM-dd');
}
</script>

<template>
  <button @click="navigator.control.select(DayPilot.Date.today())">Today</button>
  <DayPilotNavigator ref="navigator"
    startDate="2026-10-01"
    :showMonths="2"
    :skipMonths="1"
    selectMode="Day"
    :selectionDay="selectedDay"
    @timeRangeSelected="onTimeRangeSelected"
  />
  <p>Selected day: {{ selectedDay }}</p>
</template>

The wrapper manages initialization and disposal. The template ref exposes the JavaScript control as navigator.value.control inside the script. See select() and the Navigator API.