angular2-event-calendar-component.png

Tutorials

Live Demo

Calendar UI Builder

calendar-ui-builder-configurator.png

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 5 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/8.4.3121.tar.gz --save

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

Displaying the Event Calendar

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

<daypilot-calendar></daypilot-calendar>

The <daypilot-calendar> tag requires DayPilotModule to be imported in the current module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import {DayPilot} from "daypilot-pro-angular";

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

Angular Calendar Configuration

Use [config] attribute:

<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: 'angular2-calendar-example',
  template: `<daypilot-calendar [config]="config"></daypilot-calendar>`
})
export class AppComponent {

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

}

Loading Calendar Event Data

Use [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 visibleStart() and visibleEnd() methods of the DayPilot.Calendar object to get the grid boundaries. It's first available in ngAfterViewInit() event handler.

Example:

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: "2017-01-05"
  }

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

}

Event Handlers

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

The followig example specifies 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: "2017-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 2 Calendar component works with two Calendar objects:

  • DayPilotCalendarComponent => Angular 2 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: 'angular2-calendar-example',
  template: `<daypilot-calendar #calendar1></daypilot-calendar>`
})
export class AppComponent {

  @ViewChild("calendar1")
  calendar: DayPilotCalendarComponent;

}

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

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

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

  @ViewChild("calendar1")
  calendar: DayPilotCalendarComponent;

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

}