gpt4 book ai didi

javascript - ap-angular2-fullcalendar 和外部 API

转载 作者:行者123 更新时间:2023-12-03 02:20:42 25 4
gpt4 key购买 nike

我想将 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 格式的名称和生日的对象

我的代码有什么问题吗?

最佳答案

您遇到的问题非常简单 - 当 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-feedhttps://fullcalendar.io/docs/events-function )。后两者还具有以下优点:在 View 和日期之间导航时,日历会从远程数据源动态更新自身。

关于javascript - ap-angular2-fullcalendar 和外部 API,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49176199/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com