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

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

angular2-scheduler-typescript-spring-boot-java.png

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");
      } );
    }
  };
  
  // ...

}

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java