刷新完整日历时显示相同的月/周/日答案

【问题标题】：show same month/week/day upon refresh of fullcalendar刷新完整日历时显示相同的月/周/日
【发布时间】：2019-08-13 04:24:46
【问题描述】：

我正在使用全日历插件来显示各种事件。

我的问题是，当我更改正在查看的月/周，然后刷新时，我会回到当前月/周，而我想留在我之前查看的月/周。即如果现在是 8 月，我回到 7 月，然后刷新，我希望页面显示 7 月而不是 8 月的日历。

下面给出了为指定问题提供工作日历的代码。请注意，我知道这个日历不能完全工作（不能添加事件等），但它将它保存为 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({ 之后），这样在刷新后，我最终会在我之前所在的月/周结束。

【问题讨论】：

您为什么觉得需要刷新页面？你的意思是当你改天再来的时候？但是如果你想这样做，你可以在每次 viewRender 之后将当前日期存储在 localstorage 中，并在第一次加载日历之前检索它

标签： javascript fullcalendar fullcalendar-scheduler

【解决方案1】：

您可以添加此代码来解决您的问题

$(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 而不是本地存储来做到这一点

【讨论】：