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.

Angular Project Structure

The calendar-related code can be found in src/app/month directory. It contains three files:

  • month.module.ts

  • month.component.ts

  • data.service.ts

The implementation is encapsulated in MonthModule (month.module.ts file). The module exposes MonthComponent and DataService classes.

Project Initialization

The project download doesn't include the package dependencies (node_modules). You can download all dependencies using npm:

npm install

The dependencies already include "daypilot-pro-angular" module (package.json):

{
  // ...
  "dependencies": {
    "@angular/common": "^4.0.0",
    // ...
    "daypilot-pro-angular": "https://npm.daypilot.org/daypilot-pro-angular/trial/8.3.2864.tar.gz",
  },
  // ...
}

You can upgrade to the latest DayPilot Pro version using the URL available at npm.daypilot.org:

npm install https://npm.daypilot.org/daypilot-pro-angular/trial/8.4.2887.tar.gz --save

Running the Project

You can run the project using "start" script:

npm run start

The Angular application will be available at http://localhost:4200.

Source Code

month.module.ts

import {DataService} from "./data.service";
import {HttpModule} from "@angular/http";
import {FormsModule} from "@angular/forms";
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {MonthComponent} from "./month.component";
import {DayPilotModule} from "daypilot-pro-angular";

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    HttpModule,
    DayPilotModule
  ],
  declarations: [
    MonthComponent
  ],
  exports:      [ MonthComponent ],
  providers:    [ DataService ]
})
export class MonthModule { }

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" #calendar></daypilot-month>`,
  styles: [``]
})
export class MonthComponent implements AfterViewInit {

  @ViewChild("calendar")
  calendar: DayPilotMonthComponent;

  events: any[] = [];

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

  constructor(private ds: DataService) {
  }

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

}

data.service.ts

import { Http, Response } from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/Rx';
import {DayPilot} from 'daypilot-pro-angular';

@Injectable()
export class DataService {

  events: any[] = [
    {
      id: "1",
      start: "2017-06-05T00:00:00",
      end: "2017-06-08T00:00:00",
      text: "Event 1"
    }
  ];

  constructor(private http : Http){
  }

  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()).map((response:Response) => response.json());
  }

}