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

Set The FullCalendar Default View Based On User Preference

本文关键字：FullCalendar 默认 视图 设置 用户      更新时间：2023-09-26

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

请记住，这个例子可能会或可能不会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>

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

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

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函数之外的变量中，这样您就不必在每次单击时调用函数从存储中检索值。

我发现最好的方法是使用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'
        }
    ]
})
相关文章：