Features

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

Angular 5 Monthly Calendar Component

The customized monthly calendar component is defined in month.component.ts TypeScript file as MonthComponent.

The component HTML template contains DayPilot Month component tag (<daypilot-month>):

@Component({
  template: `<daypilot-month [config]="config" [events]="events" #month></daypilot-month>`,
  // ...
})

The [config] attribute points to a config object that holds the monthly calendar properties and event handlers:

export class MonthComponent implements AfterViewInit {

  // ...

  config: any = {
    startDate: "2017-12-01"
  };

}

The [events] attribute defines the data source object:

export class MonthComponent implements AfterViewInit {

  events: any[] = [];

  // ...
}

The monthly calendar will automatically watch changes made to the "events" property and update the calendar UI if necessary.

Full source code of month.component.ts:

import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilotMonthComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";{}

@Component({
  selector: 'month-component',
  template: `<daypilot-month [config]="config" [events]="events" #month></daypilot-month>`,
  styles: [``]
})
export class MonthComponent implements AfterViewInit {

  @ViewChild("month")
  month: DayPilotMonthComponent;

  events: any[] = [];

  config: any = {
    startDate: "2017-12-01"
  };

  constructor(private ds: DataService) {
  }

  ngAfterViewInit(): void {
    var from = this.month.control.visibleStart();
    var to = this.month.control.visibleEnd();
    this.ds.getEvents(from, to).subscribe(result => {
      this.events = result;
    });
  }

}

Angular 5 Data Service

The data access service provides a getEvents() method that returns the event data. This sample project uses a statically-defined array but you can easily replace it with a server-side AJAX call.

data.service.ts

import {Injectable} from "@angular/core";
import {Observable} from "rxjs/Observable";
import {DayPilot} from "daypilot-pro-angular";
import {HttpClient} from "@angular/common/http";

@Injectable()
export class DataService {

  events: any[] = [
    {
      id: "1",
      start: "2017-12-04",
      end: "2017-12-05",
      text: "Event 1",
      backColor: "#ea9999"
    },
    {
      id: "2",
      start: "2017-12-05",
      end: "2017-12-08",
      text: "Event 2",
      backColor: "#a2c4c9"
    },
    {
      id: "3",
      start: "2017-12-11",
      end: "2017-12-11",
      text: "Event 3",
      backColor: "#b6d7a8"
    },
    {
      id: "4",
      start: "2017-12-11",
      end: "2017-12-11",
      text: "Event 4",
      backColor: "#ffe599"
    }
  ];

  constructor(private http : HttpClient){
  }

  getEvents(from: DayPilot.Date, to: DayPilot.Date): Observable<any[]> {

    // simulating an HTTP request
    return new Observable(observer => {
      setTimeout(() => {
        observer.next(this.events);
      }, 200);
    });

    // return this.http.get("/api/events?from=" + from.toString() + "&to=" + to.toString());
  }

}