показывать тот же месяц/неделю/день при обновлении полного календаря

Я использую плагин fullcalendar для отображения различных событий.

Моя проблема заключается в том, что когда я меняю просматриваемый месяц/неделю, а затем обновляю, я возвращаюсь к текущему месяцу/неделе, когда я хочу остаться на том же месяце/неделе, который просматривал ранее. т. е. если сейчас август, и я возвращаюсь к июлю, то обновляю, я хочу, чтобы на странице отображался календарь на июль, а не на август.

Код, который дает рабочий календарь для указанной проблемы, приведен ниже. Обратите внимание, что я понимаю, что этот календарь не работает полностью (не может добавлять события и т. д.), но он сохраняет его как index.html и открывает его, чтобы показать проблему, с которой я не открываюсь в предыдущем представлении после обновления.

<!DOCTYPE html>
<html>
 <head>
  <title>Jquery Fullcalandar Integration with PHP and Mysql</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
  <script>
   
  $(document).ready(function() {
   var calendar = $('#calendar').fullCalendar({
    allDaySlot: false,
    editable:true,
    header:{
     left:'prev,next today',
     center:'title',
     right:'month,agendaWeek,agendaDay'
    },
    events: [{"id":1,"title":"one","start":"2019-08-11 00:00:00","end":"2019-08-12 00:00:00", 'color': 'Fuchsia'}],
    selectable:true,
    selectHelper:true,
    select: function(start, end, allDay)
    {
     var title = prompt("Enter Event Title");
     if(title)
     {
      var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
      var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
      $.ajax({
       url:"insert.php",
       type:"POST",
       data:{title:title, start:start, end:end},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Added Successfully");
       }
      })
     }
    },
    editable:true,
    eventResize:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function(){
       calendar.fullCalendar('refetchEvents');
       alert('Event Update');
      }
     })
    },

    eventDrop:function(event)
    {
     var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
     var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
     var title = event.title;
     var id = event.id;
     $.ajax({
      url:"update.php",
      type:"POST",
      data:{title:title, start:start, end:end, id:id},
      success:function()
      {
       calendar.fullCalendar('refetchEvents');
       alert("Event Updated");
      }
     });
    },

    eventClick:function(event)
    {
     if(confirm("Are you sure you want to remove it?"))
     {
      var id = event.id;
      $.ajax({
       url:"delete.php",
       type:"POST",
       data:{id:id},
       success:function()
       {
        calendar.fullCalendar('refetchEvents');
        alert("Event Removed");
       }
      })
     }
    },

   });
  });
   
  </script>
 </head>
 <body>
  <br />
  <h2 align="center"><a href="#">Jquery Fullcalandar Integration with PHP and Mysql</a></h2>
  <br />
  <div class="container">
   <div id="calendar"></div>
  </div>
 </body>
</html>

Я хочу добавить свойство где-нибудь (предположительно после строки 14 var calendar = $('#calendar').fullCalendar({ ), которое сделает так, что после обновления я попаду в месяц/неделю, в которых я был ранее.


javascript fullcalendar fullcalendar-scheduler
person user11508332    schedule 12.08.2019    source источник
comment
Зачем вообще нужно обновлять страницу? Ты просто имеешь в виду, когда вернешься к этому в другой день? Но если вы хотите сделать это, вы можете сохранить текущую дату в локальном хранилище после каждого viewRender и получить ее перед первой загрузкой календаря.   -  person ADyson    schedule 12.08.2019

Ответы (1)


arrow_upward
3
arrow_downward

Вы можете добавить этот код, чтобы решить вашу проблему

$(document).on('click', '.fc-next-button,.fc-prev-button', function () {
 localStorage.setItem('savedMonth',$('#calendar').fullCalendar('getView').intervalStart._d);
});
if(localStorage.getItem('savedMonth')!=null){
$('#calendar').fullCalendar('gotoDate',localStorage.getItem('savedMonth'));
}

или вы можете сделать это, используя файлы cookie вместо локального хранилища

person Денис Замазкин    schedule 12.08.2019