2. Calendar Navigation

Users require the ability to navigate to previous and subsequent dates or to a specific time within time-grid calendar display modes. This functionality is currently missing.

Date Navigation

FullCalendar provides methods for navigating forward and backward. The navigation "step" (daily, weekly, monthly, etc.) is determined by the current calendar display mode.

First, add navigation buttons above the calendar in the MyCalendar view:

<hbox>
    <button id="previousButton" icon="ANGLE_LEFT"/>
    <button id="nextButton" icon="ANGLE_RIGHT"/>
</hbox>

Next, implement calendar navigation using these steps:

  • Inject the FullCalendar component.

  • Subscribe to the ClickEvent for the previousButton

  • Subscribe to the ClickEvent for the nextButton

We will use the following methods of the FullCalendar component:

  • navigateToPrevious().

  • navigateToNext().

As a result, users will be able to navigate to the next and previous months.

@ViewComponent
private FullCalendar calendar;

@Subscribe(id = "previousButton", subject = "clickListener")
public void onPreviousButtonClick(final ClickEvent<JmixButton> event) {
    calendar.navigateToPrevious();
}

@Subscribe(id = "nextButton", subject = "clickListener")
public void onNextButtonClick(final ClickEvent<JmixButton> event) {
    calendar.navigateToNext();
}

Time Scrolling

By default, the FullCalendar component displays the month display mode, which may be redundant due to the small number of events, plus it does not show the time grid. Let’s change the initial calendar display mode and set up the time to which the component should scroll initially.

<calendar:calendar id="calendar"
                   initialDisplayMode="TIME_GRID_WEEK"
                   scrollTime="PT9h"
                   height="100%"
                   width="100%">

The scrollTime attribute accepts a string in ISO-8601 duration format (as used by the java.time.Duration class). For instance:

  • "P1d" - 1 day.

  • "PT1h" - 1 hour.

  • "PT30m" - 30 minutes.

  • "P1dT1h30m" - 1 day plus 1 hour and 30 minutes.

getting started result