【发布时间】：2021-01-01 23:59:40
【问题描述】：
我正在使用带有 MVC 的 FullCalendar.io 库（版本 3）。所有事件都保存在数据库中。例如，我在上午 9 点有一个活动，但它会在日历上的不同时间显示。 这是我在表格中的活动
如您所见，它从 2020-09-16 的上午 9:00 开始，但我在日历上看到了这个时间。它显示 8:30。 我的虚拟主机位于美国，但我在亚洲。 这是我在 FullCalendar 中看到的
这是视图：
$(document).ready(function () {
var events = [];
var selectedEvent = null;
FetchEventAndRenderCalendar();
function FetchEventAndRenderCalendar() {
events = [];
$.ajax({
type: "GET",
url: "/home/GetEvents",
success: function (data) {
$.each(data, function (i, v) {
events.push({
eventID: v.ID,
title: v.FullName,
firstName: v.FirstName,
lastName: v.LastName,
phone: v.Phone,
description: v.Description,
start: moment(v.Start),
end: moment(v.End),
end: v.End,
color: v.ThemeColor,
allDay:false,
custId:v.CustID
});
})
GenerateCalender(events);
},
error: function (error) {
alert('failed');
}
})
}
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
locale: 'it',
contentHeight: 600,
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events,
eventClick: function (calEvent, jsEvent, view) {
selectedEvent = calEvent;
$('#myModal #eventTitle').html(calEvent.lastName + ' ' + calEvent.firstName + '<br>' + calEvent.phone);
var $description = $('<div/>');
$description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
if (calEvent.end != null) {
$description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
}
$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
$('#myModal #pDetails').empty().html($description);
$('#myModal').modal();
},
selectable: true,
select: function (start, end) {
$('#txtFirstName').val('');
$('#txtLastName').val('');
$("#txtCustomerId").val(0);
$("#txtPhone").val('');
selectedEvent = {
eventID: 0,
fullName: '',
lastName: '',
firstName: '',
description: '',
start: start,
end: end,
allDay: false,
color: '',
Custd: 0
};
modaltest();
openAddEditForm();
},
editable: true
});
}
}
这是控制器
public JsonResult GetEvents()
{
using (SalonEntities dc = new SalonEntities())
{
var events = dc.View_EventsFull.ToList();
return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet};
}
}
为什么存储在数据库中的确切时间和日期不会显示在日历上？
------------------ 编辑部分 ---------------------------------
这是我保存数据的部分。 （在视图中）
$('#btnSave').click(function () {
var startDate = moment($('#txtStart').val(), "DD/MM/YYYY HH:mm A").toDate();
var endDate = moment($('#txtEnd').val(), "DD/MM/YYYY HH:mm A").toDate();
if (startDate > endDate) {
alert("Invalid end date");
return;
}
var data = {
ID: $('#hdEventID').val(),
FirstName: $('#txtFirstName').val().trim(),
LastName: $('#txtLastName').val().trim(),
Phone: $('#txtPhone').val().trim(),
Start: $('#txtStart').val().trim(),
End: $('#txtEnd').val().trim(),
Description: $('#txtDescription').val(),
ThemeColor: $('#ddThemeColor').val(),
IsFullDay:false,
CustID:$('#txtCustomerId').val()
}
SaveEvent(data);
})
function SaveEvent(data) {
$.ajax({
type: "POST",
url: '/home/SaveEvent',
data: data,
success: function (data) {
if (data.status) {
FetchEventAndRenderCalendar();
$('#myModalSave').modal('hide');
}
},
error: function () {
alert('Failed');
}
})
}
而在Controller中保存数据的功能是
public JsonResult SaveEvent(View_EventsFull e)
{
var status = false;
using (SalonEntities dc = new SalonEntities())
{
if (e.ID > 0)
{
//Update the event
var v = dc.Events.Where(a => a.ID == e.ID).FirstOrDefault();
if (v != null)
{
v.Start = e.Start;
v.End = e.End;
v.Description = e.Description;
v.IsFullDay = false;
v.ThemeColor = e.ThemeColor;
v.CustID = e.CustID;
}
}
else
{
Event eventItem = new Event();
eventItem.CustID =e.CustID;
eventItem.Start = e.Start;
eventItem.End = e.End;
eventItem.Description = e.Description;
eventItem.IsFullDay = false;
eventItem.ThemeColor = e.ThemeColor;
dc.Events.Add(eventItem);
}
dc.SaveChanges();
status = true;
}
return new JsonResult { Data = new { status = status } };
}
这是在控制器的 GetEvents 中创建的 Json
[{"ID":22,"Description":"Test 1","Start":"/Date(1600272000000)/","End":"/Date(1600275600000)/","ThemeColor": "red","IsFullDay":false,"FullName":"Ms Noosh","Phone":"0912","CustID":10,"FirstName":"Noosh","LastName":"Ms"}]
【问题讨论】：
-
是否可以在 JSON 中输出带有时区偏移的日期？请显示您的服务器端代码生成的 JSON。
-
@ADyson：我在“帖子的编辑部分”中添加了该部分，谢谢
-
嗯，您使用的是非常旧的 MVC 版本吗？较新的版本将使用 JSON.NET 而不是专有的 Microsoft 格式将日期正确序列化为 ISO8601 格式
-
@ADyson：MVC 版本 5.2.3
-
如果您可以将 MVC 中的 JSON 序列化程序切换到 JSON.NET，那么它可以输出纯 ISO 日期 - 您可以通过谷歌搜索有关如何执行此操作的信息。或者，您可以通过在模型中将日期属性转换为
string类型来解决此问题。
标签： jquery asp.net json datetime fullcalendar