angular2-event-calendar-component.png

Tutorials

Live Demo

DayPilot Editions

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

NPM

DayPilot Pro Angular 2 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.

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.3.2573.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 { }

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

}