Блог

Я работаю с FullCalendar.io библиотека (версия 3) с MVC. все события сохраняются в базе данных. например, у меня есть событие в 9: am, но оно будет показано в другое время в календаре. Это мое событие в таблице

как вы можете видеть, оно начинается в 9: 00 утра 2020-09-16, но я вижу это время в календаре. оно показывает 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');
                }
            })
        }
  

И функция, которая сохраняет данные в контроллере, является

 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 } };
    }
  

И это Json, созданный в getEvents в контроллере

[{«ID»:22,»Description»:»Тест 1″,»Start»:»/Date(1600272000000)/»,»End»:»/Date(1600275600000)/»,»ThemeColor»:»red»,»IsFullDay»:false,»FullName»:» Ms Noosh», «Phone»: «0912», «CustID»: 10, «FirstName»: «Noosh», «LastName»: «Ms»}]

Проблема в том, что этот формат, например, /Date(1600272000000)/ представляет количество тиков с 1970 года, а не строку, описывающую конкретную дату / время. Он не сообщает вам точное время или не сообщает, в каком часовом поясе была первоначально введена дата. Поэтому, когда MomentJS анализирует это, он превращает это в дату, описывающую местное время в браузере относительно этого количества тиков.

Если вы просто хотите, чтобы приложение всегда обрабатывало даты как относящиеся к одному и тому же часовому поясу, тогда вы можете выводить простые даты ISO в формате JSON. Если вы можете переключить свой сериализатор JSON в MVC на JSON.NET тогда он может делать это по умолчанию. Или вы могли бы обойти это, преобразовав свойства даты в строковый тип в вашей модели.