Using JavaScript/HTML5 Event Calendar in Spring Boot (Java)

Features

• Spring Boot application with HTML5 frontend
• Simple Spring view with Event Calendar UI
• Lightweight REST API backend for accessing the database storage (implemented as a RESTful Spring web service)
• Includes a trial version of DayPilot Pro for JavaScript (see License below)

License

Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript. Buy a license.

HTML5 Event Calendar Initialization

In order to display the JavaScript event calendar it's necessary to include the following minimum code in the HTML page:

<!-- placeholder, this is where the calendar appears -->
<div id="dp"></div>

<!-- DayPilot Pro library-->
<script src="daypilot-all.min.js"></script>

<!-- basic calendar config -->
<script>
  var dp = new DayPilot.Calendar("dp");
  dp.init();
</script>

This code will display the event calendar using the default config (day view, the default CSS theme).

The default CSS classes are embedded and there is no need to include additional CSS style files.

You can create a custom CSS theme using the online CSS theme designer and apply it using theme property.

Switching the Event Calendar to Week View

In order to switch the event calendar to a week view we simply use the viewType property:

<script>
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Week";
  dp.init();
</script>

Changing the Visible Date

By default, the event calendar displays the current week. We can change the visible week using startDate property:

<script>
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Week";
  dp.startDate = "2017-10-02";
  dp.init();
</script>

Changing the Calendar Locale

 The week start is calculated using the current locale. By default, the locale is set to "en-us" but you can change it as needed:

<script>
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Week";
  dp.startDate = "2017-10-02";
  dp.locale = "de-de";
  dp.init();
</script>

You can see that the locale affects the date format in the header (d.M.yyyy vs M/d/yyyy) and also the first day of week (Monday vs Sunday).

Changing the Date Format

Every locale includes a default date format string which is used for the column headers. For the German locale it is "d.M.yyyy". You can also use a custom date format (headerDateFormat property) to customize the header date format:

<script>
  var dp = new DayPilot.Calendar("dp");
  dp.viewType = "Week";
  dp.startDate = "2017-10-02";
  dp.locale = "de-de";
  dp.headerDateFormat = "d MMMM yyyy";
  dp.init();
</script>

Switching a Date using a Date Picker

DayPilot Pro includes a date picker control (called DayPilot.Navigator) that lets users choose a date using a mini calendar.

We add a Navigator placeholder to the HTML:

<div id="nav"></div>

And initialize it:

<script>
    var nav = new DayPilot.Navigator("nav");
    nav.showMonths = 3;
    nav.skipMonths = 3;
    nav.selectMode = "week";
    nav.init();
</script>

Now we need to detect changes of the selected week and update the main calendar control accordingly:

<script>
    var nav = new DayPilot.Navigator("nav");
    nav.showMonths = 3;
    nav.skipMonths = 3;
    nav.selectMode = "week";
    nav.onTimeRangeSelected = function(args) {
        dp.startDate = args.day;
        dp.update();
    };
    nav.init();
</script>

Loading Calendar Data

In order to load the event data from a database, we will can events.load() method:

dp.rows.load("/api/events");

The event calendar component automatically adds the visible range to this URL (using "start" and "end" query string parameters) and invokes an AJAX request to get the event data. The sample JSON response looks like this:

[
  {"id":1,"text":"Meeting","start":"2017-09-18T10:00:00","end":"2017-09-18T13:30:00","color":null},
  {"id":2,"text":"Errands","start":"2017-09-19T10:00:00","end":"2017-09-19T13:30:00","color":"#6aa84f"}
]

The server-side implementation of the JSON endpoint can be found in MainControlle.java file:

package org.daypilot.demo.html5eventcalendarspring.controller;

//...

@RestController
public class MainController {

    @Autowired
    EventRepository er;

    @GetMapping("/api/events")
    @JsonSerialize(using = LocalDateTimeSerializer.class)
    Iterable<Event> events(@RequestParam("start") @DateTimeFormat(iso = ISO.DATE_TIME) LocalDateTime start, @RequestParam("end") @DateTimeFormat(iso = ISO.DATE_TIME) LocalDateTime end) {
        return er.findBetween(start, end);
    }

    // ...

}

The Spring controller is very simple and uses an EventRepository interface (that inherits from CrudRepository<Event, Long>) to load the event data.