I have been using fullCalendar component, the code is shared below if it helps:
private FullCalendar fullCalendar;
private Div monthNameDiv;
private LocalDate currentSelectedDate;
@Autowired
private CurrentAuthentication currentAuthentication;
@Subscribe
public void onBeforeShow(BeforeShowEvent event) {
currentSelectedDate = LocalDate.now();
fullCalendar = generateCalAndLoad();
fullCalendar.setWidth("900px");
fullCalendar.setHeight("700px");
monthNameDiv = new Div();
monthNameDiv.setClassName("calendar-month");
vbox.removeAll();
// Create custom header toolbar
HorizontalLayout headerLayout = new HorizontalLayout();
headerLayout.setClassName("calendar-header");
// Create previous month button
Button prevButton = new Button("<");
prevButton.addThemeVariants(ButtonVariant.LUMO_SMALL);
prevButton.addClickListener(event2 ->{
fullCalendar.previous();
currentSelectedDate = currentSelectedDate.plusMonths(-1);
updateMonthYearName();
}
);
headerLayout.add(prevButton);
headerLayout.add(monthNameDiv);
// Create next month button
Button nextButton = new Button(">");
nextButton.addThemeVariants(ButtonVariant.LUMO_SMALL);
nextButton.addClickListener(event2 -> {
fullCalendar.next();
currentSelectedDate = currentSelectedDate.plusMonths(1);
updateMonthYearName();
});
headerLayout.add(nextButton);
vbox.add(headerLayout);
vbox.add(fullCalendar);
}
private FullCalendar generateCalAndLoad() {
FullCalendar calendar = FullCalendarBuilder.create().build();
calendar.setLocale(Locale.CANADA);
vbox.add(calendar);
User user = (User) currentAuthentication.getUser();
UUID employeeProfileId = user.getEmplProfile().getId();
// Load employee leave days
List<UUID> employeeIdList = inteaccHrServiceBean.getEmployeeListDirectAndIndirect(employeeProfileId);
List<LeaveApplication> leaveApplicationList = dataManager.load(LeaveApplication.class)
.query("select l from hr_LeaveApplication l " +
"where l.employeeProfile.id in :employeeProfileId1")
.parameter("employeeProfileId1", employeeIdList)
.list();
if (leaveApplicationList != null) {
for (LeaveApplication leaveApplication : leaveApplicationList) {
Entry entry = new Entry();
// Convert start and end dates to LocalDateTime
LocalDateTime startDate = leaveApplication.getStartDate().atStartOfDay();
LocalDateTime endDate = leaveApplication.getEndDate().atTime(LocalTime.MAX);
entry.setStart(startDate);
entry.setEnd(endDate);
entry.setTitle(leaveApplication.getEmployeeProfile().getName() + " " + leaveApplication.getLeaveProfileLine().getLeaveType().getName());
entry.setDescription(leaveApplication.getEmployeeProfile().getName());
if(leaveApplication.getEmployeeProfile().getId().equals(employeeProfileId)) {
entry.setColor("#6495ED");
}else{
entry.setColor("#40E0D0");
//entry.setColor("#ff3333");
}
calendar.getEntryProvider().asInMemory().addEntries(entry);
}
}
/*
calendar.addEntryDroppedListener(event -> {
event.applyChangesOnEntry();
Entry entry = event.getEntry();
if (entry instanceof ResourceEntry) {
Set<Resource> resources = ((ResourceEntry) entry).getResources();
if (!resources.isEmpty()) {
// Do something with the resource info
}
}
});
*/
calendar.addDatesRenderedListener( e ->{
String monthName = currentSelectedDate.getMonth().getDisplayName(TextStyle.FULL, Locale.CANADA);
int year = currentSelectedDate.getYear();
monthNameDiv.setText(monthName + " " + year);
});
return calendar;
}
private void updateMonthYearName(){
monthNameDiv.setText(currentSelectedDate.getMonth().name() +" "+ currentSelectedDate.getYear());
}
Here is how it looks like.
