The Angular date picker (DayPilot Navigator) lets users choose a day or date range and navigate a larger scheduling interface. It can display several months and highlight dates that already contain events.

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

angular date picker component navigator

Angular Date Picker Features

  • Day, week, and month selection. Use selectMode to match the view in the main calendar. Enable freeHandSelectionEnabled when users need to drag across an arbitrary date range.

  • One or several months. Set showMonths to control how many months are visible and skipMonths to control the arrow-navigation step. Choose vertical or horizontal orientation.

  • Free/busy highlighting. Supply event data to mark days with scheduled events. The default theme uses bold text; CSS and onBeforeCellRender can customize the appearance. A busy marker does not by itself prevent selection.

  • Calendar integration. Use the selected date or range to update Calendar, Month, or Scheduler. Load enough event data for the Navigator’s entire visible range if every displayed month needs accurate busy markers.

Demos and Tutorials

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

Date Selection and Layout

Backend and Older Integration Recipes

Installation

DayPilot Lite

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

npm install @daypilot/daypilot-lite-angular

DayPilot Pro

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

The examples use standalone Angular components. Import DayPilotModule in the component that contains the DayPilot tag.

Select a Date

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

navigator.component.ts

import {Component} from '@angular/core';
import {DayPilot, DayPilotModule} from '@daypilot/daypilot-lite-angular';

@Component({
  selector: 'app-navigator',
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <daypilot-navigator
      [config]="config"
      [(date)]="selectedDay"
    ></daypilot-navigator>
    <p>Selected day: {{ selectedDay.toString('yyyy-MM-dd') }}</p>
  `
})
export class NavigatorComponent {
  selectedDay = new DayPilot.Date('2026-10-05');
  config: DayPilot.NavigatorConfig = {
    startDate: '2026-10-01',
    showMonths: 2,
    skipMonths: 1,
    selectMode: 'Day'
  };
}

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. The [(date)] binding keeps the selected day in the Angular component.

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

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.

navigator-connected.component.ts

import {Component, signal} from '@angular/core';
import {DayPilot, DayPilotModule} from '@daypilot/daypilot-lite-angular';

@Component({
  selector: 'app-navigator',
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <daypilot-navigator
      [config]="navigatorConfig"
      [date]="selectedDay"
      (dateChange)="selectWeek($event)"
      [events]="events"></daypilot-navigator>
    <daypilot-calendar
      [config]="calendarConfig"
      [events]="events"></daypilot-calendar>
  `
})
export class NavigatorComponent {
  selectedDay = new DayPilot.Date('2026-10-05');
  events = signal<DayPilot.EventData[]>([
  {id: 'meeting', text: 'Meeting',
    start: '2026-10-05T10:00:00', end: '2026-10-05T12:00:00'}
]);

  navigatorConfig: DayPilot.NavigatorConfig = {
    startDate: '2026-10-01', showMonths: 2, skipMonths: 1,
    selectMode: 'Week', weekStarts: 1
  };

  calendarConfig: DayPilot.CalendarConfig = {
    startDate: this.selectedDay, viewType: 'Week', weekStarts: 1,
    onEventMoved: args => this.events.set([...args.control.events.list]),
    onEventResized: args => this.events.set([...args.control.events.list])
  };

  selectWeek(day: DayPilot.Date) {
    this.selectedDay = day;
    this.calendarConfig = {...this.calendarConfig, startDate: day};
  }
}

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.

The connected example uses an event signal. events.set() gives both wrappers the changed collection. Pass the signal itself using [events]="events"; calling events() passes its current value through the ordinary-input path instead. Signal configuration/event inputs are supported since Pro 2025.1.6377 and Lite Angular 5.0.0; signals require Angular 16 or later.

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.

navigator-range.component.ts

import {Component, signal} from '@angular/core';
import {DayPilot, DayPilotModule} from '@daypilot/daypilot-lite-angular';

@Component({
  selector: 'app-navigator',
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <daypilot-navigator [config]="config"></daypilot-navigator>
    <p>{{ range() }}</p>
  `
})
export class NavigatorComponent {
  range = signal('');
  config: DayPilot.NavigatorConfig = {
    startDate: '2026-10-01',
    freeHandSelectionEnabled: true,
    onTimeRangeSelected: args => {
      this.range.set(args.start.toString('yyyy-MM-dd') + ' – ' +
        args.end.toString('yyyy-MM-dd'));
    }
  };
}

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.

navigator-api.component.ts

import {Component, ViewChild} from '@angular/core';
import {
  DayPilot, DayPilotModule, DayPilotNavigatorComponent
} from '@daypilot/daypilot-lite-angular';

@Component({
  selector: 'app-navigator',
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <button (click)="today()">Today</button>
    <daypilot-navigator #navigator
      [config]="config"
      [(date)]="selectedDay"
    ></daypilot-navigator>
    <p>Selected day: {{ selectedDay.toString('yyyy-MM-dd') }}</p>
  `
})
export class NavigatorComponent {
  @ViewChild('navigator') navigator!: DayPilotNavigatorComponent;

  today() {
    this.navigator.control.select(DayPilot.Date.today());
  }

  selectedDay = new DayPilot.Date('2026-10-05');
  config: DayPilot.NavigatorConfig = {
    startDate: '2026-10-01',
    showMonths: 2,
    skipMonths: 1,
    selectMode: 'Day'
  };
}

The wrapper manages initialization and disposal. @ViewChild exposes the wrapper, whose control property is available after initialization. See select() and the Navigator API.

Availability

Availability of this feature in DayPilot editions:

ProductLitePro
DayPilot for JavaScript
DayPilot for ASP.NET WebForms
DayPilot for ASP.NET MVC
DayPilot for Java