Javascript FullCalendar angular 10初始视图不工作
我使用的是角度10和全日历5.3.1。 由于某些原因,我无法将FullCalendar初始视图设置为日视图。它总是使用dayGridMonth视图 这是html-Javascript FullCalendar angular 10初始视图不工作,javascript,angular,fullcalendar,fullcalendar-5,Javascript,Angular,Fullcalendar,Fullcalendar 5,我使用的是角度10和全日历5.3.1。 由于某些原因,我无法将FullCalendar初始视图设置为日视图。它总是使用dayGridMonth视图 这是html- <full-calendar id="calendar" #calendar [options]="calendarOptions" [plugins]="options.plugins" [editable]="true&qu
<full-calendar id="calendar"
#calendar
[options]="calendarOptions"
[plugins]="options.plugins"
[editable]="true"
[height]="'parent'"
[dir]="'ltr'"
[events]="courseModel"
(dateClick)="onDateClick($event)"
(eventClick)="onEventClick($event)"
>
</full-calendar>
我还尝试设置其他视图,如dayGridWeek或listweek。什么都没用。
我还尝试用html设置初始视图--
也不行
这就是观点
感谢约翰·彼得斯提供的链接,我成功地使它发挥作用,感谢您的帮助 问题是我的事件数据来自服务器,但在数据发回之前渲染例程正在运行 因此,我用ngIf隐藏日历显示,现在一切正常。数据正在显示,任何初始视图(如listweek或day视图)也在工作-- 这是正在工作的ts代码-- 这是日历html代码
<full-calendar *ngIf="initialized" id="calendar"
#calendar
[options]="calendarOptions"
[plugins]="options.plugins"
[editable]="true"
[height]="'parent'"
[dir]="'ltr'"
[events]="courseModel"
>
</full-calendar>
希望它能帮助别人。谢谢约翰,也许这会有帮助。您必须告诉Angular检测正常渲染周期之外的更改。谢谢。但我在显示数据方面没有问题。只有初始或默认视图不起作用。我希望它是一个单日视图,但它提供了月视图。其他所有工作在订阅完成后才显示日历。文章对此进行了解释。任何订阅都会错过默认的渲染周期。另外,初始视图不需要管理两个引号,就可以在提示链接的帮助下工作。Thanks@AsifRahman如果您有解决方案,请将其添加为下面的答案,显示任何相关的代码更改。通过这种方式,你可以获得投票,这将有助于其他处于类似情况的人-谢谢:-)如果,很高兴看到你的解决方案得到了解决。角度渲染周期对新用户是透明的,但是,如果我们始终记住所有订阅或等待承诺在渲染周期之后运行,那么我们是安全的。如果尝试与渲染周期同步,请暂停使用*ngIf。使用ChangeDetectorRef detectChanges()还有另一种方法可以做到这一点。您能否附上api实际帮助文档的参考资料
<full-calendar id="calendar"
#calendar
[options]="calendarOptions"
[plugins]="options.plugins"
[editable]="true"
[height]="'parent'"
[initialView] = "'listWeek'"
[dir]="'ltr'"
[events]="courseModel"
(dateClick)="onDateClick($event)"
(eventClick)="onEventClick($event)"
>
</full-calendar>
constructor( private courseservice: CourseService ,
public dialog: MatDialog) { }
@ViewChild('calendar') calendarComponent: FullCalendarComponent;
calendarEvents: EventInput[] = [];
initialized = false; // I added this to stop fullcalender component rendering
ngOnInit(): void {
this.courseservice.getAll().subscribe(data =>{
this.courseservice.getAllDetails().subscribe(detdata =>{
console.log("detaildata-", detdata)
detdata.map((detval,detind)=>{
this.courseModel.push({
title: data.find(x=>x.id == detval.courseId).schoolName,//detval.courseName,
date: moment(detval.startDate).format('YYYY-MM-DD'),
start: moment(detval.startDate).format('YYYY-MM-DD'),
end: moment(detval.endDate).format('YYYY-MM-DD'),
color: this.colorarr[(detind+1)%5],
courseName:detval.courseName,
})
if(detdata.length-1 == detind){
this.calendarOptions = {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGrid,dayGridMonth,listWeek'
},
initialView: 'dayGrid',
dayMaxEvents: true, // allow "more" link when too many events
events: this.courseModel,
eventClick: function(info) {
console.log("info--", info.event)
this.info = info.event.title
}.bind(this)
};
this.initialized = true // Showing Calender component After I recieved data
}
})
})
})
this.options = {
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
plugins: [listPlugin,dayGridPlugin, interactionPlugin, timeGridPlugin]
};
}
onEventRender(info: any) {
console.log('onEventRender', info.el);
const tooltip = new Tooltip(info.el, {
title: info.event.title,
placement: 'top-end',
trigger: 'hover',
container: 'body'
});
}
<full-calendar *ngIf="initialized" id="calendar"
#calendar
[options]="calendarOptions"
[plugins]="options.plugins"
[editable]="true"
[height]="'parent'"
[dir]="'ltr'"
[events]="courseModel"
>
</full-calendar>