Features
Angular Scheduler component wrapped in a standalone module
Uses Angular 4
Built using Angular CLI 1.0
Angular AOT compilation supported
Includes a trial version of DayPilot Pro for JavaScript (see License below)
New Version
There is a new version of this Angular project available:
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.
Scheduler UI Builder
This project was generated using Scheduler UI Builder. You can use this visual tool to configure the Scheduler appearance and properties and generate a downloadable project
Dependencies
After creating a new Angular project using Angular CLI it is necessary to add daypilot-pro-angular package from npm.daypilot.org:
npm install https://npm.daypilot.org/daypilot-pro-angular/trial/8.4.2911.tar.gz --save
Scheduler Component
The scheduler component is implemented using DayPilot Angular Scheduler component (DayPilotSchedulerComponent class, available as <daypilot-scheduler> in templates).
The component displays the scheduler by including <daypilot-scheduler> in a template:
@Component({
// ...
template: `<daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>`,
// ...
})
The configuration object (config attribute) is used to set the scheduler properties:
config: any = {
timeHeaders : [
{groupBy: "Month", format: "MMMM yyyy"},
{groupBy: "Day", format: "d"}
],
eventHeight: 40,
scale: "Day",
days: 31,
startDate: "2017-05-01",
};
During initialization, it loads scheduler resources and events:
ngAfterViewInit(): void {
this.ds.getResources().subscribe(result => this.config.resources = result);
var from = this.scheduler.control.visibleStart();
var to = this.scheduler.control.visibleEnd();
this.ds.getEvents(from, to).subscribe(result => {
this.events = result;
});
}
Complete component source code:
import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilotSchedulerComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";{}
@Component({
selector: 'scheduler-component',
template: `<daypilot-scheduler [config]="config" [events]="events" #scheduler></daypilot-scheduler>`,
styles: [``]
})
export class SchedulerComponent implements AfterViewInit {
@ViewChild("scheduler")
scheduler: DayPilotSchedulerComponent;
events: any[] = [];
config: any = {
timeHeaders : [
{groupBy: "Month", format: "MMMM yyyy"},
{groupBy: "Day", format: "d"}
],
eventHeight: 40,
scale: "Day",
days: 31,
startDate: "2017-05-01",
};
constructor(private ds: DataService) {
}
ngAfterViewInit(): void {
this.ds.getResources().subscribe(result => this.config.resources = result);
var from = this.scheduler.control.visibleStart();
var to = this.scheduler.control.visibleEnd();
this.ds.getEvents(from, to).subscribe(result => {
this.events = result;
});
}
}
Data Service
The DataService class is very simple - it simulates a remote backend using local fields.
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 {
resources: any[] = [
{ name: "Resource 1", id: "R1"},
{ name: "Resource 2", id: "R2"}
];
events: any[] = [
{
id: "1",
resource: "R1",
start: "2017-05-03",
end: "2017-05-15",
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());
}
getResources(): Observable<any[]> {
// simulating an HTTP request
return new Observable(observer => {
setTimeout(() => {
observer.next(this.resources);
}, 200);
});
// return this.http.get("/api/resources").map((response:Response) => response.json());
}
}
Scheduler Module
The scheduler view (SchedulerComponent) and backend (DataService) is wrapped in a standalone module (SchedulerModule). Note that DayPilotModule from "daypilot-pro-angular" package is added to the "imports" section.
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 {SchedulerComponent} from "./scheduler.component";
import {DayPilotModule} from "daypilot-pro-angular";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
DayPilotModule
],
declarations: [
SchedulerComponent
],
exports: [ SchedulerComponent ],
providers: [ DataService ]
})
export class SchedulerModule { }