2. Навигация по календарю

Пользователям необходима возможность переходить к предыдущим и последующим датам или к определенному времени в режимах отображения календаря в виде time-grid. В настоящее время эта функциональность отсутствует.

Навигация по датам

FullCalendar предоставляет методы для навигации вперед и назад. «Шаг» навигации (ежедневно, еженедельно, ежемесячно и т. д.) определяется текущим режимом отображения календаря.

Сначала добавьте кнопки навигации над календарем в экране MyCalendar view:

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

Далее, реализуйте навигацию по календарю, используя следующие шаги:

  • Инжектируйте компонент FullCalendar.

  • Подпишитесь на событие ClickEvent для кнопки previousButton.

  • Подпишитесь на событие ClickEvent для кнопки nextButton.

Мы будем использовать следующие методы компонента FullCalendar:

  • navigateToPrevious().

  • navigateToNext().

В результате пользователи смогут переходить к предыдущим и следующим месяцам.

@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();
}

Прокрутка по времени

По умолчанию компонент FullCalendar отображается в режиме месяца, что может быть избыточным при небольшом количестве событий, к тому же он не показывает сетку времени. Давайте изменим начальный режим отображения календаря и настроим время, до которого компонент должен изначально прокручиваться.

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

Атрибут scrollTime принимает строку в формате продолжительности ISO-8601 (как используется в классе java.time.Duration). Например:

  • "P1d" - 1 день.

  • "PT1h" - 1 час.

  • "PT30m" - 30 минут.

  • "P1dT1h30m" - 1 день, 1 час и 30 минут.

getting started result