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