How can I switch the day, week month, and year view in the full calendar using Angular?

396 Views Asked by At

I am using latest version of fullcalendar v6.

here my stackblitz code which was i tried.

I am trying to switch the full calendar view dynamically but am not luck

here is my code. When I assign all the views here it's working fine with first time.

@ViewChild('calendar') calendarComponent!: FullCalendarComponent;
  calendarOptions: CalendarOptions = {
    plugins: [dayGridPlugin],
    initialview: 'dayGridDay'
  };

But how can we change the view dynamically like the below code. I tried multiple ways but did not find any solutions. how can we achieve this?

  calendarViewOption(event: any){
    if(event === 1){
      this.calendarComponent.getApi().changeView('dayGridDay');
      this.calendarOptions.plugins = [dayGridPlugin];
    } 
    else if(event === 2) {
      this.calendarComponent.getApi().changeView('timeGridWeek');
      this.calendarOptions.plugins = [timeGridPlugin];
    }
    else if(event === 3) {
        this.calendarComponent.getApi().changeView('dayGridMonth');
        this.calendarOptions.plugins = [dayGridPlugin];
    }
    else if(event === 4) {
      this.calendarComponent.getApi().changeView('multiMonthYear');
      this.calendarOptions.plugins = [multiMonthPlugin,interactionPlugin];
    }

    if (this.calendarComponent) {
      this.calendarComponent.getApi()?.render();
    }
    
  }

<full-calendar #calendar [options]="calendarOptions" id="mxCalendar"></full-calendar>
<button (click)="calendarViewOption(1)">View Day</button>
<button (click)="calendarViewOption(2)">View Week</button>
<button (click)="calendarViewOption(3)">View Month</button>
<button (click)="calendarViewOption(4)">View Multi-Month Year</button>

Edited:

Using Full Calendar View not changed The first time it said please make sure you have loaded all necessary plugins I already added all the plugins. I also put the set timeout function.

And the second time it's not giving the error and not updating the view here is the image

enter image description here

0

There are 0 best solutions below