FullCalendar 组件

<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>

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

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

<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>

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

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

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

<calendar:callbackDataProvider title="title"
                               startDateTime="startDate"
                               endDateTime="endDate">
    <calendar:itemsQuery class="com.company.fullcalendarsample.entity.Event"/>
</calendar: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>

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

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

<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>

<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>

<calendar:displayMode id="timeGridThreeDays" type="TIME_GRID">
    <calendar:duration days="3"/>
</calendar:displayMode>

@ViewComponent
private FullCalendar calendar;

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

    calendar.setInitialCalendarDisplayMode(() -> "dayGridTwoDays");
}

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

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.setVisibleRange(
            LocalDate.now(), LocalDate.now().plusDays(3));
}

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

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

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.setEventOverlapJsFunction(new JsFunction("""
            function(stillEvent, movingEvent) {
                return stillEvent.allDay && movingEvent.allDay;
            }"""));
}

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

@Autowired
private Notifications notifications;

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

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.setSelectOverlapJsFunction(new JsFunction("""
            function(event) {
                return event.display === 'background';
            }"""));
}

@ViewComponent
private FullCalendar calendar;

@Subscribe
public void onInit(final InitEvent event) {
    calendar.select(LocalDate.now(), LocalDate.now().plusDays(2));
}

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

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

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

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

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

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

.fc-col-header-cell.weekend a {
    color: var(--lumo-primary-color)
}