我已经在 Angular 应用程序中实现了 FullCalendar,并在完整日历中绑定了一些事件。我需要在按钮单击时使用新数据更新日历事件并显示 Day1、Day2、Day3... 代替 Mon、Tues、Wed... 所以我已成功设置 Day1、Day2... 代替 Mon,星期二...关于ngAfterViewInit()
角度事件。但是日历日期点击事件在那之后不起作用,它也没有用新数据更新日历事件
全日历html代码:
<full-calendar #calendar defaultView="dayGridMonth" [header]="{
left: 'title',
right: 'prev,next today'
}" [plugins]="calendarPlugins" [weekends]="calendarWeekends" [events]="eventswithcount"
(dateClick)="redirectToNext($event)" (dayRender)="dayRendered($event)" (eventClick)="redirectToNext($event)"
[showNonCurrentDates]="false" [defaultDate]="this.date" [fixedWeekCount]="false"></full-calendar>
全日历 ts 代码:
@ViewChild('calendar') calendarComponent: FullCalendarComponent = <FullCalendarComponent>{}; // the #calendar in the template
ngAfterViewInit() {
if (!this.viewFlag)//for stp to show Day 1 in behalf of sunday
{
let calendarApi = this.calendarComponent.getApi();
if (calendarApi != undefined) {
calendarApi.el.innerHTML=calendarApi.el.innerHTML.replace('<span>Sun</span>','<span>Day 1</span>');
calendarApi.el.innerHTML=calendarApi.el.innerHTML.replace('<span>Mon</span>','<span>Day 2</span>');
calendarApi.el.innerHTML=calendarApi.el.innerHTML.replace('<span>Tue</span>','<span>Day 3</span>');
calendarApi.el.innerHTML=calendarApi.el.innerHTML.replace('<span>Wed</span>','<span>Day 4</span>');
calendarApi.el.innerHTML=calendarApi.el.innerHTML.replace('<span>Thu</span>','<span>Day 5</span>');
calendarApi.el.innerHTML=calendarApi.el.innerHTML.replace('<span>Fri</span>','<span>Day 6</span>');
calendarApi.el.innerHTML=calendarApi.el.innerHTML.replace('<span>Sat</span>','<span>Day 7</span>');
}
}
}
redirectToNext(event: any) {
let eventDate = event.date != undefined ? event.date : event.event.start;
let datestr = moment(eventDate).format('YYYY-MM-DD');
if (eventDate.getMonth() + 1 == this.date.split('-')[1]) {
this.dateClick.emit(datestr);
}
}
可能是什么问题?