Set The FullCalendar Default View Based On User Preference

Question

I'd like to add a button on the calendar that let's the user set the default view to whatever the current view is. I know I can set a default view ( defaultView: basicWeek for example), but then when you close and reopen the calendar, it resets itself. How can I get the current view of the calendar to save into an application variable for use next time they open the application?

Answer 1

Keep in mind this example may or may not work 100% (I can't test it on a web server and the document is sandboxed here in the snippet so it doesn't work).

Let me know if you have any errors.

 $(function() { var view = localStorage.getItem('calendarView') || 'month'; view = (view != undefined) ? view : 'basicWeek'; $('#calendar').fullCalendar({ 'viewRender': function(view) { localStorage.setItem('calendarView', view.type); }, 'defaultView': view }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> <link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css" rel="stylesheet" /> <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script> <div id="calendar"> </div> 

Answer 2

You'll want to save the view that the user has set as default to local storage.

In the same function you use to change the default view, add the line:

localStorage.setItem("fc-custom-default", viewName);

where viewName is the string name of the default view (eg "basicWeek")

Then, in customButtons: , when defining the click function callback for your default view button, check if the key exists in storage, and if it does, use that value as the viewName in the 'changeView' function that is called on click. Otherwise, just use the standard default. This will look something like this:

$("#calendar")
    .fullCalendar({
        customButtons: {
            defaultButton:{
                label: "Default View",
                click: function(){
                         var viewName = "month" //this is the default if nothing has been set
                         if(localStorage.getItem("fc-custom-default") !== null))
                         { 
                            viewName = localStorage("fc-custom-default");
                         }
                         $("#calendar").fullCalendar( 'changeView', viewName);
                     }
                 },

You can also store the current default in a variable outside of the click function so you aren't calling a function to retrieve the value from storage on every click.

Answer 3

I found the best approach to be using viewRender. It gets called every time a calendar view is changed. Here's what I did:

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay,listWeek'
    },
    viewRender: function(view) {
        localStorage.setItem('Default_FullCalendar_View', view.name);
    },

    eventClick: function(calEvent, jsEvent, view) {
        if(calEvent.event_type == "Task"){
            LightviewOpen("/portal/Task.asp", "Update", "Task_ID", calEvent.id, "Update", 1200, 700);
        } else {
            window.open("LeadSystem/Lead.asp?New_Window=True&Open_Lead_ID=" + calEvent.id);
        }
    },
    defaultView:localStorage.getItem("AI_Default_FullCalendar_View"),
    eventLimit: true, // allow "more" link when too many events
    navLinks: true,
    height: (window.innerHeight - $("footer").height() - $("#calendar").position().top)*.8,
    windowResize: function(view) {$('#calendar').height((window.innerHeight - $("footer").height()-$("#calendar").position().top)*.9);},
    eventSources:[
        {
            url:    'ajax.asp?serverside=PopulateCalendar&GetDownline=true',
            type:   'Post'
        }
    ]

})