刷新全日历时显示相同的月/周/日
[英]show same month/week/day upon refresh of fullcalendar
问题描述
I am using a fullcalendar plugin to display various events.
我正在使用 fullcalendar 插件来显示各种事件。
My problem is when I change the month/week being viewed, then refresh, I get taken back to the current month/week, when I want to stay on the same month/week I was viewing beforehand.我的问题是当我更改正在查看的月/周，然后刷新时，我会回到当前的月/周，当我想留在我之前查看的同一个月/周时。 ie If it's August right now, and I go back to July, then refresh, I want the page to display the calendar for July and not August.即如果现在是八月，我回到七月，然后刷新，我希望页面显示七月而不是八月的日历。
Code that gives a working calendar for the problem specified is given below.下面给出了为指定问题提供工作日历的代码。 Note that I understand this calendar doesn't fully work (can't add events etc.), but it saving it as index.html and opening it will show the problem I have of not opening at the previous view after a refresh.请注意，我知道此日历无法完全工作（无法添加事件等），但将其另存为 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>
I wish to add a property somewhere (presumably after line 14 var calendar = $('#calendar').fullCalendar({ ) that makes it so after a refresh, I end up on the month/week I was previously on.我希望在某处添加一个属性（大概在第 14 行var calendar = $('#calendar').fullCalendar({ ) 之后，这样在刷新后，我会在我之前所在的月份/周结束。
1 个解决方案
解决方案1
3 已采纳 2019-08-12 20:24:46
You can add this code to solve your problem您可以添加此代码来解决您的问题
$(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'));
}
or you can do this using cookies instead of local storage或者您可以使用 cookie 而不是本地存储来执行此操作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.