Angular Date Picker

DayPilot Editions

DayPilot Lite

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

DayPilot Pro

The Navigator is included in DayPilot Pro for JavaScript.

Tutorials

Open-Source Tutorials

• Angular Calendar: Date Switching
  Angular calendar application that integrates a date picker for direct selection of a date with "Previous" and "Next" buttons.
• Angular Calendar: Day/Week/Month Views (Open-Source)
  Angular calendar with day/week/month views. The select mode of the Navigator date picker is changed dynamically according to the current view.
• Open-Source Angular Appointment Calendar Component (TypeScript + PHP/MySQL)
  Angular weekly calendar with a date picker for switching the current week. The calendar loads events data from a PHP backend (MySQL database).

Pro Tutorials

• Angular Hotel Room Booking Tutorial (PHP/MySQL)
  Advanced tutorial that uses the Angular Scheduler component to create a hotel room scheduling application. The Navigator date picker is used to change the current month.
• Angular Calendar: Full Screen Layout
  An Angular Calendar component configured to fill the available screen space. The current date can be changed using a date picker which is displayed in a collapsible sidebar.
• Angular Scheduler: Full Screen Layout
• A Scheduler component that displays a timeline for multiple resources. The current month can be switched using the Navigator component.
• Angular Scheduler: Date Navigation
  A date picker component that uses a free-hand selection mode to display a custom number of days.

Example

import {Component, ViewChild, AfterViewInit} from "@angular/core";

// DayPilot Lite
import { DayPilot, DayPilotNavigatorComponent } from "@daypilot/daypilot-lite-angular";

// DayPilot Pro
import { DayPilot, DayPilotNavigatorComponent } from "daypilot-pro-angular";

@Component({
  selector: 'date-picker-component',
  template: `
    <daypilot-navigator [config]="configNavigator" [events]="events" [(date)]="date" (dateChange)="changeDate($event)" #navigator></daypilot-navigator>
  `,
  styles: [``]
})
export class CalendarComponent implements AfterViewInit {

  @ViewChild("navigator") nav!: DayPilotNavigatorComponent;

  events: DayPilot.EventData[] = [];

  date = DayPilot.Date.today();

  configNavigator: DayPilot.NavigatorConfig = {
    showMonths: 3,
    cellWidth: 25,
    cellHeight: 25,
    onVisibleRangeChanged: args => {
      this.loadEvents();
    }
  };

  changeDate(date: DayPilot.Date): void {
    // handle date selection here
  }

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
    this.loadEvents();
  }

  loadEvents(): void {
    const from = this.nav.control.visibleStart();
    const to = this.nav.control.visibleEnd();
    this.ds.getEvents(from, to).subscribe(result => {
      this.events = result;
    });
  }

}