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

This tutorial shows how to use DayPilot Scheduler with Angular 2 and Spring Boot (Java) backend.
Nov 21, 2016


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



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

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

  // ...

  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");
      if (!name) {
      let params: CreateEventParams = {
        start: args.start.toString(),
        end: args.end.toString(),
        text: name,
        resource: args.resource
      this.ds.createEvent(params).subscribe(result => {
        this.scheduler.control.message("Event created");
      } );
  // ...