Блог

Я хотел бы добавить кнопку в календаре, которая позволяет пользователю устанавливать представление по умолчанию на любое текущее представление. Я знаю, что могу установить представление по умолчанию ( defaultView: basicWeek например), но затем, когда вы закрываете и снова открываете календарь, он сбрасывается. Как я могу сохранить текущее представление календаря в переменной приложения для использования при следующем открытии приложения?

Имейте в виду, что этот пример может работать или не работать на 100% (я не могу протестировать его на веб-сервере, и документ изолирован здесь, во фрагменте, поэтому он не работает).

Дайте мне знать, если у вас возникнут какие-либо ошибки.

 $(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 строковое имя представления по умолчанию (например, «Базовая неделя»)

Затем customButtons: , при определении click обратного вызова функции для вашей кнопки просмотра по умолчанию, проверьте, существует ли ключ в хранилище, и если он существует, используйте это значение в качестве имени представления в функции ‘ChangeView’, которая вызывается при нажатии. В противном случае просто используйте стандартное значение по умолчанию. Это будет выглядеть примерно так:

 $("#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=Trueamp;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=PopulateCalendaramp;GetDownline=true',
            type:   'Post'
        }
    ]

})