根據用戶偏好設置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'
        }
    ]

})