FullCalendar：仅在当前视图的列表视图中显示事件

Question

我正在使用 FullCalendar v4 并尝试在自定义列表视图中显示仅适用于当前视图的所有事件。

意义上的当前视图，比方说，如果我在 'dayGridMonth' 视图中，我需要获取当前整个月的事件。同样，如果我在 'timeGridWeek' 视图中，我需要获取当前活动的整个星期的事件。

我正在使用 FullCalendar Angular 插件，我已经使用 getEvents() 方法尝试了以下代码。

let CalendarApi = this.calendar.getApi();
let events = CalendarApi.getEvents()

console.log(events);

使用这种方式，无论我在哪个视图中，FullCalendar 都会显示所有事件。我想要一种类似于延迟加载的方式，其中只为当前视图（时间段）加载事件。

Answer 1

尝试使用

eventRender(event){}

它将在当前视图中呈现事件

Answer 2

我认为您需要执行一些步骤：

1) 识别视图的变化（例如单击按钮 'month' 或 'week'）。

2) 在更改视图时，您擦除或插入您想要用于该视图的事件列表。

如何在代码上执行这些步骤：

1) 在组件中，放置一个 return 视图的回调：

<full-calendar (viewSkeletonRender)="handleViewRender($event)"></full-calendar>

在您的代码中，创建方法 'handleViewRender':

handleViewRender($event) {
   if ($event.view.viewSpec.buttonTextDefault === 'month') {
       // step 2 here, change the list of events for month view
   } else if ($event.view.viewSpec.buttonTextDefault === 'week') {
       // step 2 here, change the list of events for week view
   }

   alert($event.view.viewSpec.buttonTextDefault );
}

我想您已经知道如何在日历中放置事件列表，如果不知道，也很容易找到...所以我不会将代码放在这里。

有关日历事件的官方文档，大部分代码在jQuery中： https://fullcalendar.io/docs/event-object

关于 viewSkeletonRender 的官方文档，这个文档太差了。 https://fullcalendar.io/docs/viewSkeletonRender

希望对您有所帮助。

FullCalendar：仅在当前视图的列表视图中显示事件

FullCalendar: Display events in a listview only for the current view

javascript

fullcalendar

angular

fullcalendar-4