需要帮助尝试通过回发使FullCalendar持久
需要帮助尝试通过回发使FullCalendar持久
提问于 2022-10-13 19:16:30
所以我有一个日历显示在我的网页上。工作出色，为最终用户服务。但是，为了添加/编辑事件，我创建了一个回发，该回发将视图重置为其默认值。只对管理员来说是个问题，但他通常会提前一年或更长时间添加条目，这对管理员来说是个麻烦。
为了解决这个问题，我添加了一个隐藏的文本框来存储日历视图的开始日期。
<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%的工作。当我单击日历来创建事件时，适当的日期会移动到textbox中。然而，一旦页面回发日历回到一个月前，它应该在哪里。如果你在现在、过去或未来，这就会发生。唯一正确的日期是2023年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;
}
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-14 15:32:29
因此，通过硬编码一些值，我发现"defaultDate“需要查看月份视图的第一天，而不是视图中显示的第一天。
这将根据您所使用的版本而有所不同，但是..。
document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.start.format();返回日历上的第一个日期。
从开始到intervalStart的转变会让你在这个月的第一天。
document.getElementById('<%=txtSaveTheDate.ClientID%>').value = view.intervalStart.format();不同版本的语法是不同的，intervalStart与版本3是兼容的。
以下是可用的视图对象，您可以选择您的版本来更改内容。https://fullcalendar.io/docs/v3/view-object
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74060743
复制相关文章
相似问题
腾讯云开发者
