Features
Quick-start Angular 6 project with pre-configured Angular Scheduler component
Includes DayPilot Pro for JavaScript package as a dependency (trial version)
Sample data service provides resource and event data from a local source (can be changed to a REST API call)
Drag and drop enabled by default
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.
Angular 6 Project
This project was generated using Scheduler UI Builder - an online configurator application that will let you customize the Scheduler component and generate a ready-to-run project.
The project includes the Angular version of DayPilot Pro, added as a dependency:
npm install https://npm.daypilot.org/daypilot-pro-angular/trial/2018.2.3279.tar.gz --save
Before running the project, it's necessary to load the dependencies (node_modules) using npm:
npm install
To run the application using the built-in web server use the "start" script:
npm run start
The application will be accessible at http://localhost:4200.
The scheduler component and related source code can be found in src/app/scheduler directory:
src/app/scheduler
- data.service.ts
- scheduler.component.ts
- scheduler.module.ts
Angular 6 Scheduler Component
The scheduler.component.ts file contains the Scheduler implementation. It uses DayPilotSchedulerComponent from DayPilot Pro package. The configuration of the Scheduler is defined using config object (you can use it to set custom properties and event handlers).
To demonstrate the use of event handlers to customize the Scheduler behavior, this example uses onBeforeRowHeaderRender and onBeforeCellRender events to make "Resource 3" row unavailable.
The row header background is set to "#ccc" and the additional column displays "Unavailable" text:
onBeforeRowHeaderRender: args => {
if (args.row.data.unavailable) {
args.row.columns[0].html = 'Unavailable';
args.row.backColor = '#ccc';
}
},
All cell in this row are marked as disabled:
onBeforeCellRender: args => {
const row = this.scheduler.control.rows.find(args.cell.resource);
if (row.data.unavailable) {
args.cell.disabled = true;
args.cell.backColor = '#ccc';
}
}
src/app/scheduler/scheduler.component.ts
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'}
],
rowHeaderColumns: [
{ name: 'Name' },
{ name: 'Status' }
],
eventHeight: 40,
scale: 'Day',
days: 31,
startDate: '2018-05-01',
treeEnabled: true,
onBeforeEventRender: args => {
args.data.barColor = args.data.color;
},
onBeforeRowHeaderRender: args => {
if (args.row.data.unavailable) {
args.row.columns[0].html = 'Unavailable';
args.row.backColor = '#ccc';
}
},
onBeforeCellRender: args => {
const row = this.scheduler.control.rows.find(args.cell.resource);
if (row.data.unavailable) {
args.cell.disabled = true;
args.cell.backColor = '#ccc';
}
}
};
constructor(private ds: DataService) {
}
ngAfterViewInit(): void {
this.ds.getResources().subscribe(result => this.config.resources = result);
const from = this.scheduler.control.visibleStart();
const to = this.scheduler.control.visibleEnd();
this.ds.getEvents(from, to).subscribe(result => {
this.events = result;
});
}
}
Angular 6 Scheduler Data Service
The data service uses locally-defined data to fill the Scheduler. In a real-world application, you'll want to replace this logic with a call to a REST API endpoint.
Note that the "Resource 3" uses a custom "unavailable" property that is used in the Scheduler event handlers to disable the row.
src/app/scheduler/data.service.ts
import {Injectable} from '@angular/core';
import {DayPilot} from 'daypilot-pro-angular';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
@Injectable()
export class DataService {
resources: any[] = [
{ name: 'Group A', id: 'GA', expanded: true, children: [
{ name: 'Resource 1', id: 'R1' },
{ name: 'Resource 2', id: 'R2' }
]},
{ name: 'Group B', id: 'GB', expanded: true, children: [
{ name: 'Resource 3', id: 'R3', unavailable: true},
{ name: 'Resource 4', id: 'R4'}
]}
];
events: any[] = [
{
id: '1',
resource: 'R1',
start: '2018-05-03',
end: '2018-05-08',
text: 'Scheduler Event 1',
color: '#e69138'
},
{
id: '2',
resource: 'R2',
start: '2018-05-02',
end: '2018-05-05',
text: 'Scheduler Event 2',
color: '#6aa84f'
},
{
id: '3',
resource: 'R2',
start: '2018-05-06',
end: '2018-05-09',
text: 'Scheduler Event 3',
color: '#3c78d8'
}
];
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());
}
getResources(): Observable<any[]> {
// simulating an HTTP request
return new Observable(observer => {
setTimeout(() => {
observer.next(this.resources);
}, 200);
});
// return this.http.get("/api/resources");
}
}
Angular 6 Scheduler Module
The SchedulerModule wraps all the Scheduler-related classes.
src/app/scheduler/scheduler.module.ts
import {DataService} from './data.service';
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';
import {HttpClientModule} from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
DayPilotModule
],
declarations: [
SchedulerComponent
],
exports: [ SchedulerComponent ],
providers: [ DataService ]
})
export class SchedulerModule { }