javascript - ap-angular2-fullcalendar 和外部 API

Question

我想将 ap-angular2-fullcalendar 添加到我的应用程序中。我的用户的生日和其他事件应该显示在日历中。这是我的模板:

<angular2-fullcalendar *ngIf="isInitialized; else loadingTemplate"
                       #calendar
                       id="calendar"
                       (onDateChanged)="onDateChanged($event)"
                       [options]="calendarOptions">
</angular2-fullcalendar>

然后，我尝试在组件中添加事件，如下所示:

ngOnInit() {
    let e = this.memberService.members$;
    e.subscribe((members: IMember[]) => {
    this.loadBirthdays(members).then((events: ICalendarEvent[]) =>      
       this.setEvents(events));
    });
 }

loadBirthdays(members: IMember[]): Promise<ICalendarEvent[]> {
   let years = [];
   years.push(moment().subtract('1', 'year').format('YYYY'));
   years.push(moment().format('YYYY'));
   years.push(moment().add('1', 'year').format('YYYY'));

   members.forEach((member: IMember) => {
      if (member.mainData.birthday) {
         for (let i in years) {
            let event: ICalendarEvent = {
               title: 'Birthday ' + member.firstName + ' ' + member.lastName,
               start: moment(member.birthday).set('year', years[i]).format('YYYY-MM-DD')
            };
            this.events.push(event);
         }
      }
   });
   return Promise.resolve(this.events);
 }

 setEvents(events: ICalendarEvent[]) {
    const cal = $('calendar');
    if (events && events.length > 0) {
       events.forEach(el => {
          cal.fullCalendar('renderEvent', el);
       });
       cal.fullCalendar('rerenderEvents');
    }
    this.isInitialized = true;
 }

当我现在尝试打开日历时，不会显示任何事件，也不会显示任何错误。当我在 foreach 中为“el”执行 console.log 时，我得到一个具有 YYYY-MM-DD 格式的名称和生日的对象

我的代码有什么问题吗？

Answer 1

您遇到的问题非常简单 - 当 View 或日期范围更改时，fullCalendar 不会保留您的事件。

renderEvent 方法 ( https://fullcalendar.io/docs/renderEvent ) 有第三个可选参数“stick”，默认情况下为 false。文档指出

Normally, the event will disappear once the calendar refetches its event sources (example: when prev/next is clicked). However, specifying stick as true will cause the event to be permanently fixed to the calendar.

换句话说，由于您的示例事件是在 12 月，并且您的日历最初显示的是当月(撰写本文时为 3 月)，因此当您尝试导航到 12 月时，每次按“下一个”导致事件源被刷新，而你手动插入的事件很多。

您需要做的就是将 renderEvent 行更改为此，以将“stick”选项设置为 true:

call.fullCalendar('renderEvent', el, true);

您也不应该根本不需要 cal.fullCalendar('rerenderEvents');，这可以删除。

<小时/>

附注您也许可以使您的代码更加高效。例如，您可以使用“renderEvents”( https://fullcalendar.io/docs/renderEvents ) 将它们一次性添加到日历中，而不是循环访问事件:

if (events && events.length > 0) {
  cal.fullCalendar('renderEvents', events, true);
}

您可能还需要考虑是否需要使用 renderEvent(s) - 在日历上设置事件的更常见方法是使用日历初始化选项中的 events 选项。您可以将其设置为事件对象的静态数组 ( https://fullcalendar.io/docs/events-array )，或者来自 URL 的 JSON 或其他自定义提要 ( https://fullcalendar.io/docs/events-json-feed 或 https://fullcalendar.io/docs/events-function )。后两者还具有以下优点:在 View 和日期之间导航时，日历会从远程数据源动态更新自身。