At the beginning of the script, I have many options passed on to the calendar.

After it is initialized, executing the following doesn't change the view of the existing calendar, but creates a new calendar instead:

$('.calendar-container').fullCalendar({
   defaultView: 'agendaWeek'
});

Question: how do I change the view of the calendar which already exists in the .calendar-container div?

At the beginning of the script, I have many options passed on to the calendar.

After it is initialized, executing the following doesn't change the view of the existing calendar, but creates a new calendar instead:

$('.calendar-container').fullCalendar({
   defaultView: 'agendaWeek'
});

Question: how do I change the view of the calendar which already exists in the .calendar-container div?

• javascript
• jquery
• fullcalendar

Share Improve this question Follow edited Apr 30, 2015 at 15:07 Adri w Ukraine 20k1919 gold badges106106 silver badges140140 bronze badges asked Aug 2, 2013 at 12:50 OnionOnion 1,83222 gold badges2525 silver badges4242 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

FullCalendar only supports change of a few options after initialization, like height, contentHeight and aspectRatio. If you want to change other options, you should destroy the current calendar, and initialize FullCalendar again with the new options.

You might want to remember the current state, so you can recreate it after the calendar has been destroyed. Include this callback in your FullCalendar options, and save the view in some variable that you can access after the calendar has been destroyed:

viewDisplay: function(view) {
    latestView = view;
}

Then you can call these methods after the calendar has been reinitialized, and recreate the state the calendar was in (like the same view and date range):

$("#calendar").fullCalendar('changeView', latestView.name);
$("#calendar").fullCalendar('gotoDate', latestView.start);

If you go through their documentation it is clearly specified.

There is a function to change the view.

.fullCalendar( 'changeView', viewName )

http://arshaw./fullcalendar/docs/views/changeView/

Well imagine you want to change eventsources....

function getSources(switcher){    

        if(switcher== "option1"){
            return [othersources.opt1,othersources.opt2];

        }else{
            if(switcher== "option2"){                       
            return [othersources.opt3];}
        }      
    }


...
eventSources: getSources(switcher),
...

You can find a way to change any property with a simple function...

Hope it helped...