需要帮助尝试通过回发使FullCalendar保持不变

Question

所以我的一个网页上显示了一个日历。效果很好，为最终用户服务。但是，为了添加/编辑事件，我创建了一个回发，将视图重置为默认值。这只是管理员的问题，但他通常会提前一年或更长时间添加条目，这会让人感到讨厌。

为了解决这个问题，我添加了一个隐藏的文本框来存储日历视图的开始日期。

<asp:TextBox ID="txtSaveTheDate" style="display:none;" runat="server"></asp:TextBox>  

然后，在每次事件中，我都会将日期更新为当前视图。除非你先触发了一个事件，否则你永远不会收到回发(

eventClick: function (calEvent, jsEvent, view) {
document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.start.format();
...
},

然后，我使用defaultDate属性来使用此日期来显示日历中最后显示的日期范围。

defaultDate: moment(SaveTheDate), 

这能起到80%的作用。当我点击日历创建事件时，正确的日期会移动到文本框中。但是，一旦页面回发，日历就会返回到它应该返回的前一个月。如果你处于现在、过去或未来，就会发生这种情况。唯一一个合适的日期是2023年1月，无论出于什么原因，这个月都是有效的。唯一的线索是，与大多数情况不同，展览从本月1日开始。

任何提示都将不胜感激，包括替代技术。

完整的参考程序。

jQuery(document).ready(function () {
SaveTheDate = document.getElementById('<%=txtSaveTheDate.ClientID%>').value;
if (SaveTheDate == '') {
SaveTheDate = new Date();
};            
$.ajax({
type: "POST",
contentType: "application/json",
data: "{}",
url: "TrainingCalendar.aspx/GetEvents",
dataType: "json",
success: function (data) {
$('div[id*=fullcal]').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month'
},
defaultDate: moment(SaveTheDate), 
displayEventTime: false,                        
events: $.map(data.d, function (item, i) {
var event = new Object();
event.id = item.EventID
event.start = new Date(item.StartDate);
event.end = new Date(item.EndDate);
event.title = item.EventName;
event.backgroundColor = item.Color;
event.textColor = item.TextColor;
return event;
}),                        
eventClick: function (calEvent, jsEvent, view) {
//Let's make sure they have permissions to edit the page
if (document.getElementById('<%=btnNotes.ClientID%>')) {
document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.start.format();
document.getElementById('<%=txtEventId.ClientID%>').value = calEvent.id;
document.getElementById('<%=txtEventName.ClientID%>').value = calEvent.title;
var date = new Date(calEvent.start);
document.getElementById('<%=txtDate.ClientID%>').value = ((date.getMonth() > 8) ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))) + '/' + ((date.getDate() > 9) ? date.getDate() : ('0' + date.getDate())) + '/' + date.getFullYear();
$('#EventModal').modal('show');
}
},
dayClick: function (dt, jsEvent, view) {
//Let's make sure they have permissions to edit the page
if (document.getElementById('<%=btnNotes.ClientID%>')) {
document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.start.format();
document.getElementById('<%=ddlNewEventName.ClientID%>').value = '0';
document.getElementById('<%=txtNewEventName.ClientID%>').value = '';
document.getElementById('<%=txtNewDate.ClientID%>').value = dt.format('MM/DD/YYYY');
$('#NewEventModal').modal('show');
}
}
});
$("div[id=loading]").hide();
$("div[id=fullcal]").show();
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
debugger;
}
});
});

Answer 1

所以我通过对一些值进行硬编码发现；defaultDate"需要查看当月视图的第一天，而不是视图中显示的第一天。

这将根据您使用的版本而有所不同，但是。。。

document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.start.format();

返回日历上的第一个日期

从开始改为间隔开始可以让你在一个月的第一天。

document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.intervalStart.format();

语法因版本而异，intervalStart与版本3兼容。

以下是可用的视图对象，您可以选择您的版本来更改内容。https://fullcalendar.io/docs/v3/view-object