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是默认视图的字符串名称（例如＆＃34; basicWeek＆＃34;）

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

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

})

根据用户首选项设置FullCalendar默认视图

3 个答案: