Tutorial: JavaScript Gantt Chart and Spring Boot Backend

This tutorial shows how to create a Gantt Chart scheduling application in Spring Boot.
Oct 2, 2017
html5 javascript gantt chart spring boot java


  • Gantt Chart project management application with support for task dependencies (links), task groups, drag and drop, inline task creating
  • Data persistence using Spring Data/JPA (the demo uses in-memory H2 database, can be switched to MySQL database)
  • HTML5 frontend
  • Lightweight REST/JSON backend implemented as Spring RESTful web service
  • Uses HTML5/JavaScript event calendar component from DayPilot Pro for JavaScript (trial version)

Source code of the tutorial is available for download.

Example: Moving a Task in Time using Drag and Drop


Client side (JavaScript)

dp.onTaskMove = function(args) {
    var params = {
        id: args.task.id(),
        start: args.newStart.toString(),
        end: args.newEnd.toString()

        type: 'POST',
        url: '/api/tasks/move',
        data: JSON.stringify(params),
        success: function (data) {
            dp.message("Task moved");
        contentType: "application/json",
        dataType: 'json'


Server side (Spring)

package org.daypilot.demo.html5ganttchartspring.controller;

// ...

public class TaskController {

    TaskRepository tr;

    @JsonSerialize(using = LocalDateTimeSerializer.class)
    Task moveTask(@RequestBody EventMoveParams params) {

        Task e = tr.findOne(params.id);



        return e;
    // ...

    public static class EventMoveParams {
        public Long id;
        public LocalDateTime start;
        public LocalDateTime end;