Angular 10 Scheduler Quick Start Project

Overview

• How to create an Angular Scheduler component that will display meetings planned for a set of rooms.

• Includes a trial version of DayPilot Pro for JavaScript (see License below)

New Version

There is a new version of this Angular project available:

• Angular Scheduler Quick Start Project

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 10 Scheduler Component

DayPilot Pro includes an Angular 10 Scheduler component that can be added to your Angular 10 application using <daypilot-scheduler> tag.

First, it’s necessary to install daypilot-pro-angular package:

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

You can find the latest DayPilot Pro NPM package at npm.daypilot.org.

As soon as the DayPilot package is installed, you you can add the Scheduler component to the HTML template of your Angular component:

<daypilot-scheduler [config]="config" [events]="events"></daypilot-scheduler>

Angular 10 Scheduler Configuration

The [config] attribute points to an object with Angular Scheduler configuration. Here is an example of a basic Scheduler config that displays one month (one cell per day) on the horizontal axis and four rooms on the vertical axis:

config: DayPilot.SchedulerConfig = {
  timeHeaders: [{groupBy: 'Month'}, {groupBy: 'Day', format: 'd'}],
  scale: 'Day',
  startDate: '2020-07-01',
  days: 31,
  resources: [
    {name: 'Room A.1', id: 'R1'},
    {name: 'Room A.2', id: 'R2'},
    {name: 'Room A.3', id: 'R3'},
    {name: 'Room A.4', id: 'R4'},
  ]
};

Loading Event/Reservation Data

The [events] attribute points to an array with event data. These events will be displayed at the specified location in the Scheduler grid.

events: any[] = [
  {
    id: '1',
    resource: 'R1',
    start: '2020-07-04',
    end: '2020-07-09',
    text: 'Meeting 1',
  },
  {
    id: '2',
    resource: 'R3',
    start: '2020-07-03',
    end: '2020-07-06',
    text: 'Meeting 2',
  },
  {
    id: '3',
    resource: 'R3',
    start: '2020-07-07',
    end: '2020-07-10',
    text: 'Meeting 3',
  }
];

Scheduler Appearance Customization

To see more customization options, please see the UI Builder - an online application that lets you test the most common configuration option with a live preview and generate an Angular 10 project.

For a full list of options, see the Scheduler feature documentation and API reference.

In this example, we will extend the config to use custom event styling and allow adding new events using drag and drop time range selection.

config: DayPilot.SchedulerConfig = {
  timeHeaders: [{groupBy: 'Month'}, {groupBy: 'Day', format: 'd'}],
  scale: 'Day',
  startDate: '2020-07-01',
  days: 31,
  treeEnabled: true,
  durationBarVisible: false,
  onBeforeEventRender: args => {
    if (args.data.color) {
      args.data.backColor = args.data.color;
    }
    else {
      args.data.backColor = '#93c47d';
    }
    args.data.borderColor = 'darker';
    args.data.fontColor = 'white';
  },
  onTimeRangeSelected: args => {
    const dp = this.scheduler.control;
    DayPilot.Modal.prompt('Create a new event:', 'Event 1').then(modal => {
      dp.clearSelection();
      if (modal.canceled) {
        return;
      }
      dp.events.add({
        start: args.start,
        end: args.end,
        id: DayPilot.guid(),
        resource: args.resource,
        text: modal.result
      });
    });
  },
};

Also, the resources (rooms) and events (reservations) will be loaded using a special service class in ngAfterViewInit. Usually, the row and event data will not be available right away and you’ll need to use a similar mechanism to load them from the server side.

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;
  });
}

Full Source Code

scheduler.component.ts

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot, 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', {static: false})
  scheduler: DayPilotSchedulerComponent;

  events: any[] = [];

  config: DayPilot.SchedulerConfig = {
    timeHeaders: [{groupBy: 'Month'}, {groupBy: 'Day', format: 'd'}],
    scale: 'Day',
    startDate: '2020-07-01',
    days: 31,
    treeEnabled: true,
    durationBarVisible: false,
    onBeforeEventRender: args => {
      if (args.data.color) {
        args.data.backColor = args.data.color;
      }
      else {
        args.data.backColor = '#93c47d';
      }
      args.data.borderColor = 'darker';
      args.data.fontColor = 'white';
    },
    onTimeRangeSelected: args => {
      const dp = this.scheduler.control;
      DayPilot.Modal.prompt('Create a new event:', 'Event 1').then(modal => {
        dp.clearSelection();
        if (modal.canceled) {
          return;
        }
        dp.events.add({
          start: args.start,
          end: args.end,
          id: DayPilot.guid(),
          resource: args.resource,
          text: modal.result
        });
      });
    },
  };

  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;
    });
  }

}