Angular Scheduler: Online Configurator

Use the online configurator application to generate a new Angular project with a customized Scheduler component.

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

angular scheduler ui configurator generate project

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

angular scheduler ui configurator project type

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

Angular 18
Angular 17
Angular 16
HTML5 + JavaScript
NPM Project (JavaScript)
NPM Project (TypeScript)
React 18 (Hooks API)
React 17
Vue 3 (Composition API)
Vue 2

The Angular download includes 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

angular scheduler ui configurator component

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: "2024-11-03",
      end: "2024-11-08",
      text: "Scheduler Event 1",
      color: "#e69138"
    },
    {
      id: "2",
      resource: "R2",
      start: "2024-11-02",
      end: "2024-11-05",
      text: "Scheduler Event 2",
      color: "#6aa84f"
    },
    {
      id: "3",
      resource: "R2",
      start: "2024-11-06",
      end: "2024-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 { }

Ask a Question