The DayPilot Scheduler UI Builder lets you configure the Angular Scheduler component using an editor with a live preview. You can adjust the behavior and appearance of the Scheduler and generate a config object (for copy and paste into your application) or a full Angular application with all the boilerplate code.

The configurator lets you customize the following Scheduler properties:

• locale

• date range

• business hours

• cell duration and width

• autoscroll

• event height

• event labels

• event overlaps

• drag and drop (event moving, resizing, creating)

• event deleting

• event click action

• event hover action

• event context menu

• resource hierarchy

The configurator covers the most common scenarios. For a full list of available features, please see the scheduler documentation.

The Angular Scheduler component is included in DayPilot Pro for JavaScript package. 

License

The generated project includes a trial version of DayPilot Pro for JavaScript which can be used for testing and evaluation purposes.

Generate and Download Angular Project with Customized Scheduler Component

When the configuration is complete you can generate an Angular project by clicking the "Generate Project" button.

Choose a project name (daypilot-project by default) and project type. The current version supports the following project types:

• Angular 12

• Angular 11

• Angular 10

• HTML5 + JavaScript

• React

The Angular download include a complete project with all dependencies (including DayPilot Pro) specified in package.json. You can download the project as a zip file.

Requirements

The generated Angular application requires the following infrastructure:

• Node.js

• npm

• Angular CLI package (installed globally)

Running the Angular Application

Before running the Angular application it's necessary to load the dependencies:

npm install

This will download the dependencies to node_modules directory. It may take a while.

Now the project is ready to run:

npm run start

The Angular application will be available at http://localhost:4200.

Angular Project Structure

The project is based on a new Angular application generated using Angular CLI. There are only a few changes:

• package.json: daypilot-pro-angular module is added as a dependency

Scheduler Code

The Scheduler component can be found in src/app/scheduler directory in a special Angular module.

• data.service.ts (data backend, provides event and resource data)

• scheduler.component.ts (the main Scheduler component class, includes the configuration)

• schedule.module.ts (the Scheduler module)

The source code of the default Angular app is modified to display the scheduler component:

1. The SchedulerModule (see below) is imported in app.module.ts: 

app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {SchedulerModule} from "./scheduler/scheduler.module";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SchedulerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. The HTML template displays the scheduler using <scheduler-component> (this element is declared in scheduler.component.ts, see below):

app.component.html

<scheduler-component></scheduler-component>

Scheduler Component

The scheduler component class configures and displays the Angular Scheduler component from DayPilot Pro package.

It uses the customized configuration object created by the Scheduler configurator app. The configurator always displays the updated configuration object - you can copy and paste the source code to scheduler.component.ts in order to update an existing project (instead of generating a new one).

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")
  scheduler!: DayPilotSchedulerComponent;

  events: DayPilot.EventData[] = [];

  config: DayPilot.SchedulerConfig = {
    locale: "en-us",
    cellWidthSpec: "Fixed",
    cellWidth: 40,
    crosshairType: "Header",
    timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
    scale: "Day",
    days: DayPilot.Date.today().daysInMonth(),
    startDate: DayPilot.Date.today().firstDayOfMonth(),
    showNonBusiness: true,
    businessWeekends: false,
    floatingEvents: true,
    eventHeight: 30,
    eventMovingStartEndEnabled: false,
    eventResizingStartEndEnabled: false,
    timeRangeSelectingStartEndEnabled: false,
    groupConcurrentEvents: false,
    eventStackingLineHeight: 100,
    allowEventOverlap: true,
    timeRangeSelectedHandling: "Enabled",
    onTimeRangeSelected: async (args) => {
      const dp = args.control;
      const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
      dp.clearSelection();
      if (modal.canceled) { return; }
      dp.events.add({
        start: args.start,
        end: args.end,
        id: DayPilot.guid(),
        resource: args.resource,
        text: modal.result
      });
    },
    eventMoveHandling: "Update",
    onEventMoved: (args) => {
      args.control.message("Event moved: " + args.e.text());
    },
    eventResizeHandling: "Update",
    onEventResized: (args) => {
      args.control.message("Event resized: " + args.e.text());
    },
    eventDeleteHandling: "Update",
    onEventDeleted: (args) => {
      args.control.message("Event deleted: " + args.e.text());
    },
    eventClickHandling: "Disabled",
    eventHoverHandling: "Disabled",
  };

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

}

Scheduler Data Service

The data service implement simple data loading methods - getEvents() and getResources(). For the sake of simplicity, the methods return locally-declared data object. In your application, you will want to replace this logic with an HTTP call to a REST API.

data.service.ts

import {Injectable} from "@angular/core";
import {Observable} from "rxjs";
import {DayPilot} from "daypilot-pro-angular";
import {HttpClient} from "@angular/common/http";

@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"},
      { name: "Resource 4", id: "R4"}
    ]}
  ];

  events: any[] = [
    {
      id: "1",
      resource: "R1",
      start: "2021-11-03",
      end: "2021-11-08",
      text: "Scheduler Event 1",
      color: "#e69138"
    },
    {
      id: "2",
      resource: "R2",
      start: "2021-11-02",
      end: "2021-11-05",
      text: "Scheduler Event 2",
      color: "#6aa84f"
    },
    {
      id: "3",
      resource: "R2",
      start: "2021-11-06",
      end: "2021-11-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");
  }

}

Scheduler Module

The Scheduler component and the data service are a part of a special scheduler module.

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