数据库中保存的时间与 Fullcalendar 上显示的不同

Question

我正在使用带 MVC 的 FullCalendar.io 库（第 3 版）。所有事件都保存在数据库中。例如，我在 9:am 中有一个事件，但它会在日历上的不同时间显示。这是我在 Table

的活动

如您所见，它开始于 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 } };
    }

这是在 Controller

的 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"}]

Answer 1

问题是这种格式，例如/Date(1600272000000)/ 表示自 1970 年以来的刻度数，而不是描述特定 date/time 的字符串。它不会告诉您准确的时间，也不会告诉您最初输入日期的时区。因此，当 momentJS 解析它时，它会将其转换为描述浏览器中相对于该滴答数的本地时间的日期。

如果您只是希望应用程序始终将日期视为同一时区，那么您可以在 JSON 中输出纯 ISO 日期。如果您可以将 MVC 中的 JSON 序列化程序切换为 JSON.NET，那么它可以默认执行此操作。或者您可以通过在模型中将日期属性转换为字符串类型来解决这个问题。

数据库中保存的时间与 Fullcalendar 上显示的不同

Saved time in database differs than what is shown on Fullcalendar

asp.net

jquery

datetime

json

fullcalendar