Tutorial: JavaScript Gantt Chart and Spring Boot Backend

Features

• 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()
    };

    $.ajax({
        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;

// ...

@RestController
@RequestMapping("/api/tasks")
public class TaskController {

    @Autowired
    TaskRepository tr;


    @PostMapping("/move")
    @JsonSerialize(using = LocalDateTimeSerializer.class)
    @Transactional
    Task moveTask(@RequestBody EventMoveParams params) {

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

        e.setStart(params.start);
        e.setEnd(params.end);

        tr.save(e);

        return e;
    }
    
    // ...

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

}