Tutorial: JavaScript Scheduler and Spring Boot Backend

Features

• Spring Boot application that displays a web page with JavaScript Scheduler component.
• The Scheduler displays events for multiple resources.
• The Scheduler loads event and resource data from a REST/JSON endpoint.
• Basic drag and drop operations supported (creating, moving and resizing events).
• Custom event rendering (event bar color is stored in the database, configurable using a context menu)

Source code of the tutorial is available for download.

Example: Event Context Menu

index.html

<script>
  var dp = new DayPilot.Scheduler("dp");
  // ...  
  dp.contextMenu = new DayPilot.Menu({
      items: [
          {
              text: "Blue",
              icon: "icon icon-blue",
              color: "#1155cc",
              onClick: function(args) { updateColor(args.source, args.item.color); }
          },
          {
              text: "Green",
              icon: "icon icon-green",
              color: "#6aa84f",
              onClick: function(args) { updateColor(args.source, args.item.color); }
          },
          {
              text: "Yellow",
              icon: "icon icon-yellow",
              color: "#f1c232",
              onClick: function(args) { updateColor(args.source, args.item.color); }
          },
          {
              text: "Red",
              icon: "icon icon-red",
              color: "#cc0000",
              onClick: function(args) { updateColor(args.source, args.item.color); }
          },

      ]
  });
  dp.onBeforeEventRender = function(args) {
      args.data.barColor = args.data.color;
      args.data.areas = [
          { top: 6, right: 2, icon: "icon-triangle-down", visibility: "Hover", action: "ContextMenu", style: "font-size: 12px; background-color: #f9f9f9; border: 1px solid #ccc; padding: 2px 2px 0px 2px; cursor:pointer;"}
      ];
  };
  dp.init();
  
  function updateColor(e, color) {
      var params = {
          id: e.id(),
          color: color
      };
      $.ajax({
          type: 'POST',
          url: '/api/events/setColor',
          data: JSON.stringify(params),
          success: function (data) {
              e.data.color = color;
              dp.events.update(e);
              dp.message("Color updated");
          },
          contentType: "application/json",
          dataType: 'json'
      });
  }
</script>