angular2 event calendar component

Tutorials

Feature Showcase

Live Demo

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

Angular 2+ Calendar component is included in DayPilot Pro for JavaScript.

NPM

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

Trial version:

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

Full version:

  • https://npm.daypilot.org/daypilot-pro-angular/{api-key}/x.y.zzzz.tar.gz

Licensed customers can get the API key in the customer area.

Angular Calendar Installation

You can install DayPilot Pro package from npm.daypilot.org using the following command:

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.

Displaying the 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';
import { DayPilot } from "daypilot-pro-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>

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

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

Example:

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

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

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

}

Loading Calendar Event Data

Use the [events] attribute to specify 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';
import {DayPilot} from "daypilot-pro-angular";

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

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

  events: [
    { id: 1, start: "2021-01-21T10:00:00", end: "2021-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';
import {DayPilot} from "daypilot-pro-angular";

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

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

  events: [
    { id: 1, start: "2017-01-21T10:00:00", end: "2017-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)

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

Template (HTML)

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

Component (TypeScript)

import {Component, ViewChild} from '@angular/core';
import {DayPilot} from "daypilot-pro-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';
import {DayPilot} from "daypilot-pro-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!");
  }  

}