angular event calendar scheduler component

Open-Source Tutorials

Tutorials

Feature Showcase

Calendar UI Builder

calendar ui builder configurator

Create a quick prototype using Calendar UI Builder. You can use this visual tool to configure the Calendar appearance and properties and generate a downloadable Angular 6 project.

DayPilot Editions

DayPilot Lite (Open-Source)

The Angular Calendar component is included in the @daypilot/daypilot-lite-angular package.

DayPilot Pro

The Angular Calendar component is included in DayPilot Pro for JavaScript.

Angular Calendar Installation

DayPilot Lite

Install the latest DayPilot Lite Angular package from NPM using the following command:

npm install @daypilot/daypilot-lite-angular

The @daypilot/daypilot-lite-angular package requires Angular 12 or higher (it only works with Ivy engine).

DayPilot Pro

You can install DayPilot Pro package using the following command. Visit npm.daypilot.org to get a link to the latest version.

npm install https://npm.daypilot.org/daypilot-pro-angular/trial/2021.3.5084.tar.gz

It will download the package and add a dependency to package.json.

Licensed customers can get a custom NPM link in the customer area that includes their API key (https://npm.daypilot.org/daypilot-pro-angular/{api-key}/x.y.zzzz.tar.gz).

How to Display the Angular Event Calendar

You can display the calendar by adding <daypilot-calendar> tag to the component template:

<daypilot-calendar></daypilot-calendar>

The <daypilot-calendar> tag requires DayPilotModule to be imported:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

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

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DayPilotModule
  ],
  providers: [ ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Angular Calendar Configuration

Use the [config] attribute to specify the configuration object:

<daypilot-calendar [config]="config"></daypilot-calendar>

You can use the config object to specify custom properties and event handlers.

The current change detection implementation requires that the object is serializable using JSON.stringify().

Example:

import {Component} from '@angular/core';

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

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

@Component({
  selector: 'angular-calendar-example',
  template: `<daypilot-calendar [config]="config"></daypilot-calendar>`
})
export class AppComponent {

  config: DayPilot.CalendarConfig = {
    viewType: "Week",
    startDate: "2022-01-05"
  }

}

Loading Calendar Event Data

Use the [events] attribute to specify the object that holds the event data:

<daypilot-calendar [events]="events"></daypilot-calendar>

The current change detection implementation requires that the object is serializable using JSON.stringify().

You can use the visibleStart() and visibleEnd() methods of the DayPilot.Calendar object to get the grid boundaries. It's first available in the ngAfterViewInit() event handler.

Example:

import {Component} from '@angular/core';

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

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

@Component({
  selector: 'angular-calendar-example',
  template: `<daypilot-calendar [config]="config" [events]="events"></daypilot-calendar>`
})
export class AppComponent {

  config: any = {
    viewType: "Week",
    startDate: "2022-01-05"
  }

  events: [
    { id: 1, start: "2022-01-21T10:00:00", end: "2022-01-21T14:00:00", text: "Event 1" }
  ]

}

Event Handlers

You can specify event handlers using the config object.

The following example specifies the onEventMoved event handler:

import {Component} from '@angular/core';

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

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

@Component({
  selector: 'angular-calendar-example',
  template: `<daypilot-calendar [config]="config" [events]="events"></daypilot-calendar>`
})
export class AppComponent {

  config: any = {
    viewType: "Week",
    startDate: "2022-01-05"
    onEventMoved: args => {
      console.log("Event moved");
    }
  }

  events: [
    { id: 1, start: "2022-01-21T10:00:00", end: "2022-01-21T14:00:00", text: "Event 1" }
  ]

}

DayPilot.Calendar Object

The Angular Calendar component works with two Calendar objects:

  • DayPilotCalendarComponent => Angular Component (<daypilot-calendar> tag)

  • DayPilot.Calendar => Underlying plain JavaScript object (DayPilot.Calendar class)

The DayPilot.Calendar object lets you access the Calendar component methods (such as the update() method) directly.

You can get a reference to DayPilotCalendarComponent using a hash attribute:

Template (HTML)

<daypilot-calendar #calendar></daypilot-calendar>

Component (TypeScript)

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

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

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

@Component({
  selector: 'angular-calendar-example',
  template: `<daypilot-calendar #calendar></daypilot-calendar>`
})
export class AppComponent {

  @ViewChild("calendar") calendar!: DayPilotCalendarComponent;

}

This object exposes the underlying DayPilot.Calendar object using the control property:

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

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

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

@Component({
  selector: 'angular-calendar-example',
  template: `
    <daypilot-calendar #calendar></daypilot-calendar>
    <button (click)="message()">Show message</button>
`
})
export class AppComponent {

  @ViewChild("calendar") calendar!: DayPilotCalendarComponent;

  message() {
    this.calendar.control.message("Welcome!");
  }  

}