Компонент FullCalendar

ДЕМОНСТРАЦИЯ

FullCalendar - это компонент пользовательского интерфейса, предназначенный для отображения диапазонов дат и событий календаря. Он предлагает широкий спектр функций для управления событиями календаря и предоставляет различные режимы отображения (день, неделя, месяц и т.д.).

XML-элемент

calendar

Java-класс

FullCalendar

Атрибуты

id - allDayMaintainDurationEnabled - allDayText - closeHint - alignSelf - classNames - colspan - css - dateAlignment - dayHeadersVisible - dayMaxEventRows - dayMaxEvents - dayOfYear - defaultAllDay - defaultAllDayEventDuration - defaultBusinessHoursEnabled - defaultDayHeaderFormat - defaultDayMaxEventRowsEnabled - defaultDayMaxEventsEnabled - defaultDayPopoverFormat - defaultEventTimeFormat - defaultSlotLabelFormat - defaultTimedEventDuration - defaultWeekNumberFormat - direction - displayEventTime - dragRevertDuration - dragScroll - eventBackgroundColor - eventBorderColor - eventConstraintBusinessHoursEnabled - eventConstraintGroupId - eventDisplay - eventDragMinDistance - eventDurationEditable - eventHint - eventInteractive - eventLongPressDelay - eventMaxStack - eventOrder - eventOrderStrict - eventOverlap - eventResizableFromStart - eventStartEditable - eventTextColor - expandRows - firstDayOfWeek - forceEventDuration - height - initialDate - initialDisplayMode - maxHeight - maxWidth - minHeight - minWidth - moreLinkClassNames - moreLinkDisplayMode - moreLinkHint - moreLinkText - navLinkHint - navigationLinksEnabled - nextDayThreshold - noEventsText - nowIndicatorVisible - progressiveEventRendering - scrollTime - scrollTimeReset - selectConstraintBusinessHoursEnabled - selectConstraintGroupId - selectLongPressDelay - selectMinDistance - selectMirror - selectOverlap - selectionEnabled - slotDuration - slotLabelInterval - slotMaxTime - slotMinTime - snapDuration - timeHint - unselectAuto - unselectCancelSelector - visible - weekNumbersVisible - weekTextLong - weekendsVisible - width - windowResizeDelay

Элементы

businessHours - customDisplayModes - dataProviders - displayModeProperties - hiddenDays

Основы

Компонент FullCalendar становится доступен в палитре Add Component дизайнера экранов Студии, как только вы установите дополнение в свой проект.

add calendar via studio

Новый элемент calendar:calendar будет добавлен как в панель структуры Jmix UI, так и в XML. Вы можете настроить атрибуты, такие как id, height, width и т.д., аналогично тому, как это делается для других компонентов пользовательского интерфейса.

<calendar:calendar id="calendar"
                   height="100%"
                   width="100%"/>

Если вы не используете дизайнер экранов, объявите пространство имен calendar в XML-дескрипторе вашего экрана вручную:

<view xmlns="http://jmix.io/schema/flowui/view"
      xmlns:calendar="http://jmix.io/schema/fullcalendar/ui"
      title="Calendar view">

Если вам нужно отображать события, свяжите containerEventProvider с контейнером данных.

В следующем примере показано, как создать базовый календарь:

<data>
    <collection id="eventsDc" class="com.company.fullcalendarsample.entity.Event">
        <loader id="eventsDl" readOnly="true">
            <query>
                <![CDATA[select e from Event e]]>
            </query>
        </loader>
        <fetchPlan extends="_base"/>
    </collection>
</data>
<facets>
    <dataLoadCoordinator auto="true"/>
</facets>
<layout>
    <calendar:calendar id="calendar"
                       height="100%"
                       width="100%">
        <calendar:dataProviders>
            <calendar:containerDataProvider dataContainer="eventsDc"
                                            title="title"
                                            startDateTime="startDate"
                                            endDateTime="endDate"/>
        </calendar:dataProviders>
    </calendar:calendar>
</layout>

Модель данных

CalendarEvent

Базовый интерфейс для событий в компоненте FullCalendar - это CalendarEvent. Он предоставляет общий набор свойств для представления событий. Эти свойства используются для отображения и управления событиями в календаре.

id

Уникальный идентификатор события календаря. Используется для идентификации на стороне клиента.

groupId

Объект группы, общий для других событий. События с одинаковым идентификатором группы будут автоматически перетаскиваться и изменять размер вместе.

allDay

Определяет, отображается ли событие в разделе "весь день" соответствующего режима отображения. По умолчанию компонент считает все события не "весь день".

Значение null означает, что событие не является событием "весь день".

startDateTime

Определяет начальное время события. Имеет тип LocalDateTime и должно соответствовать стандартному часовому поясу системы. Для EntityCalendarEvent значение будет автоматически преобразовано из поддерживаемого типа данных даты и времени.

endDateTime

Определяет конечное время события. Имеет тип LocalDateTime и должно соответствовать стандартному часовому поясу системы. Для EntityCalendarEvent значение будет автоматически преобразовано из поддерживаемого типа данных даты и времени.

Это значение исключающее. Например, событие с конечным временем 2024-09-03 будет отображаться как захватывающее 2024-09-02, но не будет распространяться на начало 2024-09-03.

title

Текст, который будет отображаться на событии.

description

Текст описания события.

interactive

Указывает, можно ли переходить к событиям с помощью клавиши TAB.

Если значение null, календарь будет управлять интерактивностью событий на основе свойства eventInteractive.

classNames

Указывает имена классов, разделенные пробелами, которые должны быть прикреплены к визуализированному событию.

startEditable

Определяет, можно ли перетаскивать событие в компоненте календаря.

Если значение null, календарь будет управлять возможностью перетаскивания события на основе свойства eventStartEditable.

durationEditable

Определяет, можно ли изменять размер события в компоненте календаря.

Если значение null, календарь будет управлять возможностью изменения размера события на основе свойства eventDurationEditable.

display

Определяет тип рендеринга события. Если не указано, будет использоваться значение AUTO.

overlap

Определяет, можно ли перетаскивать или изменять размер события поверх других событий. Также предотвращает перетаскивание или изменение размера других событий поверх этого события.

Если значение null, календарь будет управлять этой функцией на основе свойства eventOverlap или специальной JavaScript-функции.

constraint

Определяет общий идентификатор группы. Это свойство ограничивает перетаскивание и изменение размера определенных ячеек в компоненте.

Если значение null, календарь будет управлять ограничением события на основе свойств eventConstraintGroupId или eventConstraintBusinessHoursEnabled.

backgroundColor

Указывает цвет фона для события. Поддерживаемые значения включают:

  • Шестнадцатеричные коды цветов (например, #f00, #ff0000)

  • RGB-значения цветов (например, rgb(255,0,0))

  • Названия цветов (например, red)

Если значение null, календарь будет управлять фоновым цветом события на основе свойства eventBackgroundColor.

borderColor

Указывает цвет границы для события. Поддерживаемые значения включают:

  • Шестнадцатеричные коды цветов (например, #f00, #ff0000)

  • RGB-значения цветов (например, rgb(255,0,0))

  • Названия цветов (например, red)

Если значение null, календарь будет управлять цветом границы события на основе свойства eventBorderColor.

textColor

Указывает цвет текста для события. Поддерживаемые значения включают:

  • Шестнадцатеричные коды цветов (например, #f00, #ff0000)

  • RGB-значения цветов (например, rgb(255,0,0))

  • Названия цветов (например, red)

Если значение null, календарь будет управлять цветом текста события на основе свойства eventTextColor.

additionalProperties

Определяет дополнительные свойства и их значения, которые будут доступны в различных JavaScript-функциях, которые принимают событие в качестве параметра.

recurringDaysOfWeek

Указывает дни недели, в которые это событие повторяется. Если этот атрибут не указан, предполагается, что событие повторяется каждый день.

recurringStartDate

Указывает дату, когда начинаются повторения этого события. Если эта дата не указана, повторения будут простираться бесконечно в прошлое.

recurringEndDate

Указывает дату, когда заканчиваются повторения этого события. Если эта дата не указана, повторения будут простираться бесконечно в будущее.

Имейте ввиду, это значение исключающее. Для событий, повторяющихся в течение всего дня, установите конечную дату на день после желаемого последнего повторения.

recurringStartTime

Указывает время начала повторяющегося события. Если оно не определено, событие считается событием "весь день".

Имейте ввиду, календарь не применяет преобразование часового пояса для этого свойства. Если в сущности используется тип данных OffsetTime, он будет преобразован в стандартный часовой пояс системы.

recurringEndTime

Указывает время окончания повторяющегося события. Если оно не определено, событие будет иметь продолжительность по умолчанию, как настроено свойством defaultTimedEventDuration.

EntityCalendarEvent

Реализация CalendarEvent, которая работает с JPA-сущностями или DTO. Когда ContainerDataProvider связан с контейнером коллекции, он автоматически оборачивает загруженные сущности в объекты EntityCalendarEvent и передает их в компонент. Например, все события календаря в этом сценарии будут экземплярами EntityCalendarEvent:

<data>
    <collection id="eventsDc" class="com.company.fullcalendarsample.entity.Event">
        <loader id="eventsDl" readOnly="true">
            <query>
                <![CDATA[select e from Event e]]>
            </query>
        </loader>
        <fetchPlan extends="_base"/>
    </collection>
</data>
<facets>
    <dataLoadCoordinator auto="true"/>
</facets>
<layout>
    <calendar:calendar id="calendar"
                       height="100%"
                       width="100%">
        <calendar:dataProviders>
            <calendar:containerDataProvider dataContainer="eventsDc"
                                            title="title"
                                            startDateTime="startDate"
                                            endDateTime="endDate"/>
        </calendar:dataProviders>
    </calendar:calendar>
</layout>

И вы можете безопасно привести к типу EntityCalendarEvent:

@Autowired
private Notifications notifications;

@Subscribe("calendar")
public void onCalendarEventClick(final EventClickEvent event) {
    EntityCalendarEvent<Event> entityEvent = event.getCalendarEvent();
    Event entity = entityEvent.getEntity();

    notifications.show(entity.getTitle() + " event is clicked");
}

SimpleCalendarEvent

ДЕМОНСТРАЦИЯ

Это простой класс POJO, который реализует интерфейс CalendarEvent. Вы можете использовать этот класс событий как альтернативу созданию DTO или для целей прототипирования. Он также включает класс-строитель для упрощения создания экземпляров событий.

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    SimpleCalendarEvent calendarEvent = SimpleCalendarEvent.create()
            .withTitle("Car service")
            .withStartDateTime(LocalDateTime.now())
            .build();

    calendar.addDataProvider(new ListCalendarDataProvider(List.of(calendarEvent)));
}

Повторяющиеся события

ДЕМОНСТРАЦИЯ

Повторяющиеся события - это события, которые происходят несколько раз с регулярными интервалами, следуя заранее определенному расписанию.

Recurring events are events that occur multiple times at regular intervals, following a predefined schedule.

В FullCalendar вы можете настроить это расписание, используя следующие свойства в CalendarEvent:

Если указано любое из этих свойств повторения, FullCalendar предполагает, что событие является повторяющимся, и игнорирует свойства startDateTime и endDateTime.

Когда поставщик данных указывает свойства повторения, единственное повторяющееся событие в контейнере будет развернуто в отдельные экземпляры событий с их собственными датами в FullCalendar. Однако контейнер по-прежнему будет содержать единственное повторяющееся событие.

Вы можете указать свойства повторения в поставщике данных, как показано ниже:

<calendar:calendar id="calendar"
                   height="100%"
                   width="100%">
    <calendar:dataProviders>
        <calendar:containerDataProvider dataContainer="eventsDc"
                                        title="title"
                                        recurringStartDate="recurringStartDate"
                                        recurringEndDate="recurringEndDate"
                                        recurringStartTime="recurringStartTime"
                                        recurringEndTime="recurringEndTime"
                                        recurringDaysOfWeek="recurringDaysOfWeek"/>
    </calendar:dataProviders>
</calendar:calendar>

Управление повторяющимися событиями в FullCalendar

FullCalendar разворачивает отдельные повторяющиеся события в отдельные экземпляры событий. Эти экземпляры рассматриваются как независимые события, то есть изменения одного экземпляра по умолчанию не влияют на другие.

Пример: Перемещение повторяющихся событий

Предположим, у вас есть повторяющаяся встреча, которая происходит каждую среду. Если вы включите свойство eventStartEditable, пользователь может перетащить и переместить конкретный экземпляр этой встречи (например, встречу 7 ноября) в другое временное окно. Однако это изменение затронет только экземпляр 7 ноября. Встречи в другие среды останутся в своем первоначальном времени.

Группировка повторяющихся событий

Чтобы перемещать все экземпляры повторяющегося события вместе, вам нужно сгруппировать их, используя свойство groupId в CalendarEvent.

Как это работает:

  1. Назначение идентификатора группы: Установите одно и то же значение groupId для всех экземпляров повторяющегося события, которые вы хотите перемещать вместе.

  2. Включение перетаскивания: Убедитесь, что свойство eventStartEditable установлено в true, чтобы разрешить перетаскивание.

Теперь, когда пользователь перетаскивает экземпляр повторяющегося события, все экземпляры в этой группе будут перемещаться одновременно, сохраняя определенный шаблон повторения.

Тип данных DaysOfWeek

Свойство recurringDaysOfWeek определяет список дней недели. Чтобы хранить эти данные в JPA-сущностях или DTO, Jmix предоставляет специальный тип данных, называемый DaysOfWeek.

Studio автоматически предоставляет этот тип данных, когда вы добавляете атрибут к JPA-сущности или DTO. Затем вы можете выбрать нужные дни недели для вашего повторяющегося события.

add recurring days of week attribute

Тип данных DaysOfWeek поддерживается как компонентом valuePicker, так и действием DaysOfWeekEditAction. Это позволяет легко редактировать список дней недели в вашем пользовательском интерфейсе.

<valuePicker id="recurringDaysOfWeekField" property="recurringDaysOfWeek">
    <actions>
        <action id="select" type="fcalen_daysOfWeekEdit"/>
        <action id="clear" type="value_clear"/>
    </actions>
</valuePicker>

Привязка данных

Компонент календаря использует поставщики данных для подключения загруженных данных и их визуального отображения. Чтобы элемент данных был виден в компоненте, он должен реализовывать интерфейс CalendarEvent. Для JPA-сущностей или DTO ContainerDataProvider оборачивает сущность, чтобы создать EntityCalendarEvent.

Компонент FullCalendar позволяет добавлять несколько поставщиков данных. Это позволяет вам отображать данные из разных источников данных и сервисов в одном календаре.

CalendarDataProvider

CalendarDataProvider - это базовый интерфейс для всех поставщиков данных, используемых календарем. Существует два основных типа поставщиков данных календаря:

  • Поставщики данных, которые загружают все данные сразу. Эти поставщики получают все соответствующие данные за одну операцию.

  • CallbackCalendarDataProvider. Эти поставщики загружают данные по требованию, используя механизм обратного вызова для получения частичных данных по мере необходимости.

ContainerDataProvider

ДЕМОНСТРАЦИЯ

ContainerDataProvider работает с контейнерами данных. Он отражает любые изменения, внесенные в контейнер (добавление, удаление или изменение сущностей), и обновляет пользовательский интерфейс FullCalendar соответствующим образом.

Чтобы использовать поставщик данных контейнера в FullCalendar, необходимо указать:

  • Свойство dataContainer: ссылка на идентификатор существующего контейнера в вашем экране.

  • Сопоставление свойств сущности. Поставщик данных контейнера оборачивает JPA-сущности или DTO в EntityCalendarEvent, чтобы сделать их совместимыми с компонентом FullCalendar. Однако он не знает автоматически, какие свойства из JPA-сущности или DTO должны использоваться для CalendarEvent. Поэтому необходимо определить сопоставление свойств, чтобы указать, какие свойства сущности соответствуют определенным свойствам CalendarEvent.

Вот пример использования ContainerDataProvider:

<calendar:dataProviders>
    <calendar:containerDataProvider dataContainer="eventsDc"
                                    title="title"
                                    startDateTime="startDate"
                                    endDateTime="endDate"/>
</calendar:dataProviders>

Чтобы работать с поставщиком данных контейнера программно, вы можете использовать класс ContainerCalendarDataProvider.

ListCalendarDataProvider

ДЕМОНСТРАЦИЯ

ListCalendarDataProvider извлекает данные из предоставленного списка элементов. Он не требует XML-определения и может быть добавлен программно.

Вот базовый пример использования ListCalendarDataProvider:

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    SimpleCalendarEvent calendarEvent = SimpleCalendarEvent.create()
            .withTitle("Morning jog")
            .withStartDateTime(LocalDate.now(), LocalTime.of(8, 0))
            .build();

    ListCalendarDataProvider listDataProvider =
            new ListCalendarDataProvider(List.of(calendarEvent));

    calendar.addDataProvider(listDataProvider);
}

ListCalendarDataProvider автоматически обновляет пользовательский интерфейс FullCalendar, когда его данные изменяются через методы API:

  • addItem(): добавляет элемент в пользовательский интерфейс.

  • removeItem(): удаляет элемент из пользовательского интерфейса.

  • updateItem(): обновляет элемент в пользовательском интерфейсе.

ListDataProvider также предоставляет другие методы для управления списком элементов.

CallbackCalendarDataProvider

ДЕМОНСТРАЦИЯ

CallbackCalendarDataProvider - это базовый интерфейс для поставщиков данных, которые загружают данные по запросу. Этот интерфейс определяет метод onItemsFetch(), который вызывается всякий раз, когда компоненту нужны новые данные.

Данные загружаются в следующих ситуациях:

  • Когда пользователь переключается на режим отображения календаря с более широким диапазоном дат, чем предыдущий. Например, если пользователь переходит с дневного представления на еженедельное, компоненту потребуется извлечь данные за всю неделю.

  • Когда вызываются методы навигации компонента FullCalendar. Это включает в себя такие методы, как navigateToNext(), navigateToPrevious() и другие методы, которые перемещают представление календаря вперед или назад во времени.

  • Когда изменяется часовой пояс компонента FullCalendar. Компоненту потребуется извлечь новые данные, чтобы отразить обновленный часовой пояс.

CallbackDataProvider

Поставщик данных, который загружает данные с использованием запроса JPQL и DataManager. Аналогично ContainerDataProvider, он требует определения сопоставлений свойств, чтобы указать, как свойства сущности сопоставляются со свойствами CalendarEvent. Кроме того, необходимо предоставить запрос JPQL, который определяет данные, которые будут загружены.

Пример сопоставлений свойств в элементе callbackDataProvider:

<calendar:dataProviders>
    <calendar:callbackDataProvider title="title"
                                   startDateTime="startDate"
                                   endDateTime="endDate"/>
</calendar:dataProviders>

Чтобы загрузить данные с помощью JPQL-запроса, необходимо указать элемент itemsQuery в поставщике данных. Этот элемент требует полного квалифицированного имени класса сущности, используемого в JPQL-запросе.

Запрос items позволяет вам определить план выборки в атрибуте fetchPlan или в отдельном элементе fetchPlan.

<calendar:callbackDataProvider title="title"
                               startDateTime="startDate"
                               endDateTime="endDate">
    <calendar:itemsQuery class="com.company.fullcalendarsample.entity.Event"/>
</calendar:callbackDataProvider>

В JPQL-запросе вы можете использовать два параметра:

  • fetchStartDate - левая граница видимого диапазона дат в FullCalendar

  • fetchEndDate - правая граница видимого диапазона дат в FullCalendar.

Значение fetchEndDate является исключающим. Например, если видимый диапазон дат с 2024-09-29 по 2024-11-09, то фактическое значение fetchEndDate будет 2024-11-10.

Полный пример использования callbackDataProvider:

<calendar:dataProviders>
    <calendar:callbackDataProvider title="title"
                                   startDateTime="startDate"
                                   endDateTime="endDate">
        <calendar:itemsQuery class="com.company.fullcalendarsample.entity.Event">
            <calendar:fetchPlan extends="_base"/>
            <calendar:query>
                <![CDATA[select e from Event e
                            where e.startDate >= :fetchStartDate
                                and e.endDate < :fetchEndDate]]>
            </calendar:query>
        </calendar:itemsQuery>
    </calendar:callbackDataProvider>
</calendar:dataProviders>
Этот JPQL-запрос предполагает, что значения startDate и endDate не равны null. Если они могут быть null, вам нужно добавить проверку на null в запрос.

Для программной работы с CallbackDataProvider используйте класс EntityCalendarDataRetriever. Этот класс является Spring bean с областью видимости prototype, поэтому вы должны инициализировать его аккуратно, используя механизмы внедрения зависимостей Spring.

CallbackDataProvider и делегат загрузки

ДЕМОНСТРАЦИЯ

В ситуациях, когда сложная бизнес-логика требует построения сложных JPQL-запросов с множеством условий, написание запроса непосредственно в XML-дескрипторе может стать громоздким. Чтобы решить эту проблему, вы можете установить делегат загрузки для CallbackDataProvider.

@Autowired
private EventService eventService;

@Install(to = "calendar.myDataProvider", subject = "loadDelegate")
private List<CalendarEvent> calendarMyDataProviderLoadDelegate(final ItemsFetchContext context) {
    return eventService.fetchCalendarEvents(context.getStartDate(), context.getEndDate());
}
myDataProvider - это идентификатор поставщика данных. Вы можете указать его с помощью атрибута id в XML-определении.
Если ваша реализация делегата загрузки возвращает список EntityCalendarEvent, вам нужно будет указать сопоставления свойств в поставщике данных.

CalendarDataRetriever

ДЕМОНСТРАЦИЯ

CalendarDataRetriever - это простой поставщик данных, похожий на callbackDataProvider с делегатом загрузки. Однако у него нет XML-определения. Этот поставщик данных может использоваться в сочетании с сервисами для загрузки данных, обеспечивая более гибкий и программный подход к управлению данными в компоненте календаря.

@ViewComponent
private FullCalendar calendar;

@Autowired
private TaskEventService taskEventService;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.addDataProvider(new CalendarDataRetriever() {
        @Override
        public List<CalendarEvent> onItemsFetch(ItemsFetchContext context) {
            return taskEventService.fetchCalendarEvents(context);
        }
    });
}

Режимы отображения календаря

ДЕМОНСТРАЦИЯ

В FullCalendar режим отображения представляет собой конкретный способ визуализации данных календаря. Он позволяет пользователям просматривать события в разных временных рамках, таких как дни, недели или месяцы. Эта гибкость помогает пользователям взаимодействовать с календарем в различных форматах, в зависимости от их потребностей. Например, вы можете предпочесть детальный вид одного дня или более широкий обзор целого месяца.

FullCalendar предоставляет ряд встроенных режимов отображения:

  • Режимы day-grid отображают события календаря в формате сетки, аналогичном традиционным бумажным календарям. Каждая ячейка в day-grid представляет собой один день.

    • DAY_GRID_DAY - фокусируется на одном дне, предлагая детальный вид событий, запланированных на этот конкретный день.

    • DAY_GRID_WEEK - целая неделя дней, идеально подходит для концентрации на предстоящих событиях.

    • DAY_GRID_MONTH - отображает весь месяц с первого взгляда, позволяя пользователям видеть все дни и связанные с ними события.

    • DAY_GRID_YEAR - представляет собой весь год, предоставляя общий обзор.

      Вы можете использовать атрибут initialDisplayMode, чтобы установить начальный режим day-grid для вашего экземпляра FullCalendar:

      <calendar:calendar id="calendar"
                   initialDisplayMode="DAY_GRID_WEEK"
                   height="100%"
                   width="100%"/>

      На скриншоте ниже показан режим отображения day-grid month:

      day grid month mode

  • Режимы time-grid предлагают ориентированные на время макеты для отображения событий в течение одного или нескольких дней. Эти форматы особенно полезны для пользователей, которым нужно управлять своим расписанием с сильным акцентом на конкретное время в течение дня.

    FullCalendar предоставляет два режима time-grid:

    • TIME_GRID_DAY - отображает один день в деталях, позволяя пользователям видеть все события, запланированные на этот день, вместе с их конкретным временем начала и окончания.

    • TIME_GRID_WEEK - показывает целую неделю, предоставляя более широкий обзор, сохраняя при этом временные интервалы для каждого дня. Этот режим идеально подходит для визуализации еженедельных расписаний или планирования встреч в течение нескольких дней.

      Вы можете использовать атрибут initialDisplayMode, чтобы установить начальный режим time-grid для вашего экземпляра FullCalendar:

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

      На скриншоте ниже показан режим отображения time-grid week:

      time grid week mode

  • Режимы list представляют события в простом вертикальном формате, что упрощает для пользователей просмотр и управление их расписаниями за определенный период. Этот макет идеально подходит для пользователей, которые предпочитают простое текстовое представление своих событий.

    FullCalendar предлагает различные режимы list:

    • LIST_DAY - отображает все события для одного дня.

    • LIST_WEEK - отображает события для всей недели.

    • LIST_MONTH - выводит список событий на весь месяц.

    • LIST_YEAR - предоставляет обзор событий в течение всего года.

      Вы можете использовать атрибут initialDisplayMode, чтобы установить начальный режим list для вашего экземпляра FullCalendar:

      <calendar:calendar id="calendar"
                   initialDisplayMode="LIST_WEEK"
                   height="100%"
                   width="100%"/>

      На скриншоте ниже показан режим отображения list week:

      list week mode

  • Режим multi-month year предоставляет комплексный способ визуализации нескольких месяцев сразу, предлагая общий обзор событий за более длительный период.

    • MULTI_MONTH_YEAR отображает сетку месяцев, позволяя пользователям видеть все 12 месяцев года в одном представлении. Это полезно для планирования и отслеживания событий, охватывающих несколько месяцев.

      Вы можете использовать атрибут initialDisplayMode, чтобы установить начальный режим многомесячного года для вашего экземпляра FullCalendar:

      <calendar:calendar id="calendar"
                   initialDisplayMode="MULTI_MONTH_YEAR"
                   height="100%"
                   width="100%"/>

      На скриншоте ниже показан режим отображения multi-month year:

      multi month year mode

Свойства режима отображения

ДЕМОНСТРАЦИЯ

Каждый предопределенный режим отображения имеет свой собственный набор свойств. Некоторые свойства специфичны для определенного режима отображения, в то время как другие являются общими.

Например, вы можете настроить dayHeaderFormat только для режима day-grid day, и другие режимы не повлияют на его формат.

<calendar:calendar id="calendar" height="100%" width="100%">
    <calendar:displayModeProperties>
        <calendar:dayGridDay dayHeaderFormat="dddd D"/>
    </calendar:displayModeProperties>
</calendar:calendar>

FullCalendar также позволяет переопределять свойства в компоненте календаря с помощью свойств, настроенных из режима отображения.

Например, представьте, что компонент включает свойство weekNumbersVisible. Однако, если вам нужно отключить эту функцию для режима отображения day-grid month, вы должны использовать тег properties в свойствах режима отображения.

<calendar:calendar id="calendar"
                   height="100%"
                   width="100%"
                   weekNumbersVisible="true">
    <calendar:displayModeProperties>
        <calendar:dayGridMonth>
            <calendar:properties>
                <calendar:property name="weekNumbers" value="false"/>
            </calendar:properties>
        </calendar:dayGridMonth>
    </calendar:displayModeProperties>
</calendar:calendar>
В атрибуте name вы должны указать имя свойства, как оно определено в FullCalendar.js. Обратитесь к документации FullCalendar.js, чтобы найти правильное имя свойства. Используйте эту функцию осторожно; FullCalendar может игнорировать эту настройку свойств режима отображения, если вы измените то же свойство в компоненте во время выполнения.

Пользовательский режим отображения календаря

ДЕМОНСТРАЦИЯ

Если предопределенные режимы отображения не соответствуют вашим потребностям, вы можете создать свой собственный пользовательский режим отображения с определенным диапазоном дат. Существует два способа создания пользовательского режима отображения:

  • Программно, используя класс CustomCalendarDisplayMode.

  • Декларативно, используя элемент customDisplayModes в XML.

Пользовательские режимы отображения должны быть основаны на одном из четырех базовых типов: day-grid, time-grid, list и multi-month.

Например, вы можете определить режим отображения, ориентированный на время, декларативно, используя следующий код:

<calendar:calendar id="calendar"
                   initialDisplayMode="timeGridThreeDays"
                   height="100%"
                   width="100%">
    <calendar:customDisplayModes>
        <calendar:displayMode id="timeGridThreeDays" type="TIME_GRID" dayCount="3">
        </calendar:displayMode>
    </calendar:customDisplayModes>
</calendar:calendar>
Атрибут dayCount задает точное количество дней, отображаемых в пользовательском режиме отображения, независимо от свойств weekendsVisible или hiddenDays.

Вы также можете использовать элемент duration вместо атрибута dayCount, чтобы указать диапазон дат:

<calendar:displayMode id="timeGridThreeDays" type="TIME_GRID">
    <calendar:duration days="3"/>
</calendar:displayMode>
Когда диапазон дат задается с помощью duration, скрытые дни будут опущены, и режим отображения будет растянут, чтобы заполнить пустое пространство. Однако, если вы указываете dayCount, вы гарантированно увидите определенное количество дней.

Для программного создания пользовательских режимов отображения используйте CustomCalendarDisplayMode.

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.addCustomCalendarDisplayMode(
            new CustomCalendarDisplayMode("dayGridTwoDays")
                    .withDayCount(2));

    calendar.setInitialCalendarDisplayMode(() -> "dayGridTwoDays");
}
Режим отображения по умолчанию - это day grid, но вы можете настроить его, выбрав другой тип из перечисления GenericCalendarDisplayModes.

Режим отображения и видимый диапазон

ДЕМОНСТРАЦИЯ

Вы можете дополнительно настроить диапазон дат, отображаемый в календаре, с помощью свойства visibleRange. Это свойство следует использовать в сочетании с параметрами из перечисления GenericCalendarDisplayModes.

Важно отметить, что visibleRange не имеет XML-определения и может быть настроен только программным способом.

Например, вы можете настроить календарь для отображения day grid следующим образом:

<calendar:calendar id="calendar"
                   initialDisplayMode="DAY_GRID"
                   height="100%"
                   width="100%"/>
Перечисление GenericCalendarDisplayModes предоставляет следующие варианты отображения в XML: DAY_GRID, TIME_GRID, LIST и MULTI_MONTH.

Установите необходимый видимый диапазон в контроллере экрана:

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.setVisibleRange(
            LocalDate.now(), LocalDate.now().plusDays(3));
}
Последняя дата является исключающей. Например, видимый диапазон с 1 октября 2024 года по 3 октября 2024 года будет отображать только два дня (1 и 2 октября).
Когда установлен видимый диапазон, методы навигации, такие как navigateToNext(), не будут работать.

Редактирование событий календаря

FullCalendar позволяет редактировать события календаря путем перетаскивания для изменения даты начала и изменения размера для регулировки продолжительности. Чтобы обработать эти изменения, вам следует добавить следующие обработчики событий: EventDropEvent и EventResizeEvent.

Компонент может изменять только три свойства CalendarEvent на основе изменений события:

Перетаскивание

ДЕМОНСТРАЦИЯ

Чтобы включить функцию перетаскивания, установите свойство eventStartEditable в true.

<calendar:calendar id="calendar"
                   eventStartEditable="true"
                   height="100%"
                   width="100%"/>

Событие сброса события календаря

Чтобы обрабатывать изменения при сбросе события календаря, подпишитесь на EventDropEvent. Это событие испускается компонентом FullCalendar, когда пользователь перемещает событие календаря в другое положение.

Прежде чем передавать событие в обработчики, компонент применяет изменения к событию календаря в поставщике данных.

Событие содержит следующую информацию:

  • Сброшенное событие календаря

  • Поставщик данных события календаря

  • Старые значения

  • Информация о текущем режиме отображения

  • Дельта (продолжительность) между старой датой начала и новой датой начала

  • Связанные события календаря, которые также были сброшены вместе со сброшенным событием календаря

Пример ниже демонстрирует, как немедленно сохранить изменения в событии календаря сущности:

@Autowired
private DataManager dataManager;

@Subscribe("calendar")
public void onCalendarEventDrop(final EventDropEvent event) {
    EntityCalendarEvent<Event> calendarEvent = event.getCalendarEvent();

    dataManager.save(calendarEvent.getEntity());
}

Изменяемый размер

ДЕМОНСТРАЦИЯ

Чтобы включить изменение размера событий календаря, установите свойство eventDurationEditable в true. Это позволит пользователям изменять продолжительность (размер) события календаря, изменяя его конечную дату.

Чтобы изменить размер события календаря, изменяя его дату начала, установите свойство eventResizableFromStart в true:

<calendar:calendar id="calendar"
                   eventDurationEditable="true"
                   eventResizableFromStart="true"
                   height="100%"
                   width="100%"/>

Событие изменения размера события

Чтобы обрабатывать изменения при изменении размера события календаря, подпишитесь на EventResizeEvent. Это событие запускается компонентом FullCalendar, когда пользователь изменяет размер события календаря.

Прежде чем передавать событие в обработчики, компонент применяет изменения к событию календаря в поставщике данных.

Событие содержит следующую информацию:

  • Измененное событие календаря

  • Поставщик данных события календаря

  • Старые значения

  • Информация о текущем режиме отображения

  • Начальная дельта (продолжительность) между старой датой начала и новой датой начала

  • Конечная дельта (продолжительность) между старой конечной датой и новой старой датой

  • Связанные события календаря, которые также были изменены в размере вместе со сброшенным событием календаря

Пример ниже демонстрирует, как немедленно сохранить изменения в событии календаря сущности:

@Autowired
private DataManager dataManager;

@Subscribe("calendar")
public void onCalendarEventResize(final EventResizeEvent event) {
    EntityCalendarEvent<Event> calendarEvent = event.getCalendarEvent();

    dataManager.save(calendarEvent);
}

Ограничения событий календаря

ДЕМОНСТРАЦИЯ

FullCalendar позволяет настраивать ограничения для перетаскивания и изменения размера событий. Вы можете ограничить изменения событий тремя способами:

  • Группа идентификаторов ограничений событий:

    Установите значение eventConstraintGroupId. Если это свойство установлено, события, которые перетаскиваются или изменяют размер, должны быть полностью заключены по крайней мере в одно из событий, связанных с указанным идентификатором группы.

  • Стандартные рабочие часы:

    Включите стандартные рабочие часы с помощью свойства eventConstraintBusinessHoursEnabled. События, которые перетаскиваются или изменяют размер, должны быть полностью заключены в рабочие часы недели. Если defaultBusinessHoursEnabled установлен, стандартные рабочие часы - с понедельника по пятницу с 9:00 до 17:00. Также учитываются пользовательские рабочие часы.

  • Пользовательские рабочие часы:

    Установите пользовательские рабочие часы. Как и в случае со стандартными рабочими часами, события должны находиться в пределах заданных пользовательских рабочих часов.

Перекрытие событий

ДЕМОНСТРАЦИЯ

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

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

В следующем примере показано, как разрешить перекрытие событий, длящихся весь день, только с другими событиями, длящимися весь день:

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.setEventOverlapJsFunction(new JsFunction("""
            function(stillEvent, movingEvent) {
                return stillEvent.allDay && movingEvent.allDay;
            }"""));
}
Определение функции JavaScript для перекрытия событий имеет приоритет над свойством eventOverlap.
Вы можете найти все доступные свойства событий в документации FullCalendar.js. Внутри функции JavaScript вы можете использовать дополнительные свойства, доступные в объекте extendedProps события. Например, если событие календаря имеет дополнительное свойство под названием myEventStatus, вы можете получить его значение следующим образом: stillEvent.extendedProps.myEventStatus.

Выделение ячеек

ДЕМОНСТРАЦИЯ

Функция выделения ячеек в FullCalendar позволяет пользователям выбирать несколько дней или временных интервалов, щелкая мышью или перетаскивая ее. Чтобы включить эту функцию, установите свойство selectionEnabled в значение true:

<calendar:calendar id="calendar"
                   selectionEnabled="true"
                   height="100%"
                   width="100%"/>

Событие SelectEvent

Чтобы обрабатывать события выделения, подпишитесь на событие SelectEvent. Это событие срабатывает компонентом FullCalendar, когда пользователь выбирает несколько дней или временных интервалов.

Событие содержит следующую информацию:

  • Начальную дату и время.

  • Конечную дату и время.

  • Свойство allDay. Указывает, являются ли выбранные даты ячейками дня или временными интервалами.

  • Информацию о текущем режиме отображения.

  • Информацию о щелчке мыши.

Пример подписки на событие SelectEvent:

@Autowired
private Notifications notifications;

@Subscribe("calendar")
public void onCalendarSelect(final SelectEvent event) {
    notifications.show(String.format("Selected dates: from %s to %s",
            event.getStartDateTime(), event.getEndDateTime()));
}
Конечная дата и время являются исключительными. Например, если выделение охватывает весь день, и значение последней даты - 2024-10-15, то значение свойства end date будет 2024-10-16.

Событие UnselectEvent

Чтобы обрабатывать отмену выделения, подпишитесь на событие UnselectEvent. Это событие срабатывает компонентом FullCalendar, когда выделение отменяется. Оно запускается в следующих случаях:

  • Пользователь щелкает в стороне от текущего выделения: это происходит, если свойство unselectAuto не отключено.

  • Пользователь делает новый выделение: событие срабатывает до того, как произойдет новое выделение.

  • Пользователь перемещается вперед или назад по представлению календаря или переключается на другой режим.

  • Вызывается метод unselect().

Событие содержит следующую информацию:

  • Информацию о текущем режиме отображения.

  • Информацию о щелчке мыши.

Пример подписки на событие сброса выделения:

@Autowired
private Notifications notifications;

@Subscribe("calendar")
public void onCalendarUnselect(final UnselectEvent event) {
    notifications.show("Selection is cleared");
}

Ограничения выделения

Ограничения выделения в FullCalendar похожи на ограничения событий календаря, но они применяются к области выделения. Эти ограничения ограничивают область выделения, основываясь на следующих параметрах:

  • Свойство selectConstraintGroupId: если это свойство установлено, можно выделять только даты или временные интервалы, содержащие события с указанным идентификатором группы.

  • Свойство selectConstraintBusinessHoursEnabled: выделение можно делать только в пределах рабочих часов недели. Если свойство defaultBusinessHoursEnabled установлено, рабочие часы по умолчанию - с понедельника по пятницу, с 9:00 до 17:00. Также учитываются пользовательские рабочие часы.

  • Пользовательские рабочие часы: как и в случае с рабочими часами по умолчанию, выделение должно производиться в пределах пользовательских рабочих часов.

Перекрытие выделения событий

ДЕМОНСТРАЦИЯ

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

Для более тонкой настройки вы можете использовать определение функции JavaScript, чтобы проверить, может ли выделение перекрываться с событием календаря.

В следующем примере показано, как разрешить выделение в ячейках, содержащих фоновые события календаря:

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.setSelectOverlapJsFunction(new JsFunction("""
            function(event) {
                return event.display === 'background';
            }"""));
}
Определение функции JavaScript для перекрытия выделения имеет приоритет над свойством selectOverlap.
Вы можете найти все доступные свойства событий в документации FullCalendar.js. Внутри функции JavaScript вы можете использовать дополнительные свойства, доступные в объекте extendedProps события. Например, если событие календаря имеет дополнительное свойство под названием myEventStatus, вы можете получить его значение следующим образом: event.extendedProps.myEventStatus.

Программное управление выделением

FullCalendar предоставляет следующие методы для программного выделения или отмены выделения диапазона дат:

  • select(): выделяет диапазон дат.

  • unselect(): очищает текущее выделение.

Следующий код выделяет диапазон дат из двух дней, включая текущий день:

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.select(LocalDate.now(), LocalDate.now().plusDays(2));
}
Конечная дата в примере является исключающей, фактически выделяя текущий и следующий дни.

Управление выделением с помощью функции JavaScript

Вы можете управлять поведением выделения для каждой ячейки с помощью функции JavaScript. Например, следующая функция позволяет выделять только вчера, сегодня и завтра:

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.setSelectAllowJsFunction(
            new JsFunction(String.format("""
                            function(selectionInfo) { (1)
                                return selectionInfo.start >= new Date('%s')
                                && selectionInfo.end <= new Date('%s');
                            }""",
                    convertToStrDate(LocalDate.now().minusDays(1)), (2)
                    convertToStrDate(LocalDate.now().plusDays(2)))));
}

protected String convertToStrDate(LocalDate date) { (3)
    TimeZone timeZone = calendar.getTimeZone() == null
            ? TimeZone.getDefault()
            : calendar.getTimeZone();
    return date.atStartOfDay(timeZone.toZoneId()).toOffsetDateTime().toString();
}
1 Параметр selectionInfo в этой функции содержит следующие свойства:

  • allDay: Логическое значение, указывающее, находится ли выделение в ячейках, охватывающих весь день.

  • end: Объект Date, представляющий конечную дату выделения (исключая ее).

  • endStr: Строковое представление конечной даты.

  • start: Объект Date, представляющий начальную дату выделения.

  • startStr: Строковое представление начальной даты.
2 Даты start и end применяются к выделению.
3 Этот метод преобразует LocalDate в формат ISO с временной зоной компонента.

Рабочие часы

ДЕМОНСТРАЦИЯ

Рабочие часы определяют конкретное время, в течение которого можно планировать или отображать события календаря. В компоненте FullCalendar есть два способа настройки рабочих часов:

  • Свойство defaultBusinessHoursEnabled.

  • Пользовательский список определений рабочих часов. Позволяет задать пользовательские рабочие часы, переопределяя значения по умолчанию.

Вот пример настройки рабочих часов с помощью свойства defaultBusinessHoursEnabled:

<calendar:calendar id="calendarDefault"
                   defaultBusinessHoursEnabled="true"
                   height="100%"
                   width="100%"/>

Когда определены рабочие часы, они визуально выделяются на календаре.

business hours enabled

Для более тонкой настройки рабочих часов можно задать список пользовательских рабочих часов. Это позволяет настроить разные часы для разных дней недели или даже разбить часы на сегменты (например, утренняя и вечерняя смены).

Давайте настроим график дежурств в качестве примера. По понедельникам, средам и пятницам рабочие часы с 8:00 до 12:00, а по вторникам и четвергам - с 12:00 до 18:00:

<calendar:calendar id="calendar"
                   initialDisplayMode="TIME_GRID_WEEK"
                   height="100%"
                   width="100%">
    <calendar:businessHours>
        <calendar:entry startTime="PT8h" endTime="PT12h">
            <calendar:day name="MONDAY"/>
            <calendar:day name="WEDNESDAY"/>
            <calendar:day name="FRIDAY"/>
        </calendar:entry>
        <calendar:entry startTime="PT12h" endTime="PT16h">
            <calendar:day name="TUESDAY"/>
            <calendar:day name="THURSDAY"/>
        </calendar:entry>
    </calendar:businessHours>
</calendar:calendar>
Свойства startTime и endTime соответствуют формату продолжительности ISO-8601, который совпадает с форматом, используемым классом java.time.Duration.
business hours custom

Контекстное меню

ДЕМОНСТРАЦИЯ

Компонент FullCalendar предоставляет контекстное меню через класс FullCalendarContextMenu. Вы можете настроить содержимое этого меню в зависимости от щелкнутой ячейки дня или события календаря.

Однако существуют ограничения на то, где можно открыть контекстное меню:

  • События календаря: доступно во всех режимах отображения.

  • Ячейки дня: доступно во всех режимах отображения сетки дней и в режиме многомесячного года.

  • Временные интервалы: недоступно.

Пример динамической обработки контекстного меню:

@ViewComponent
private CollectionContainer<Event> eventsDc;
@ViewComponent
private FullCalendar calendar;

@Autowired
private DialogWindows dialogWindows;

@Subscribe
public void onInit(final InitEvent event) {
    FullCalendarContextMenu contextMenu = calendar.getContextMenu(); (1)
    contextMenu.setContentMenuHandler(context -> { (2)
        EntityCalendarEvent<Event> calendarEvent = context.getCalendarEvent();
        if (calendarEvent != null) {
            contextMenu.removeAll(); (3)

            contextMenu.addItem("Edit", clickEvent -> { (4)
                dialogWindows.detail(this, Event.class)
                        .editEntity(calendarEvent.getEntity())
                        .open();
            });
            contextMenu.addItem("Remove", clickEvent -> {
                eventsDc.getMutableItems().remove(calendarEvent.getEntity());
            });

            return true; (5)
        }
        return false;
    });
}
1 Получает экземпляр контекстного меню из компонента FullCalendar.
2 Устанавливает обработчик контекстного меню, позволяя вам настроить пункты меню.
3 Удаляет все пункты меню, которые ранее находились в контекстном меню.
4 Добавляет новый пункт меню с обработчиком щелчка.
5 Возвращает true, если контекстное меню можно открыть.
context menu

Стилизация

ДЕМОНСТРАЦИЯ

Вы можете стилизовать календарь и его события с помощью CSS. Используйте инструменты разработчика браузера, чтобы проверить DOM-дерево календаря и написать CSS-селекторы.

Например, следующие селекторы изменяют цвет фона субботы и воскресенья в режимах отображения day-grid:

.fc-day-sat.fc-daygrid-day,
.fc-day-sun.fc-daygrid-day {
    background-color: #FF9191AD;
}

Существуют CSS-переменные, которые FullCalendar.js предоставляет для настройки:

html jmix-full-calendar {
    --fc-small-font-size: var(--lumo-font-size-s);
    --fc-page-bg-color: var(--lumo-base-color);
    --fc-neutral-bg-color: var(--lumo-contrast-10pct);
    --fc-neutral-text-color: var(--lumo-secondary-text-color);
    --fc-border-color: var(--lumo-contrast-20pct);

    --fc-event-bg-color: var(--lumo-primary-color-50pct);
    --fc-event-border-color: var(--lumo-primary-color-50pct);
    --fc-event-text-color: var(--lumo-primary-contrast-color);
    --fc-event-selected-overlay-color: var(--lumo-primary-color-10pct);;

    --fc-more-link-bg-color: #a6a6a6;
    --fc-more-link-text-color: inherit;

    --fc-event-resizer-thickness: 8px;
    --fc-event-resizer-dot-total-width: 8px;
    --fc-event-resizer-dot-border-width: 1px;

    --fc-non-business-color: var(--lumo-contrast-5pct);
    --fc-bg-event-color: rgb(143, 223, 130);
    --fc-bg-event-opacity: 0.3;
    --fc-highlight-color: var(--lumo-primary-color-10pct);
    --fc-today-bg-color: rgba(255, 220, 40, 0.15);
    --fc-now-indicator-color: red;
}

Свойства компонента и событий

Компонент FullCalendar и события календаря имеют свойства, определяющие цвета событий.

Например, в следующем примере устанавливаются цвета для всех событий календаря:

<calendar:calendar id="calendar"
                   eventTextColor="#5CCCCC"
                   eventBorderColor="#679B00"
                   eventBackgroundColor="#006363"
                   height="100%"
                   width="100%"/>
styling properties1

Отдельные события календаря имеют свойства, которые могут переопределять определения цвета компонента:

CalendarEvent calendarEvent = SimpleCalendarEvent.create()
        .withTitle("Colored event")
        .withAllDay(true)
        .withStartDateTime(LocalDateTime.now())
        .withTextColor("#80EA69")
        .withBorderColor("#A6A200")
        .withBackgroundColor("#188A00")
        .build();
styling properties2

Еще один способ стилизации событий календаря - назначение имени класса событию. Это позволяет применять пользовательские стили CSS к определенным событиям.

CalendarEvent redCalendarEvent = SimpleCalendarEvent.create()
        .withTitle("Colored event")
        .withStartDateTime(LocalDateTime.now())
        .withClassNames("red-text-event")
        .build();

CSS-селектор:

.fc-event.red-text-event {
    color: red;
}
styling properties3

Генераторы имен классов

ДЕМОНСТРАЦИЯ

Генераторы имен классов помогают создавать имена классов для элементов пользовательского интерфейса календаря, основываясь на контексте их создания.

Например, давайте выделим выходные дни с помощью dayHeaderClassNamesGenerator:

@Install(to = "calendar", subject = "dayHeaderClassNamesGenerator")
private List<String> calendarDayHeaderClassNamesGenerator(final DayHeaderClassNamesContext context) {
    if (context.getDayOfWeek() == DayOfWeek.SATURDAY
            || context.getDayOfWeek() == DayOfWeek.SUNDAY) {
        return List.of("weekend");
    }
    return null;
}

Чтобы стилизовать цвета фона и текста, добавьте два CSS-селектора:

.fc-col-header-cell.weekend {
    background-color: rgba(195, 195, 255, 0.73);
}

.fc-col-header-cell.weekend a {
    color: var(--lumo-primary-color)
}
styling day header class names generator1

Обратитесь к разделу Обработчики, чтобы получить полный список генераторов имен классов.

Локализация

Локализацию можно изменить локально для одного компонента FullCalendar или глобально с помощью механизма сообщений.

Чтобы настроить локализацию одного компонента, используйте свойства компонента и объект FullCalendarI18n. Объект FullCalendarI18n содержит зависящие от локали свойства, некоторые из которых могут влиять на поведение компонента, например, firstDayOfWeek, direction и другие.

Например, давайте изменим первый день недели и направление:

<calendar:calendar id="calendar"
                   firstDayOfWeek="MONDAY"
                   direction="RTL"
                   height="100%"
                   width="100%"/>

Программно вы можете сделать следующее:

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.setI18n(new FullCalendarI18n()
            .withFirstDayOfWeek(DayOfWeek.MONDAY)
            .withDirection(FullCalendarI18n.Direction.RTL));
}

Чтобы изменить локализацию глобально, добавьте ключи сообщений из дополнения FullCalendar в ваш пакет сообщений. Полный список доступных сообщений можно найти в jmix/fullcalendarflowui/messages.properties.

Например, вы можете перевести стандартные названия месяцев:

io.jmix.fullcalendarflowui.component/months=Январь, Февраль, Март, Апрель, Май, Июнь, Июль, Август, Сентябрь, Октябрь, Ноябрь, Декабрь
io.jmix.fullcalendarflowui.component/monthsShort=Янв, Фев, Мар, Апр, Май, Июн, Июл, Авг, Сен, Окт, Ноя, Дек
io.jmix.fullcalendarflowui.component/weekdays=Воскресенье, Понедельник, Вторник, Среда, Четверг, Пятница, Суббота
io.jmix.fullcalendarflowui.component/weekdaysShort=Вск, Пнд, Втр, Срд, Чтв, Птн, Сбт
io.jmix.fullcalendarflowui.component/weekdaysMin=Вс, Пн, Вт, Ср, Чт, Пт, Сб
Убедитесь, что переведенные названия находятся в том же порядке, что и исходные, потому что парсер ожидает дни недели с воскресенья по субботу и месяцы с января по декабрь.

Атрибуты

В Jmix есть множество общих атрибутов, которые выполняют одну и ту же функцию для всех компонентов.

Ниже приведены атрибуты, специфичные для календаря:

Название Описание Значение по умолчанию

allDayMaintainDurationEnabled

Определяет, как продолжительность события должна изменяться, когда оно перетаскивается из временного раздела в раздел "весь день" или наоборот.

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

  • false - продолжительность события будет сброшена до defaultAllDayEventDuration, если оно перетаскивается в раздел "весь день", или до defaultTimedEventDuration, если оно перетаскивается в временной раздел.

false

allDayText

Устанавливает текст для обозначения "весь день". Текст виден в режимах отображения time-grid

-

closeHint

Устанавливает подсказку для кнопки закрытия в всплывающем окне, когда вы нажимаете ссылку "подробнее".

-

dateAlignment

Устанавливает первую видимую дату в режиме CustomCalendarDisplayMode.

Когда используется режим отображения пользовательского календаря, и вы хотите гарантировать, что календарь начинается с определенного интервала, например, начала недели или начала месяца, укажите значение, например, week или month. Если свойство не указано, будет сгенерировано разумное значение по умолчанию на основе продолжительности режима отображения.

Если диапазон режима отображения явно определен видимым диапазоном дат, это свойство будет проигнорировано.

-

dayHeadersVisible

Определяет, должны ли отображаться заголовки дней. Работает для режимов отображения day-grid, time-grid и month.

true

dayMaxEventRows

Устанавливает количество строк событий в режимах отображения day-grid и в разделе "весь день" в режимах отображения time-grid.

Обратите внимание, что строка "подробнее" включена в подсчет. Например, если значение равно 1, будет показана только строка "подробнее". Имеет приоритет над defaultDayMaxEventRowsEnabled.

-

dayMaxEvents

Устанавливает количество строк событий в режимах отображения day-grid и в разделе "весь день" в режимах отображения time-grid.

Обратите внимание, что строка "+ подробнее" не включена в подсчет. Например, если значение равно 1, будет показано одно событие и строка "подробнее". Имеет приоритет над defaultDayMaxEventsEnabled.

-

dayOfYear

Правило определения первой недели года. Например, если первый день недели равен 1, а день года равен 4, это означает, что неделя, содержащая 4 января, является первой неделей года.

-

defaultAllDay

Устанавливает значение по умолчанию для свойства allDay каждого события календаря, если оно не указано.

Если свойство установлено в true, все события без свойства allDay (например, не указано сопоставление в поставщике данных или событие календаря возвращает null для этого свойства) будут считаться событиями, охватывающими весь день.

Обратите внимание, что в этом случае события без свойства allDay будут отображаться как события, охватывающие весь день. Если такое событие будет изменено путем перетаскивания или изменения размера, и у вас есть обработчики для этих событий, компонент применит изменения к событию календаря, что может привести к изменению экземпляра сущности/DTO.

false

defaultAllDayEventDuration

Устанавливает продолжительность по умолчанию для событий, охватывающих весь день, если они не задают свойство endDateTime.

Например, свойство установлено в 2 дня. Событие, у которого свойство allDay равно true, и у которого нет свойства endDateTime, будет отображаться в разделе "весь день" и будет занимать два дня.

Обратите внимание, что свойство endDateTime события календаря останется незаданным, если forceEventDuration не установлен в true. В этом случае календарь явно назначит конечную дату и время событию. Если такое событие будет изменено путем перетаскивания или изменения размера, и у вас есть обработчики для этих событий, компонент установит для события календаря значение конечной даты и времени, что может привести к изменению экземпляра сущности/DTO.

Это свойство влияет только на события со свойством allDay, равным true.

P1d

defaultBusinessHoursEnabled

Включает рабочие часы по умолчанию. Рабочие часы по умолчанию: понедельник - пятница с 9:00 до 17:00.

false

defaultDayHeaderFormat

Устанавливает формат текста, который будет отображаться в заголовках столбцов календаря.

По умолчанию компонент устанавливает локализованный формат из сообщений при создании. Это свойство действует как формат по умолчанию для всех режимов отображения и для CustomCalendarDisplayMode, пока для этих режимов отображения не будет установлено конкретное свойство. Однако все объекты свойств режимов отображения по умолчанию явно задают формат, таким образом, они переопределяют это свойство.

Поскольку компонент использует плагин moment для FullCalendar, вы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, dd создает значение Mo.

Изменение свойства не применяется после того, как компонент прикреплен к UI.

-

defaultDayMaxEventRowsEnabled

Ограничивает максимальное количество накладывающихся друг на друга событий в пределах заданного дня.

  • true - ограничивает количество событий высотой ячейки дня.

  • false - компонент отображает все события как есть.

Это свойство применяется для режимов отображения day-grid и в ячейках "весь день".

false

defaultDayMaxEventsEnabled

Ограничивает максимальное количество накладывающихся друг на друга событий в пределах заданного дня.

  • true - ограничивает количество событий высотой ячейки дня.

  • false - компонент отображает все события как есть.

Это свойство применяется для режимов отображения day-grid и в ячейках "весь день".

false

defaultDayPopoverFormat

Устанавливает формат даты заголовка всплывающего окна, которое отображается при нажатии на ссылку "подробнее". По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Это свойство действует как формат по умолчанию для всех режимов отображения и для CustomCalendarDisplayMode, пока для этих режимов отображения не будет установлено конкретное свойство. Однако все объекты свойств режимов отображения по умолчанию явно задают формат, таким образом, они переопределяют это свойство.

Поскольку компонент использует плагин moment для FullCalendar, вы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, MMM D, YY создает значение Sep 9, 24.

Изменение свойства не применяется после того, как компонент прикреплен к UI.

-

defaultEventTimeFormat

Устанавливает формат текста времени, который будет отображаться на каждом событии. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Это свойство действует как формат по умолчанию для всех режимов отображения и для CustomCalendarDisplayMode, пока для этих режимов отображения не будет установлено конкретное свойство. Однако все объекты свойств режимов отображения по умолчанию явно задают формат, таким образом, они переопределяют это свойство.

Поскольку компонент использует плагин moment для FullCalendar, вы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, HH:mm создает значение 00:00 (01, 2, …​ 23 : 01, 02 …​ 59).

Изменение свойства не применяется после того, как компонент прикреплен к UI.

-

defaultSlotLabelFormat

Устанавливает формат текста, который будет отображаться в пределах временного интервала. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Это свойство действует как формат по умолчанию для всех режимов отображения и для CustomCalendarDisplayMode, пока для этих режимов отображения не будет установлено конкретное свойство. Однако все объекты свойств режимов отображения по умолчанию явно задают формат, таким образом, они переопределяют это свойство.

Поскольку компонент использует плагин moment для FullCalendar, вы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, ha создает значение 1 am (1, 2, …​ 12 am/ pm).

Изменение свойства не применяется после того, как компонент прикреплен к UI.

-

defaultTimedEventDuration

Устанавливает продолжительность по умолчанию для событий, привязанных к времени, если они не задают свойство endDateTime.

Например, свойство установлено в 2 часа. Событие, у которого свойство allDay равно false, и у которого нет свойства endDateTime, будет занимать два часа в временных интервалах.

Обратите внимание, что свойство endDateTime события календаря останется незаданным, если forceEventDuration не установлен в true. В этом случае календарь явно назначит конечную дату событию. Если такое событие будет изменено путем перетаскивания или изменения размера, и у вас есть обработчики для этих событий, компонент установит для события календаря новое значение свойства endDateTime, что может привести к изменению экземпляра сущности/DTO.

Это свойство влияет только на события со свойством allDay, равным false.

PT1h

defaultWeekNumberFormat

Устанавливает формат номера недели, который будет отображаться, когда weekNumbersVisible равно true. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Это свойство действует как формат по умолчанию для всех режимов отображения и для CustomCalendarDisplayMode, пока для этих режимов отображения не будет установлено конкретное свойство. Однако все объекты свойств режимов отображения по умолчанию явно задают формат, таким образом, они переопределяют это свойство.

Поскольку компонент использует плагин moment для FullCalendar, вы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, [Week] w создает значение Week 1 (1, 2, …​ 52, 53).

Изменение свойства не применяется после того, как компонент прикреплен к UI.

-

direction

Направление, в котором должен быть написан текст. Также перестраивает компоновку.

-

displayEventTime

Определяет видимость текста времени для каждого события.

Свойство применяется к событиям, привязанным к времени (не к событиям "весь день"). Если установлено в true, текст времени будет всегда отображаться на событии. Если установлено в false, текст времени никогда не будет отображаться на событии. События, охватывающие весь день, все равно никогда не будут отображать текст времени.

true

dragRevertDuration

Устанавливает время, за которое событие возвращается в исходное положение после неудачного перетаскивания.

500

dragScroll

Включает автоматическую прокрутку контейнеров прокрутки во время перетаскивания и отбрасывания событий, а также выбора даты.

Изменение свойства не применяется после того, как компонент прикреплен к UI.

true

eventBackgroundColor

Устанавливает цвет фона для всех событий в календаре.

Обратите внимание, что события календаря могут переопределить это значение, если они задают свойство backgroundColor.

Поддерживаемые значения:

  • #f00

  • #ff0000

  • rgb(255,0,0)

  • Имя цвета - red

-

eventBorderColor

Устанавливает цвет границы для всех событий в календаре.

Обратите внимание, что события календаря могут переопределить это значение, если они задают свойство borderColor.

Поддерживаемые значения:

  • #f00

  • #ff0000

  • rgb(255,0,0)

  • Имя цвета - red

-

eventConstraintBusinessHoursEnabled

Устанавливает, должны ли события, которые перетаскиваются или изменяются в размере, полностью находиться в пределах рабочих часов недели. Также учитываются пользовательские рабочие часы.

false

eventConstraintGroupId

Устанавливает идентификатор группы, чтобы ограничить перетаскивание и изменение размера событий. События, которые перетаскиваются или изменяются в размере, должны быть полностью заключены по крайней мере в одно из событий, связанных с заданным идентификатором группы.

Имеет приоритет над eventConstraintBusinessHoursEnabled.

Идентификатор группы может быть экземпляром сущности, строкой, перечислением или другим типом.

-

eventDisplay

Устанавливает режим отображения, который управляет внешним видом всех событий, не указывающих режим отображения.

Чтобы управлять отображением конкретных событий, используйте свойство display события календаря.

AUTO

eventDragMinDistance

Устанавливает, на сколько пикселей пользователь должен переместить мышь/касание, прежде чем активируется перетаскивание события.

5

eventDurationEditable

Включает возможность редактирования продолжительности события с помощью изменения размера. Это свойство может быть переопределено для каждого события свойством durationEditable.

false

eventHint

Устанавливает для невидимого заголовка таблицы в режиме отображения списка имя столбца с названиями событий.

-

eventInteractive

Включает возможность редактирования продолжительности события с помощью изменения размера.

Это свойство может быть переопределено для каждого события свойством interactive.

false

eventLongPressDelay

Устанавливает время, в миллисекундах, которое пользователь должен удерживать, прежде чем событие станет перетаскиваемым на сенсорных устройствах.

1000

eventMaxStack

Устанавливает максимальное количество событий, которые располагаются друг над другом в режимах отображения time-grid.

-

eventOrder

Устанавливает список свойств события календаря, которые должны участвовать в сортировке. Также можно указывать свойства из свойства additionalProperties события.

Для большинства режимов отображения календаря это свойство определяет вертикальное упорядочение событий в пределах одного дня. Однако для режимов отображения time-grid оно определяет горизонтальное упорядочение событий в пределах одного временного интервала.

Значение по умолчанию ставит ранние события первыми. Если они равны, то ставит более продолжительные события первыми. Если они все еще равны, то ставит события, охватывающие весь день, первыми. Если они все еще равны, то сортирует события по названию, в алфавитном порядке.

Если помещение события с более низким приоритетом перед событием с более высоким приоритетом улучшает компактность, алгоритм сделает это. Чтобы отключить это поведение, установите eventOrderStrict в true.

Предоставленные свойства сортируются в порядке возрастания. Если свойство имеет префикс в виде минуса, например, -title, сортировка будет производиться в порядке убывания.

start,-duration,allDay,title

eventOrderStrict

Включает возможность строго следовать заданному порядку событий.

Значение false означает, что порядок событий не строгий, и компактность будет иметь приоритет над точным соблюдением порядка событий.

false

eventOverlap

Разрешает событиям перекрываться друг с другом во время перетаскивания и изменения размера.

true

eventResizableFromStart

Включает возможность изменения размера события с его начальной даты.

false

eventStartEditable

Включает возможность редактирования времени начала события с помощью перетаскивания.

Это свойство может быть переопределено для каждого события свойством startEditable.

false

eventTextColor

Устанавливает цвет текста для всех событий в календаре.

Обратите внимание, что события календаря могут переопределить это значение, если они задают свойство textColor.

Поддерживаемые значения:

  • #f00

  • #ff0000

  • rgb(255,0,0)

  • Имя цвета - red

Цвет применяется в режимах отображения time-grid и для событий, охватывающих весь день, в режимах отображения day-grid.

-

expandRows

Включает возможность расширения строк режимов отображения time-grid, если они не занимают всю высоту.

false

firstDayOfWeek

Устанавливает день, с которого начинается каждая неделя. Значение по умолчанию берется из локали.

-

forceEventDuration

Заставляет компонент назначать свойству endDateTime значение для событий, если у них его нет.

Обратите внимание, что если событие не задает свойство endDateTime, компонент явно установит его. Если такое событие будет изменено путем перетаскивания или изменения размера, и у вас есть обработчики для этих событий, компонент установит для события календаря новое значение свойства endDateTime, что может привести к изменению экземпляра сущности/DTO.

false

initialDate

Устанавливает начальную дату, которая будет отображаться при присоединении компонента к UI. Если не указано, будет использоваться текущая дата.

Изменение свойства не применяется после того, как компонент прикреплен к UI.

-

initialDisplayMode

Устанавливает начальный режим отображения календаря, который будет показан после присоединения компонента к UI.

Изменение свойства не применяется после того, как компонент прикреплен к UI.

DAY_GRID_MONTH

moreLinkClassNames

Устанавливает CSS-классы, которые должны быть добавлены к ссылке "подробнее".

-

moreLinkDisplayMode

Устанавливает режим отображения календаря, который должен быть показан при нажатии на ссылку "подробнее".

-

moreLinkHint

Устанавливает подсказку для ссылки "подробнее". Предоставленный текст может быть строкой JavaScript-шаблона. Этот шаблон принимает параметр count типа Number, например:

setMoreLinkHint("Show ${count} more event${count === 1 ? '' : 's'}");

Он также принимает строковое определение функции JavaScript, которая принимает count в качестве параметра. Например:

setMoreLinkHint("function (count) { return `Show ${count} more event${count === 1 ? '' : 's'}`; }");

-

moreLinkText

Устанавливает текст ссылки "подробнее". Предоставленный текст может быть строкой JavaScript-шаблона. Этот шаблон принимает параметр count, например:

setMoreLinkText("+${count} event(s)");

Он также принимает строковое определение функции JavaScript, которая принимает count в качестве параметра. Например:

setMoreLinkText("function (count) { return `See +${count} event` + (count === 1 ? '' : 's'); }");

-

navLinkHint

Устанавливает подсказку для текста ссылок навигации. Предоставленный текст может быть строкой JavaScript-шаблона. Этот шаблон принимает параметр date типа String, например:

setNavLinkHint("Navigate to ${date}");

Он также принимает строковое определение функции JavaScript, которая принимает date в качестве параметра типа String. Например:

setNavLinkHint("function (date) { return `Navigate to ${date}`; }");

-

navigationLinksEnabled

Включает навигацию к дате с помощью названий дней и названий недель.

false

nextDayThreshold

Устанавливает минимальное время, которого должно достичь свойство endDateTime события, чтобы событие отображалось так, как будто оно находится в этот день.

Например, свойство установлено в 09:00:00. И есть событие с датами:

  • начало - 2024-09-01T20:00:00;

  • конец - 2024-09-02T02:00:00;

Таким образом, событие охватывает другой день, но оно будет отображаться как однодневное событие, поскольку свойство nextDayThreshold задано. Однако, если событие имеет конечную дату 2024-09-02T10:00:00, оно будет отображаться как двухдневное событие.

Влияет только на события, привязанные к времени, которые отображаются в ячейках "весь день". Ячейки "весь день" встречаются в режимах отображения day-grid и в слотах "весь день" в режимах отображения time-grid.

Обратите внимание, что это свойство игнорируется, когда свойство allDay события установлено в true.

-

noEventsText

Устанавливает текст, который будет отображаться, когда в режимах отображения list не отображаются никакие события.

-

nowIndicatorVisible

Включает отображение маркера, указывающего текущее время. Это свойство применяется в режимах отображения time-grid.

Изменение свойства не применяется после того, как компонент прикреплен к UI.

false

progressiveEventRendering

Включает отрисовку событий из поставщика данных сразу после загрузки событий.

  • true - отрисовывает каждый поставщик данных по мере его получения. Приведет к большему количеству отрисовок.

  • false - ожидает, пока все поставщики данных получат свои данные, а затем отрисовывает все сразу, что приводит к меньшему количеству отрисовок.

false

scrollTime

Устанавливает начальное положение прокрутки на определенное время. Пользователи смогут прокрутить назад, чтобы просмотреть события до этого времени. Если вы хотите запретить пользователям делать это, вместо этого используйте slotMinTime.

По умолчанию время прокрутки применяется к календарю всякий раз, когда изменяется диапазон дат. Чтобы отключить это, установите scrollTimeReset в false.

Изменение свойства не применяется после того, как компонент прикреплен к UI.

PT6h

scrollTimeReset

Устанавливает, должен ли календарь прокручиваться до scrollTime каждый раз, когда изменяется диапазон дат.

По умолчанию всякий раз, когда изменяется диапазон дат, как через методы календаря, так и через действия пользователя, прокрутка сбрасывается. Чтобы отключить это поведение, установите свойство в false.

true

selectConstraintBusinessHoursEnabled

Устанавливает, должно ли выделение полностью находиться в пределах рабочих часов недели. Также учитываются пользовательские рабочие часы.

Это свойство будет применено, если selectionEnabled включен.

false

selectConstraintGroupId

Устанавливает идентификатор группы, чтобы ограничить выделение. Если установлен идентификатор группы, можно выбирать только ячейки с событиями, которые содержат тот же идентификатор группы. Имеет приоритет над selectConstraintBusinessHoursEnabled.

Это свойство будет применено, если selectionEnabled включен.

selectLongPressDelay

Устанавливает время, в миллисекундах, которое пользователь должен удерживать, прежде чем станет возможным выбрать дату на сенсорных устройствах.

1000

selectMinDistance

Устанавливает минимальное расстояние, на которое мышь пользователя должна переместиться после нажатия, прежде чем будет разрешено выделение. Ненулевое значение полезно для различения выделения и события нажатия на дату.

Это свойство применимо только к взаимодействию с мышью. Для взаимодействия с сенсорным экраном смотрите selectLongPressDelay.

Изменение свойства не применяется после того, как компонент прикреплен к UI.

0

selectMirror

Включает рисование заполнителя события во время перетаскивания пользователем. Это свойство применяется к режимам отображения time-grid.

false

selectOverlap

Позволяет выбирать ячейки, содержащие события.

true

selectionEnabled

Позволяет пользователю выделять несколько дней или временных интервалов с помощью щелчка и перетаскивания.

false

slotDuration

Устанавливает интервал, с которым отображаются временные интервалы.

В определении компонента XML значение атрибута должно соответствовать формату продолжительности ISO-8601, который используется классом java.time.Duration.

PT30m

slotLabelInterval

Устанавливает частоту маркировки временных интервалов текстом. Если не указано, разумное значение будет автоматически вычислено на основе slotDuration.

При указании этого свойства задайте значение 1 час, это приведет к появлению заголовков на отметках времени, даже если slotDuration гипотетически составляет 15 или 30 минут.

В определении компонента XML значение атрибута должно соответствовать формату продолжительности ISO-8601, который используется классом java.time.Duration.

-

slotMaxTime

Устанавливает последний временной интервал, который будет отображаться для каждого дня. Указанное значение представляет исключительное время окончания, то есть временной интервал, заканчивающийся этим значением, не будет включен. Свойство определяет последний слот, даже когда полосы прокрутки прокручены до упора.

В определении компонента XML значение атрибута должно соответствовать формату продолжительности ISO-8601, который используется классом java.time.Duration.

PT24h

slotMinTime

Устанавливает первый временной интервал, который будет отображаться для каждого дня. Свойство определяет первый временной слот, даже когда полосы прокрутки прокручены до упора.

В определении компонента XML значение атрибута должно соответствовать формату продолжительности ISO-8601, который используется классом java.time.Duration.

PT0h

snapDuration

Устанавливает значение, которое определяет временной интервал, при котором перетаскиваемое событие будет привязываться к временной оси. Это также влияет на точность, с которой можно делать выделения.

В определении компонента XML значение атрибута должно соответствовать формату продолжительности ISO-8601, который используется классом java.time.Duration.

PT30m

timeHint

Устанавливает для невидимого заголовка таблицы в режимах отображения list название столбца с днями и временем.

-

unselectAuto

Устанавливает, очищается ли текущий выбор при щелчке в другом месте страницы. Работает только если selectionEnabled имеет значение true.

Изменение свойства не применяется после того, как компонент прикреплен к UI.

true

unselectCancelSelector

Устанавливает CSS-селектор, который будет игнорировать свойство unselectAuto. Например:

vaadin-form-layout .custom-text-input

Изменение свойства не применяется после того, как компонент прикреплен к UI.

-

weekNumbersVisible

Устанавливает, должны ли номера недель отображаться в календаре.

false

weekTextLong

Длинное название недели.

-

weekendsVisible

Устанавливает, включать ли столбцы субботы и воскресенья в любой из режимов отображения календаря.

true

windowResizeDelay

Устанавливает задержку, в миллисекундах, которую календарь будет ждать, прежде чем корректировать свой размер после изменения размера окна.

100

Обработчики

В Jmix есть много общих обработчиков, которые настраиваются одинаково для всех компонентов. Ниже приведены обработчики, специфичные для календаря:

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N).
Название Описание

DateClickEvent

io.jmix.fullcalendarflowui.component.event.DateClickEvent отправляется, когда нажимается ячейка дня или ячейка времени.

DatesSetEvent

io.jmix.fullcalendarflowui.component.event.DatesSetEvent отправляется после того, как диапазон дат календаря был первоначально установлен или изменен каким-либо образом, и DOM компонента был обновлен.

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

  • переходит к следующей и предыдущей;

  • переключает режим отображения;

  • нажимает на ссылку навигации (например, "неделя" или "день", если navigationLinksEnabled равно true).

Даты также могут измениться, когда текущая дата изменяется через API.

DayNavigationLinkClickEvent

Отправляется, когда пользователь нажимает на ссылку навигации заголовка дня. Ссылка навигации может быть активирована свойствомFired navigationLinksEnabled.

EventClickEvent

io.jmix.fullcalendarflowui.component.event.EventClickEvent отправляется, когда происходит нажатие на событие календаря.

EventDropEvent

io.jmix.fullcalendarflowui.component.event.EventDropEvent отправляется, когда перетаскивание останавливается, и событие было перемещено в другой день или временной интервал.

EventMouseEnterEvent

io.jmix.fullcalendarflowui.component.event.EventMouseEnterEvent вызывается, когда пользователь наводит мышь на событие календаря.

EventMouseLeaveEvent

io.jmix.fullcalendarflowui.component.event.EventMouseLeaveEvent вызывается, когда пользователь уводит мышь с события календаря.

EventResizeEvent

io.jmix.fullcalendarflowui.component.event.EventResizeEvent вызывается, когда завершается изменение размера, и длительность события календаря изменяется.

MoreLinkClickEvent

io.jmix.fullcalendarflowui.component.event.MoreLinkClickEvent вызывается, когда пользователь нажимает на ссылку «more». Ссылку «more» можно активировать с помощью следующих свойств:

SelectEvent

io.jmix.fullcalendarflowui.component.event.SelectEvent вызывается при выделении даты или времени.

Режим выделения можно включить с помощью свойства selectionEnabled.

UnselectEvent

io.jmix.fullcalendarflowui.component.event.UnselectEvent вызывается, когда текущее выделение очищается. Выделение может быть очищено по нескольким причинам:

  • Пользователь щелкает мышью вне текущего выделения (не происходит, когда unselectAuto отключен).

  • Пользователь делает новый выделение. Событие отмены выделения будет вызвано до того, как произойдет новое выделение.

  • Пользователь переходит вперед или назад в текущем режиме отображения календаря или переключается в другой режим.

  • Вызывается метод unselect().

WeekNavigationLinkClickEvent

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

Навигационную ссылку можно активировать с помощью свойства navigationLinksEnabled.

dayCellBottomText- ClassNamesGenerator

Генерирует имена классов CSS для нижнего текста ячейки дня.

Обратите внимание, что генератор будет вызван только в том случае, если нижний текст ячейки не равен null.

dayCellBottomTextGenerator

Генерирует нижний текст для ячеек дня. Применяется только для режимов отображения day-grid month и year.

Обратите внимание, что в некоторых случаях события в ячейке могут перекрывать текст внизу. Чтобы избежать этого, рекомендуется ограничить видимое количество событий. Например, можно использовать свойство dayMaxEvents.

dayCellClassNamesGenerator

Генерирует имена классов CSS для ячеек дня. Ячейка дня отображается в режиме отображения day-grid и time-grid как ячейка на весь день.

dayHeaderClassNamesGenerator

Генерирует имена классов CSS для заголовков дня. Заголовок дня - это ячейка, которая показывает день недели и дату в некоторых режимах отображения.

moreLinkClassNamesGenerator

Генерирует имена классов CSS для ссылки «more».

Генератор имеет приоритет над другими методами, которые устанавливают имена классов CSS.

nowIndicatorClassNamesGenerator

Генерирует имена классов CSS для индикатора «сейчас». Индикатор «сейчас» состоит из двух частей: линии и оси.

Индикатор «сейчас» можно включить с помощью свойства nowIndicatorVisible.

slotLabelClassNamesGenerator

Генерирует имена классов CSS для метки слота, которая отображается как ячейка с меткой времени в режимах отображения time-grid.

Элементы

Элементы календаря предоставляют широкий спектр опций для управления внешним видом, поведением, форматированием, привязкой данных и другими функциями.

Чтобы добавить элемент в выбранный компонент, нажмите кнопку Add на панели инспектора Jmix UI.

businessHours

businessHours - это групповой элемент, который содержит записи рабочего времени.

XML-элемент

businessHours

Элементы

entry

entry

Определение рабочего времени.

XML-элемент

entry

Элементы

day
Атрибуты

Название

Описание

Значение по умолчанию

endTime

Конечное время рабочего времени. Значение времени должно быть в формате продолжительности ISO-8601, который используется классом java.time.Duration. Например:

  • "P9h" - 9 часов.

  • "PT18h30m" - 18 часов и 30 минут.

-

startTime

Начало рабочего времени. Значение времени должно быть в формате продолжительности ISO-8601, который используется классом java.time.Duration. Например:

  • "P9h" - 9 часов.

  • "PT18h30m" - 18 часов и 30 минут.

-

customDisplayModes

customDisplayModes - групповой элемент, содержащий определения настраиваемых режимов отображения, которые может использовать компонент.

XML-элемент

customDisplayModes

Элементы

displayMode

displayMode

Определение настраиваемого режима отображения.

XML-элемент

displayMode

Элементы

duration - properties
Атрибуты

Название

Описание

Значение по умолчанию

id

Обязательный атрибут. Идентификатор можно использовать для установки в качестве начального или текущего режима отображения.

-

type

Тип, на котором будет основан настраиваемый режим отображения. Подробнее смотрите Пользовательский режим отображения календаря.

DAY_GRID

dayCount

Точное количество дней, отображаемых в настраиваемом режиме отображения.

-

duration

Описывает продолжительность настраиваемого режима отображения календаря.

XML-элемент

duration

Элементы

-
Атрибуты

Название

Описание

Значение по умолчанию

days

Устанавливает дни для продолжительности.

0

hours

Устанавливает часы для продолжительности.

0

milliseconds

Устанавливает миллисекунды для продолжительности.

0

minutes

Устанавливает минуты для продолжительности.

0

months

Устанавливает месяцы для продолжительности.

0

seconds

Устанавливает секунды для продолжительности.

0

weeks

Устанавливает недели для продолжительности.

0

years

Устанавливает годы для продолжительности.

0

dataProviders

dataProviders - это групповой элемент, содержащий определения поставщиков данных, используемых компонентом.

XML-элемент

dataProviders

Элементы

containerDataProvider - callbackDataProvider

containerDataProvider

containerDataProvider - это поставщик данных, который связывается с контейнерами данных. Он содержит атрибуты для сопоставления свойств сущности событию в календаре.

XML-элемент

containerDataProvider

Элементы

-
Атрибуты

Название

Описание

Значение по умолчанию

id

Идентификатор поставщика данных.

-

dataContainer

Идентификатор контейнера данных, который определен в том же экране. Атрибут обязателен.

-

additionalProperties

Дополнительные свойства из сущности. Свойства должны быть разделены запятой или пробелом.

Смотрите additionalProperties события календаря.

-

allDay

Свойство allDay в сущности.

Смотрите allDay события календаря.

-

backgroundColor

Свойство backgroundColor в сущности.

Смотрите backgroundColor события календаря.

-

borderColor

Свойство borderColor в сущности.

Смотрите borderColor события календаря.

-

classNames

Свойство classNames в сущности. Обратите внимание, что сущность должна содержать строковое значение с именами классов, разделенными пробелом.

Смотрите classNames события календаря.

-

constraint

Свойство constraint в сущности.

Смотрите constraint события календаря.

-

description

Свойство description в сущности.

Смотрите description события календаря.

-

display

Свойство display в сущности.

Смотрите display события календаря.

-

durationEditable

Свойство durationEditable в сущности.

Смотрите durationEditable события календаря.

-

endDateTime

Свойство endDateTime в сущности.

Смотрите endDateTime события календаря.

-

groupId

Свойство groupId в сущности.

Смотрите groupId события календаря.

-

interactive

Свойство interactive в сущности.

Смотрите interactive события календаря.

-

overlap

Свойство overlap в сущности.

Смотрите overlap события календаря.

-

recurringDaysOfWeek

Свойство recurringDaysOfWeek в сущности.

Смотрите recurringDaysOfWeek события календаря.

-

recurringEndDate

Свойство recurringEndDate в сущности.

Смотрите recurringEndDate события календаря.

-

recurringEndTime

Свойство recurringEndTime в сущности.

Смотрите recurringEndTime события календаря.

-

recurringStartDate

Свойство recurringStartDate в сущности.

Смотрите recurringStartDate события календаря.

-

recurringStartTime

Свойство recurringStartTime в сущности.

Смотрите recurringStartTime события календаря.

-

startDateTime

Свойство startDateTime в сущности.

Смотрите startDateTime события календаря.

-

startEditable

Свойство startEditable в сущности.

Смотрите startEditable события календаря.

-

textColor

Свойство textColor в сущности.

Смотрите textColor события календаря.

-

title

Свойство title в сущности.

Смотрите title события календаря.

-

callbackDataProvider

callbackDataProvider - это поставщик данных, который загружает сущности с помощью запроса JPQL или делегата загрузки. Он содержит атрибуты для сопоставления свойств сущности событию в календаре.

XML-элемент

callbackDataProvider

Элементы

itemsQuery
Атрибуты

Название

Описание

Значение по умолчанию

id

Идентификатор поставщика данных.

-

additionalProperties

Дополнительные свойства из сущности. Свойства должны быть разделены запятой или пробелом.

Смотрите additionalProperties события календаря.

-

allDay

Свойство allDay в сущности.

Смотрите allDay события календаря.

-

backgroundColor

Свойство backgroundColor в сущности.

Смотрите backgroundColor события календаря.

-

borderColor

Свойство borderColor в сущности.

Смотрите borderColor события календаря.

-

classNames

Свойство classNames в сущности. Обратите внимание, что сущность должна содержать строковое значение с именами классов, разделенными пробелом.

Смотрите classNames события календаря.

-

constraint

Свойство constraint в сущности.

Смотрите constraint события календаря.

-

description

Свойство description в сущности.

Смотрите description события календаря.

-

display

Свойство display в сущности.

Смотрите display события календаря.

-

durationEditable

Свойство durationEditable в сущности.

Смотрите durationEditable события календаря.

-

endDateTime

Свойство endDateTime в сущности.

Смотрите endDateTime события календаря.

-

groupId

Свойство groupId в сущности.

Смотрите groupId события календаря.

-

interactive

Свойство interactive в сущности.

Смотрите interactive события календаря.

-

overlap

Свойство overlap в сущности.

Смотрите overlap события календаря.

-

recurringDaysOfWeek

Свойство recurringDaysOfWeek в сущности.

Смотрите recurringDaysOfWeek события календаря.

-

recurringEndDate

Свойство recurringEndDate в сущности.

Смотрите recurringEndDate события календаря.

-

recurringEndTime

Свойство recurringEndTime в сущности.

Смотрите recurringEndTime события календаря.

-

recurringStartDate

Свойство recurringStartDate в сущности.

Смотрите recurringStartDate события календаря.

-

recurringStartTime

Свойство recurringStartTime в сущности.

Смотрите recurringStartTime события календаря.

-

startDateTime

Свойство startDateTime в сущности.

Смотрите startDateTime события календаря.

-

startEditable

Свойство startEditable в сущности.

Смотрите startEditable события календаря.

-

textColor

Свойство textColor в сущности.

Смотрите textColor события календаря.

-

title

Свойство title в сущности.

Смотрите title события календаря.

-
Обработчики

Название

Описание

LoadDelegate

Задает делегата загрузки, который будет использоваться для загрузки событий.

itemsQuery

Элемент itemsQuery описывает запрос JPQL для загрузки сущностей.

XML-элемент

itemsQuery

Элементы

-
Атрибуты

Название

Описание

Значение по умолчанию

class

Полностью определенное имя класса сущности.

-

fetchPlan

План выборки, который должен использоваться для загрузки графа сущностей.

-

query

Запрос JPQL.

-

displayModeProperties

displayModeProperties - это групповой элемент, содержащий все предопределенные элементы режима отображения для настройки их свойств.

XML-элемент

displayModeProperties

Элементы

dayGridDay - dayGridWeek - dayGridMonth - dayGridYear - timeGridDay - timeGridWeek - listDay - listWeek - listMonth - listYear - multiMonthYear -

dayGridDay

Свойства режима отображения dayGridDay.

XML-элемент

dayGridDay

Элементы

properties
Атрибуты

Название

Описание

Значение по умолчанию

dayHeaderFormat

Задает формат заголовка дня специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayHeaderFormat.

-

dayPopoverFormat

Задает формат всплывающей подсказки специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayPopoverFormat.

-

displayEventEnd

Определяет видимость времени окончания события.

true

eventTimeFormat

Задает формат времени события специально для этого режима отображения. Правила форматирования такие же, как и для defaultEventTimeFormat.

-

weekNumberFormat

Задает формат недели специально для этого режима отображения. Правила форматирования такие же, как и для defaultWeekNumberFormat.

-

dayGridWeek

Свойства режима отображения dayGridWeek.

XML-элемент

dayGridWeek

Элементы

properties
Атрибуты

Название

Описание

Значение по умолчанию

dayHeaderFormat

Задает формат заголовка дня специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayHeaderFormat.

-

dayPopoverFormat

Задает формат всплывающей подсказки специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayPopoverFormat.

-

displayEventEnd

Определяет видимость времени окончания события.

false

eventTimeFormat

Задает формат времени события специально для этого режима отображения. Правила форматирования такие же, как и для defaultEventTimeFormat.

-

weekNumberFormat

Задает формат недели специально для этого режима отображения. Правила форматирования такие же, как и для defaultWeekNumberFormat.

-

dayGridMonth

Свойства режима отображения dayGridMonth.

XML-элемент

dayGridMonth

Элементы

properties
Атрибуты

Название

Описание

Значение по умолчанию

dayHeaderFormat

Задает формат заголовка дня специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayHeaderFormat.

-

dayPopoverFormat

Задает формат всплывающей подсказки специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayPopoverFormat.

-

displayEventEnd

Определяет видимость времени окончания события.

false

eventTimeFormat

Задает формат времени события специально для этого режима отображения. Правила форматирования такие же, как и для defaultEventTimeFormat.

-

fixedWeekCount

Определяет количество отображаемых недель. Если true, календарь всегда будет высотой в 6 недель. Если false, в календаре будет 4, 5 или 6 недель в зависимости от месяца.

true

showNonCurrentDates

Определяет отображение дат из предыдущего и следующего месяцев.

true

weekNumberFormat

Задает формат недели специально для этого режима отображения. Правила форматирования такие же, как и для defaultWeekNumberFormat.

-

dayGridYear

Свойства режима отображения dayGridYear.

XML-элемент

dayGridYear

Элементы

properties
Атрибуты

Название

Описание

Значение по умолчанию

dayHeaderFormat

Задает формат заголовка дня специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayHeaderFormat.

-

dayPopoverFormat

Задает формат всплывающей подсказки специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayPopoverFormat.

-

displayEventEnd

Определяет видимость времени окончания события.

false

eventTimeFormat

Задает формат времени события специально для этого режима отображения. Правила форматирования такие же, как и для defaultEventTimeFormat.

-

monthStartFormat

Задает формат текстового формата для первой ячейки каждого месяца. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Поскольку компонент использует плагин moment для FullCalendar, мы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, «MMMM» дает сентябрь (ноябрь, декабрь и т. д.).

-

weekNumberFormat

Задает формат недели специально для этого режима отображения. Правила форматирования такие же, как и для defaultWeekNumberFormat.

-

timeGridDay

Свойства режима отображения timeGridDay.

XML-элемент

timeGridDay

Элементы

properties
Атрибуты

Название

Описание

Значение по умолчанию

allDaySlotVisible

Определяет, отображаются ли ячейки на весь день в верхней части календаря.

true

dayHeaderFormat

Задает формат заголовка дня специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayHeaderFormat.

-

dayPopoverFormat

Задает формат всплывающей подсказки специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayPopoverFormat.

-

displayEventEnd

Определяет видимость времени окончания события.

true

eventMinHeight

Устанавливает минимальную высоту, которую может иметь событие.

15

eventShortHeight

Устанавливает пороговое значение высоты для события со стилем «короткий».

-

eventTimeFormat

Задает формат времени события специально для этого режима отображения. Правила форматирования такие же, как и для defaultEventTimeFormat.

-

slotEventOverlap

Определяет, должны ли события с отметками времени визуально перекрывать друг друга.

true

slotLabelFormat

Задает формат меток слотов специально для этого режима отображения. Правила форматирования такие же, как и для defaultSlotLabelFormat.

-

weekNumberFormat

Задает формат недели специально для этого режима отображения. Правила форматирования такие же, как и для defaultWeekNumberFormat.

-

timeGridWeek

Свойства режима отображения timeGridWeek.

XML-элемент

timeGridWeek

Элементы

properties
Атрибуты

Название

Описание

Значение по умолчанию

allDaySlotVisible

Определяет, отображаются ли ячейки на весь день в верхней части календаря.

true

dayHeaderFormat

Задает формат заголовка дня специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayHeaderFormat.

-

dayPopoverFormat

Задает формат всплывающей подсказки специально для этого режима отображения. Правила форматирования такие же, как и для defaultDayPopoverFormat.

-

displayEventEnd

Определяет видимость времени окончания события.

true

eventMinHeight

Устанавливает минимальную высоту, которую может иметь событие.

15

eventShortHeight

Устанавливает пороговое значение высоты для события со стилем «короткий».

-

eventTimeFormat

Задает формат времени события специально для этого режима отображения. Правила форматирования такие же, как и для defaultEventTimeFormat.

-

slotEventOverlap

Определяет, должны ли события с отметками времени визуально перекрывать друг друга.

true

slotLabelFormat

Задает формат меток слотов специально для этого режима отображения. Правила форматирования такие же, как и для defaultSlotLabelFormat.

-

weekNumberFormat

Задает формат недели специально для этого режима отображения. Правила форматирования такие же, как и для defaultWeekNumberFormat.

-

listDay

Свойства режима отображения listDay.

XML-элемент

listDay

Элементы

properties
Атрибуты

Название

Описание

Значение по умолчанию

listDayFormat

Задает формат текста в левой части заголовков дня. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Поскольку компонент использует плагин moment для FullCalendar, мы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, «dd» дает пн (понедельник).

-

listDaySideFormat

Задает формат текста в правой части заголовков дня. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Поскольку компонент использует плагин moment для FullCalendar, мы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, «dd» дает пн (понедельник).

-

listDaySideVisible

Задает видимость текста в правой части заголовков дня.

true

listDayVisible

Задает видимость текста в левой части заголовков дня.

true

listWeek

Свойства режима отображения listWeek.

XML-элемент

listWeek

Элементы

properties
Атрибуты

Название

Описание

Значение по умолчанию

listDayFormat

Задает формат текста в левой части заголовков дня. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Поскольку компонент использует плагин moment для FullCalendar, мы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, «dd» дает пн (понедельник).

-

listDaySideFormat

Задает формат текста в правой части заголовков дня. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Поскольку компонент использует плагин moment для FullCalendar, мы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, «dd» дает пн (понедельник).

-

listDaySideVisible

Задает видимость текста в правой части заголовков дня.

true

listDayVisible

Задает видимость текста в левой части заголовков дня.

true

listMonth

Свойства режима отображения listMonth.

XML-элемент

listMonth

Элементы

properties
Атрибуты

Название

Описание

Значение по умолчанию

listDayFormat

Задает формат текста в левой части заголовков дня. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Поскольку компонент использует плагин moment для FullCalendar, мы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, «dd» дает пн (понедельник).

-

listDaySideFormat

Задает формат текста в правой части заголовков дня. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Поскольку компонент использует плагин moment для FullCalendar, мы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, «dd» дает пн (понедельник).

-

listDaySideVisible

Задает видимость текста в правой части заголовков дня.

true

listDayVisible

Задает видимость текста в левой части заголовков дня.

true

listYear

Свойства режима отображения listYear.

XML-элемент

listYear

Элементы

properties
Атрибуты

Название

Описание

Значение по умолчанию

listDayFormat

Задает формат текста в левой части заголовков дня. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Поскольку компонент использует плагин moment для FullCalendar, мы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, «dd» дает пн (понедельник).

-

listDaySideFormat

Задает формат текста в правой части заголовков дня. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Поскольку компонент использует плагин moment для FullCalendar, мы должны следовать правилам форматирования moment.js: Документация Moment.js. Например, «dd» дает пн (понедельник).

-

listDaySideVisible

Задает видимость текста в правой части заголовков дня.

true

listDayVisible

Задает видимость текста в левой части заголовков дня.

true

multiMonthYear

Свойства режима отображения multiMonthYear.

XML-элемент

multiMonthYear

Элементы

properties
Атрибуты

Название

Описание

Значение по умолчанию

fixedWeekCount

Определяет количество отображаемых недель. Если true, календарь всегда будет высотой в 6 недель. Если false, в календаре будет 4, 5 или 6 недель в зависимости от месяца.

true

multiMonthMaxColumns

Задает максимальное количество столбцов месяцев, которые режим отображения попытается отобразить.

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

3

multiMonthMinWidth

Задает минимальную ширину каждого мини-месяца. Компонент не позволит мини-месяцу стать меньше этого значения.

Если доступная ширина требует, чтобы каждый мини-месяц стал меньше этого значения в пикселях, мини-месяцы будут переноситься на последующие строки.

350

multiMonthTitleFormat

Задает формат текста над каждым месяцем. По умолчанию компонент устанавливает локализованный формат из сообщений при создании.

Поскольку компонент использует плагин moment для FullCalendar, следует придерживаться правил форматирования moment.js: Документация Moment.js. Например, "MMM" дает Сен (Ноя, …).

showNonCurrentDates

Определяет отображение дат из предыдущих и последующих месяцев.

true

hiddenDays

hiddenDays - это групповой элемент, содержащий дни недели, которые должны быть скрыты в компоненте FullCalendar.

XML-элемент

hiddenDays

Элементы

day

properties

Групповой элемент для свойств FullCalendar.js.

XML-элемент

properties

Элементы

property

property

Определение свойства FullCalendar.js.

XML-элемент

property

Элементы

-
Атрибуты

Название

Описание

Значение по умолчанию

name

Название свойства.

-

value

Значение свойства.

-

day

Элемент day представляет день недели.

XML-элемент

day

Элементы

-
Атрибуты

Название

Описание

Значение по умолчанию

name

Название дня недели, например, ПОНЕДЕЛЬНИК, ВТОРНИК и другие дни.

-

Смотрите также

Смотрите Документацию FullCalendar для получения дополнительной информации.