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

Tutorials

• Angular 4 Monthly Event Calendar Quick Start Project

DayPilot Editions

DayPilot Lite (Open-Source)

The open-source DayPilot Lite for Angular package that includes the monthly calendar is available at NPM:

• @daypilot/daypilot-lite-angular

DayPilot Pro

The Angular Monthly Event Calendar component is part of DayPilot Pro for JavaScript.

Online Configurator

Configure the monthly calendar Angular component and download a ready-to-run Angular project using the Monthly Calendar UI Builder online application. 

Package Installation

DayPilot Lite

npm install @daypilot/daypilot-lite-angular

DayPilot Pro

DayPilot Pro for Angular NPM package is hosted at npm.daypilot.org.

npm install https://npm.daypilot.org/daypilot-pro-angular/trial/x.y.zzzz.tar.gz --save

You can get a link to the latest release at npm.daypilot.org.

Licensed customers can get a custom NPM link with their API key in the customer area.

Module Import

First, it is necessary to import DayPilotModule which includes the Angular components:

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

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

@NgModule({
  imports:      [
    // ...
    DayPilotModule
  ],
  // ...
})
export class MonthlyCalendarModule { }

Displaying the Monthly Calendar

As soon as DayPilotModule is imported you can insert the Monthly Calendar in the component template using <daypilot-month> tag:

@Component({
  template: `<daypilot-month></daypilot-month>`,
  // ...
})
export class MonthlyCalendarComponent {
  // ...
}

Monthly Calendar Configuration

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

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

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

Example:

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

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

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

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

  config: any = {
    startDate: "2022-01-01"
  }

}

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

Loading Event Data

Use the [events] attribute of the <daypilot-month> tag to specify the array with event data. The monthly calendar component expects an array of objects with structure described in DayPilot.Event.data documentation.

Example:

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

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

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

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

  config: any = {
    startDate: "2017-11-01",
    // ...
  }

  events: [
    {start: "2022-01-05T00:00:00", end: "2022-01-07T00:00:00", id: 1, text: "Event 1"}
  ]
}

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

Event Handlers

You can specify the event handlers using the "config" object.

Example that specifies a custom onEventMoved event handler:

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

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

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

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

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

  events: [
    {start: "2022-01-05T00:00:00", end: "2022-01-07T00:00:00", id: 1, text: "Event 1"}
  ]
}

DayPilot.Month Object

The Angular monthly event calendar component works with two Month objects:

• DayPilotMonthComponent => Angular Component (<daypilot-month> tag)

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

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

Template (HTML)

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

Component (TypeScript)

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

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

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

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

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

}

This object exposes the underlying DayPilot.Month object using a "control" property:

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

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

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

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

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

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

}

Calling DayPilot.Month Methods

You can use the DayPilot.Month API directly. In order to call the Monthly calendar control methods you need to get the DayPilot.Month object reference (using the control property).