title: fullcalender angular 10 initial view not working
body: <p>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</p>
  <p>This is html -</p>
  <pre><code>&lt;full-calendar id=&quot;calendar&quot;
      #calendar
      [options]=&quot;calendarOptions&quot;
      [plugins]=&quot;options.plugins&quot;
      [editable]=&quot;true&quot;
      [height]=&quot;'parent'&quot;
      [dir]=&quot;'ltr'&quot;
      [events]=&quot;courseModel&quot;
      (dateClick)=&quot;onDateClick($event)&quot;
      (eventClick)=&quot;onEventClick($event)&quot; 
  
      &gt;
  &lt;/full-calendar&gt;
  </code></pre>
  <p>thi is my ts code</p>
  <pre><code> constructor( private courseservice: CourseService ,
      public dialog: MatDialog) { }
  
      @ViewChild('calendar') calendarComponent: FullCalendarComponent;
      calendarEvents: EventInput[] = [];
      initialized = false; 
  
    ngOnInit(): void {
      
      this.courseservice.getAll().subscribe(data =&gt;{
        this.courseservice.getAllDetails().subscribe(detdata =&gt;{
          console.log(&quot;detaildata-&quot;, detdata)
          detdata.map((detval,detind)=&gt;{
            this.courseModel.push({
              title: data.find(x=&gt;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 &quot;more&quot; link when too many events    
                events: this.courseModel,
                eventClick: function(info) {
                  console.log(&quot;info--&quot;, 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' 
      }); 
  
    } 
  
  </code></pre>
  <p>I also tried setting to other view like dayGridWeek or listweek. Nothing is working.
  I also tried setting initial View in html--</p>
  <pre><code>&lt;full-calendar id=&quot;calendar&quot;
      #calendar
      [options]=&quot;calendarOptions&quot;
      [plugins]=&quot;options.plugins&quot;
      [editable]=&quot;true&quot;
      [height]=&quot;'parent'&quot;
      [initialView] = &quot;'listWeek'&quot;
      [dir]=&quot;'ltr'&quot;
      [events]=&quot;courseModel&quot;
      (dateClick)=&quot;onDateClick($event)&quot;
      (eventClick)=&quot;onEventClick($event)&quot; 
  
      &gt;
  &lt;/full-calendar&gt;
  </code></pre>
  <p>Does not work either</p>
  <p>This is the view</p>
  <p><a href="https://i.stack.imgur.com/nju1g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nju1g.png" alt="initial view stuck in month view, cant change to day or week view" /></a></p>
  <p>any help is appriciated</p>