Features
Angular Monthly Event Calendar component wrapped in a standalone module
Angular 4 project built using Angular CLI 1.0
Sample event data loaded using a dummy data service class
Includes a trial version of DayPilot Pro for JavaScript (see License below)
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());
}
}