根据用户偏好设置FullCalendar默认视图

Question

我想在日历上添加一个按钮，让用户将默认视图设置为当前视图。 我知道我可以设置一个默认视图（例如defaultView: basicWeek ），但是当您关闭并重新打开日历时，它将重置自身。 如何获取日历的当前视图以保存到应用程序变量中，以供下次打开应用程序时使用？

Answer 1

请记住，此示例可能或不可能100％起作用（我无法在Web服务器上对其进行测试，并且该文档在此代码段中被沙箱化，因此它不起作用）。

让我知道您是否有任何错误。

 $(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

您需要将用户设置为默认视图的视图保存到本地存储。

在用于更改默认视图的同一函数中，添加以下行：

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

其中viewName是默认视图的字符串名称（例如“ basicWeek”）

然后，在customButtons: ，为默认视图按钮定义click函数回调时，检查该键是否在存储中，如果存在，则将该值用作单击时调用的“ changeView”函数中的viewName。 否则，只需使用标准默认值即可。 看起来像这样：

$("#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);
                     }
                 },

您还可以将当前默认值存储在click函数外部的变量中，这样就不会在每次单击时都调用函数来从存储中检索值。

Answer 3

我发现最好的方法是使用viewRender。 每次更改日历视图时都会调用它。 这是我所做的：

$('#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'
        }
    ]

})