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

Maybe this will help. https://dev.to/jwp/angular-why-doesn-t-my-data-show-up-4efm. You must tell Angular to detectChanges outside of normal rendering cycles. — JWP, Oct 11 '20 at 23:31
Thanks. but i had no problem showing data. just the initial or default view is not working. I want it to be a single day view but it gives month view. Everything else works — Asif Rahman, Oct 11 '20 at 23:42
Don't show calendar until after subscription is done. The article explains this. Any subscription misses the default render cycle. Also initial view shouldn't need two quotes — JWP, Oct 11 '20 at 23:54
managed to make it work with the help of your suggestive link. Thanks — Asif Rahman, Oct 12 '20 at 06:11
@AsifRahman if you got a solution please add it as a Answer below, showing any relevant code changes. That way you can receive upvotes for it, and it will help other people in a similar situation - thanks :-) — ADyson, Oct 12 '20 at 08:22

score 4 · Accepted Answer · answered Oct 12 '20 at 08:57

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

Asif, glad to see your solution worked out. The Angular render cycle is transparent to new users, however, if we always remember that all subscriptions or awaits for promises run after the render cycle we're safe. By holding off using *ngIf you are trying to sync with the render cycles. There is another way to do it as well using ChangeDetectorRef detectChanges(). — JWP, Oct 12 '20 at 21:09
can you attach refrence for actual helping documents of the api — roy.d, Nov 08 '20 at 13:53

fullcalender angular 10 initial view not working

1 Answers1