Angular Event Calendar

Open-Source Tutorials

• Angular Calendar with Day/Week/Month Views
  How to integrate daily, weekly, monthly views and a date picker to create a complete Angular calendar solution.

• Angular Calendar: Date Switching
  How to switch the visible week using a date picker and next/previous buttons.

• Open-Source Angular Appointment Calendar Component (TypeScript) + PHP/MySQL Backend
  How to load calendar event data from a database using a REST API.

• Angular Resource Calendar Tutorial
  Calendar configured to display resources as columns.

• Angular Calendar: How to Use CSS Themes (Open-Source)
  The Angular Calendar component supports styling using CSS themes. Learn how to apply a custom theme and change the appearance on the fly.

• Angular Calendar with Undo/Redo (Open-Source)
  This tutorial shows how to implement undo/redo functionality the for the open-source Angular Calendar component.

Tutorials

• Angular Timetable Tutorial
  Calendar configured to display a weekly timetable.

Feature Showcase

• Angular Calendar: Displaying Custom Set of Days

• Angular Calendar: Full Screen Layout

• Angular Calendar: Detect Orientation Change (Landscape/Portrait)

Calendar UI Builder

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!");
  }  

}