fullcalender角度10初始视图不起作用

如何解决fullcalender角度10初始视图不起作用

我正在使用角度10和全日历5.3.1。 由于某种原因，我无法将fullcalender initialView设置为日视图。它总是卡在dayGridMonth视图中

这是html-

<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>

这是我的ts代码

 constructor( private courseservice: CourseService,public dialog: MatDialog) { }

    @ViewChild('calendar') calendarComponent: FullCalendarComponent;
    calendarEvents: EventInput[] = [];
    initialized = false; 

  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
          }

        })
      })
    })

    this.options = {
      editable: true,header: {
        left: 'prev,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' 
    }); 

  } 

我也尝试设置为其他视图，例如dayGridWeek或listweek。什么都没用。 我也尝试过在html中设置初始视图-

<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>

也不起作用

这是视图

需要任何帮助

解决方法

由于约翰·彼得斯提供的链接，我设法使它起作用。

问题是我的事件数据来自服务器，但是渲染例程在数据返回之前正在运行。

所以我用ngIf隐藏了日历显示，现在一切正常。数据正在显示，并且任何初始视图（如listweek或day视图）也可以工作-

这是有效的ts代码-

 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,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' 
    }); 

  } 

这是日历html代码

<full-calendar *ngIf="initialized" id="calendar"
    #calendar
    [options]="calendarOptions"
    [plugins]="options.plugins"
    [editable]="true"
    [height]="'parent'"
    [dir]="'ltr'"
    [events]="courseModel"
    >
</full-calendar>

希望它可以帮助某人。谢谢约翰