angular-monthly-event-calendar.png

Tutorials

DayPilot Editions

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

NPM

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

Package Installation

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.

Module Import

Import DayPilotModule from "daypilot-pro-angular" package:

// ...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 usig <daypilot-month> tag:

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

Monthly Calendar Configuration

Use [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';
import {DayPilotMonthComponent} from "daypilot-pro-angular";

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

  config: any = {
    startDate: "2017-06-01"
  }

}

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

Loading Event Data

Use [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';
import {DayPilotMonthComponent} 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: "2017-11-05T00:00:00", end: "2017-11-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 onEventMoved event handler:

import {Component} from '@angular/core';
import {DayPilotMonthComponent} 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",
    // ...
    onEventMoved: args => {
      console.log("Event moved");
    }
  }

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

DayPilot.Month Object

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

  • DayPilotMonthComponent => Angular 2+ 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';
import {DayPilotMonthComponent} 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';
import {DayPilotMonthComponent} 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 "control" property).