The Angular 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 Angular integration and TypeScript declarations.

angular date picker component navigator

Angular 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.

Angular Date Picker Examples

Drag Across the Dates to Choose the Calendar's Length

The range-selection tutorial connects a three-month Navigator to the Angular Calendar. A click selects a week; dragging from Monday through Friday selects five days instead. The Calendar then displays one column for each selected date.

A dragged date range controls the Calendar start date and number of day columns.

The selection callback supplies args.start, args.end, and args.days. The tutorial sets the Calendar to viewType: "Days", then updates its start date and day count. These values can also drive a Scheduler timeline or a date-range query. The Navigator reports the selection; the application decides which view or data to update. Try clicking a week and then dragging a shorter range.

Keep Previous, Next, and Today in Sync

The date-switching example uses Angular's [(date)] binding to share the selected date with a weekly Calendar. Previous and Next shift the shared date by seven days, while Today resets it to the current date. The binding keeps the highlighted week and Calendar together. Browsing the Navigator's month arrows lets users look ahead before choosing a new week. Try the navigation controls.

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 Integration and Scheduler Navigation

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.

Customize Content with Angular Templates (Pro)

Use an Angular template to replace the content of each Navigator day cell. You can add a date label, a badge based on supplied events, or content that depends on whether the day belongs to the displayed month.

This template integration is available in DayPilot Pro for Angular since version 2026.4.7099. Install the corresponding daypilot-pro-angular package from npm.daypilot.org.

Import DayPilotModule from daypilot-pro-angular in the Angular component that owns the template. It exports the DayPilot component and the daypilotTemplate directive. Place a named ng-template directly inside <daypilot-navigator>. Templates support Angular interpolation, bindings, event handlers, and child components; import any child components or additional Angular directives you use in the containing component.

Template Example

This standalone example supplies the component configuration and data as well as the template markup.

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

@Component({
  selector: 'app-navigator-templates',
  standalone: true,
  imports: [DayPilotModule],
  template: `
    <daypilot-navigator [config]="config" [events]="events">
      <ng-template daypilotTemplate="cell"
                   daypilotTemplateFor="navigator" let-cell="cell">
        <span [style.opacity]="cell.isCurrentMonth ? 1 : 0.5"
              [attr.title]="cell.events.all().length + ' events'">
          {{ cell.day.toString('d') }}
        </span>
      </ng-template>
    </daypilot-navigator>
  `
})
export class NavigatorTemplatesComponent {
  config: DayPilot.NavigatorConfig = {
    startDate: '2026-10-01',
    showMonths: 1,
    selectMode: 'Day'
  };

  events: DayPilot.EventData[] = [
    {id: 1, text: 'Planning',
      start: '2026-10-05', end: '2026-10-07'}
  ];
}

The example keeps the day number, dims dates from adjacent months, and exposes the supplied event count as a tooltip. The count comes from the events loaded into Navigator; load data for its full visible range if you use this information to indicate availability.

Supported Templates and Context

Each entry lists a supported daypilotTemplate name and its context bindings. The let- declarations bind named context values; an unqualified let-item would request an implicit value, which these templates do not provide.

  • cell: let-cell="cell".

    An object with day (DayPilot.Date), boolean isCurrentMonth, isToday, and isWeekend flags, and events.all(), which returns the DayPilot.Event objects associated with the day.

The optional daypilotTemplateFor="navigator" qualifier selects this component's context for Angular template type checking. It is useful when a name such as cell has different context fields in different components. If specified, it must match the enclosing DayPilot component. Enable Angular's strictTemplates option to check context members while building your application.

Rendering and Application State

Define at most one template for each supported name in a component. A template takes precedence over the corresponding DOM-add callback; omit the template to use that callback instead. Existing DOM-removal callbacks still run.

The wrapper creates and disposes the Angular views as DayPilot renders and removes their elements. Keep values that must survive scrolling, navigation, or redraws in application state, rather than only in a rendered child component.

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