Tutorial: Angular 2 Scheduler with Spring Boot Backend (Java)

Features

Frontend (Angular 2) :

• Angular 2 CLI project (TypeScript)
• UI build using DayPilot Angular 2 Scheduler
• Resources (rows) and events are loaded from the backend using REST HTTP call
• Supports event creating using drag and drop
• Event moving using drag and drop
• Uses DayPilot Pro for JavaScript (trial version)

Backend (Java):

• Uses Spring Boot framework
• Set of simple REST/JSON endpoints
• In-memory H2 database that is initialized (schema) on startup automatically
• Hibernate/JPA is used for ORM

Source code of the tutorial is available for download.

Example: Scheduler Component Class

app.component.ts

import {Component, ViewChild, AfterViewInit} from '@angular/core';
import {DayPilot} from "daypilot-pro-angular";
import {DataService, CreateEventParams} from "./data.service";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {

  // ...

  @ViewChild("scheduler1")
  scheduler: DayPilot.Angular.Scheduler;

  config: any = {
    timeHeaders : [
      {groupBy: "Month", format: "MMMM yyyy"},
      {groupBy: "Day", format: "d"}
    ],
    days: 30,
    startDate: "2016-11-01",
    scale: "Day",
    onTimeRangeSelected: args => {
      let name = prompt("New event name:", "Event");
      this.scheduler.control.clearSelection();
      if (!name) {
        return;
      }
      let params: CreateEventParams = {
        start: args.start.toString(),
        end: args.end.toString(),
        text: name,
        resource: args.resource
      };
      this.ds.createEvent(params).subscribe(result => {
        this.events.push(result);
        this.scheduler.control.message("Event created");
      } );
    }
  };
  
  // ...

}