英文:
FullCalendar: Display events in a listview only for the current view
问题
我正在使用FullCalendar v4，并尝试在自定义列表视图中仅显示当前视图中可用的所有事件。
当前视图的意思是，假设我处于'dayGridMonth'视图中，我需要获取当前整个月份的事件。同样，如果我处于'timeGridWeek'视图中，我需要获取当前活动的整个周的事件。
我正在使用FullCalendar Angular插件，并尝试使用getEvents()方法的以下代码。
let CalendarApi = this.calendar.getApi();
let events = CalendarApi.getEvents()
console.log(events);
使用这种方式，FullCalendar会显示无论我处于哪个视图中的所有事件。我希望像懒加载一样，仅为当前视图（时间段）加载事件。
英文:
I'm using FullCalendar v4 and trying to display all the events which are available only for the current view in a custom list view.
Current view in the sense, let's say if I'm in 'dayGridMonth' view, I need get the events for the entire month which is currently on. Likewise if I'm in 'timeGridWeek' view, I need to get the events for the entire week which is currently active.
I'm using FullCalendar Angular plugin and I have tried the following code using getEvents() method.
let CalendarApi = this.calendar.getApi();
let events = CalendarApi.getEvents()
console.log(events);
Using this way, FullCalendar displays all the events no matter what view I'm in. I want something like a lazy loading way where the events are loaded only for the current view (time period).
答案1
得分: 1
尝试使用
eventRender(event){}
它将在当前视图中渲染事件。
英文:
Try using
eventRender(event){}
It will render events in current view
答案2
得分: 0
- 识别视图的更改（例如，点击按钮'月'或'周'）。
- 在视图更改时，您可以擦除或插入您想要的事件列表。
如何在代码中执行这些步骤：
在组件中，添加一个返回视图的回调函数：
<full-calendar (viewSkeletonRender)="handleViewRender($event)"></full-calendar>
在您的代码中，创建方法'handleViewRender'：
handleViewRender($event) {
if ($event.view.viewSpec.buttonTextDefault === 'month') {
// 步骤2在这里，更改月视图的事件列表
} else if ($event.view.viewSpec.buttonTextDefault === 'week') {
// 步骤2在这里，更改周视图的事件列表
}
alert($event.view.viewSpec.buttonTextDefault);
}
我认为您已经知道如何将事件列表添加到日历中，如果不知道，可以轻松找到...所以我不会在这里提供代码。
有关日历事件的官方文档，大部分代码使用jQuery编写：
https://fullcalendar.io/docs/event-object
有关viewSkeletonRender的官方文档，这个文档很简单。
https://fullcalendar.io/docs/viewSkeletonRender
希望对您有所帮助。
英文:
I think you need to do some steps:
-
Identify the change of view (click at button 'month' or 'week' for example).
-
On change of view, you erase ou insert the list of events you want for that view.
How to do these steps on code:
1)
At the component, put a callback that return the view:
<full-calendar (viewSkeletonRender)="handleViewRender($event)"></full-calendar>
At your code, create the method '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 );
}
I think you already know how to put a list of events at the calendar, and if not, is so simple to find... so i will not put the code here.
Official doc about events on calendar, most of code is in jQuery:
https://fullcalendar.io/docs/event-object
Official doc about viewSkeletonRender, this doc is so poor.
https://fullcalendar.io/docs/viewSkeletonRender
I hope it helps.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论