fullcalender angular 10 initial view not working

Question

I am using angular 10 and fullcalender 5.3.1. For some reason i cant set fullcalender initialView to day view. It always stuck with dayGridMonth view

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

thi is my ts code

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

  } 

I also tried setting to other view like dayGridWeek or listweek. Nothing is working. I also tried setting initial View in 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>

Does not work either

This is the view

any help is appriciated

Answer 1

Thanks to the link provided by John peters I managed to make it work.

The problem was my event data is coming from server but the rendering routine was running before data was sent back.

So I hide the calender display with ngIf and now everything works as expected. The data is showing and any Initial view like listweek or day view is also working--

This is the working ts code --

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

  } 

Here is the calender html code

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

Hope it helps someone. Thanks John