数据库中节省的时间与 Fullcalendar 上显示的不同
Posted
技术标签:
【中文标题】数据库中节省的时间与 Fullcalendar 上显示的不同【英文标题】：Saved time in database differs than what is shown on Fullcalendar 【发布时间】：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 类型来解决此问题。
【参考方案1】：
问题在于这种格式，例如/Date(1600272000000)/ 表示自 1970 年以来的刻度数，而不是描述特定日期/时间的字符串。它不会告诉您准确的时间，也不会告诉您最初输入日期的时区。因此，当 momentJS 解析它时，它会将其转换为描述浏览器中相对于该滴答数的本地时间的日期。
如果您只是希望应用程序始终将日期视为处于同一时区，那么您可以在 JSON 中输出纯 ISO 日期。如果您可以将 MVC 中的 JSON 序列化程序切换到 JSON.NET，那么它可以默认执行此操作。或者您可以通过将日期属性转换为模型中的字符串类型来解决它。
【讨论】：
以上是关于数据库中节省的时间与 Fullcalendar 上显示的不同的主要内容，如果未能解决你的问题，请参考以下文章
加载 fullcalendar.io 事件时出错 - 未显示数据
如何将 Fullcalendar 插件中的日期与日期数组进行比较
在 Angular 中为 fullcalendar 获取 API 数据