Features
Spring Boot application with JavaScript/HTML5 frontend
Built using Spring Boot 2.5.0
Simple Spring view with Event Calendar UI
Lightweight REST API backend for accessing the database storage (implemented as a RESTful Spring web service)
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.
HTML5 Event Calendar Initialization
In order to display the JavaScript event calendar it's necessary to include the following code in the HTML page (src/resources/static/index.html):
<!-- 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>
const 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>
const 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 the startDate property:
<script>
const dp = new DayPilot.Calendar("dp");
dp.viewType = "Week";
dp.startDate = "2021-06-21";
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>
const dp = new DayPilot.Calendar("dp");
dp.viewType = "Week";
dp.startDate = "2021-06-21";
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>
const dp = new DayPilot.Calendar("dp");
dp.viewType = "Week";
dp.startDate = "2021-06-21";
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 component (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>
const 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 event calendar component accordingly:
<script>
const nav = new DayPilot.Navigator("nav");
nav.showMonths = 3;
nav.skipMonths = 3;
nav.selectMode = "week";
nav.onTimeRangeSelected = (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 call events.load() method:
dp.events.load("/api/events");The event calendar component automatically adds the visible range to this URL (using start and end query string parameters) and makes an HTTP request to get the event data. The sample JSON response looks like this:
[
{"id":3,"text":"Meeting","start":"2021-06-14T10:00:00","end":"2021-06-14T13:00:00","color":null},
{"id":4,"text":"Errands","start":"2021-06-16T10:00:00","end":"2021-06-16T13:00:00","color":"#f1c232"}
]The server-side implementation of the JSON endpoint can be found in MainController.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.
