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

您遇到的问题非常简单 - 当视图或日期范围发生变化时，fullCalendar不会保留您的活动。

renderEvent方法（https://fullcalendar.io/docs/renderEvent）有第三个可选参数“stick”，默认为false。文档说明

通常，一旦日历重新获取其事件源，事件将消失（例如：单击prev / next时）。但是，将stick指定为true将导致事件永久固定到日历。

换句话说，因为您的示例事件是在12月，并且可能是您的日历最初显示的是当前月份（撰写本文时的3月），当您尝试导航到12月时，每次按下“下一个”导致事件源刷新，手动插入的事件很多。

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

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

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

P.S。您可以使代码更有效。例如，您可以使用“renderEvents”（https://fullcalendar.io/docs/renderEvents）将其全部添加到日历中，而不是循环遍历events：

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

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

ap-angular2-fullcalendar＆amp;外部API

1 个答案: