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

angular 6 scheduler configurator

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 { }