2017-09-22 40 views
1

我下面這個教程的製作在asp.net MVC5日曆調度: http://www.dotnetawesome.com/2017/07/curd-operation-on-fullcalendar-in-aspnet-mvc.html的JavaScript fullcalendar日期時間搞砸

我無法理解日期時間是如何傳遞以及爲什麼它顯示的最小值數據庫(就好像值爲空因爲留空):具體地說,它在數據庫中設置爲1/1/0001 12:00:00 AM。

我已經看過堆棧溢出的各種答案,但不知道如何或什麼我需要改變,以使日期時間設置爲非空值。

任何幫助極大的讚賞。

這裏是我的索引視圖的JavaScript

<script> 
     $(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.EventID, 
           title: v.Subject, 
           description: v.Description, 
           start: moment(v.Start), 
           end: v.End != null ? moment(v.End) : null, 
           color: v.ThemeColor, 
           allDay: v.IsFullDay 
          }); 
         }) 

         GenerateCalender(events); 
        }, 
        error: function (error) { 
         alert('failed'); 
        } 
       }) 
      } 

      function GenerateCalender(events) { 
       $('#calender').fullCalendar('destroy'); 
       $('#calender').fullCalendar({ 
        contentHeight: 400, 
        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').text(calEvent.title); 
         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) { 
         selectedEvent = { 
          eventID: 0, 
          title: '', 
          description: '', 
          start: start, 
          end: end, 
          allDay: false, 
          color: '' 
         }; 
         openAddEditForm(); 
         $('#calendar').fullCalendar('unselect'); 
        }, 
        editable: true, 
        eventDrop: function (event) { 
         var data = { 
          EventID: event.eventID, 
          Subject: event.title, 
          Start: event.start.format('DD/MM/YYYY HH:mm A'), 
          End: event.end != null ? event.end.format('DD/MM/YYYY HH:mm A') : null, 
          Description: event.description, 
          ThemeColor: event.color, 
          IsFullDay: event.allDay 
         }; 
         SaveEvent(data); 
        } 
       }) 
      } 

      $('#btnEdit').click(function() { 
       //Open modal dialog for edit event 
       openAddEditForm(); 
      }) 
      $('#btnDelete').click(function() { 
       if (selectedEvent != null && confirm('Are you sure?')) { 
        $.ajax({ 
         type: "POST", 
         url: '/home/DeleteEvent', 
         data: {'eventID': selectedEvent.eventID}, 
         success: function (data) { 
          if (data.status) { 
           //Refresh the calender 
           FetchEventAndRenderCalendar(); 
           $('#myModal').modal('hide'); 
          } 
         }, 
         error: function() { 
          alert('Failed'); 
         } 
        }) 
       } 
      }) 

      $('#dtp1,#dtp2').datetimepicker({ 
       format: 'DD/MM/YYYY HH:mm A' 
      }); 

      $('#chkIsFullDay').change(function() { 
       if ($(this).is(':checked')) { 
        $('#divEndDate').hide(); 
       } 
       else { 
        $('#divEndDate').show(); 
       } 
      }); 

      function openAddEditForm() { 
       if (selectedEvent != null) { 
        $('#hdEventID').val(selectedEvent.eventID); 
        $('#txtSubject').val(selectedEvent.title); 
        $('#txtStart').val(selectedEvent.start.format('DD/MM/YYYY HH:mm A')); 
        $('#chkIsFullDay').prop("checked", selectedEvent.allDay || false); 
        $('#chkIsFullDay').change(); 
        $('#txtEnd').val(selectedEvent.end != null ? selectedEvent.end.format('DD/MM/YYYY HH:mm A') : ''); 
        $('#txtDescription').val(selectedEvent.description); 
        $('#ddThemeColor').val(selectedEvent.color); 
       } 
       $('#myModal').modal('hide'); 
       $('#myModalSave').modal(); 
      } 

      $('#btnSave').click(function() { 
       //Validation/ 
       if ($('#txtSubject').val().trim() == "") { 
        alert('Subject required'); 
        return; 
       } 
       if ($('#txtStart').val().trim() == "") { 
        alert('Start date required'); 
        return; 
       } 
       if ($('#chkIsFullDay').is(':checked') == false && $('#txtEnd').val().trim() == "") { 
        alert('End date required'); 
        return; 
       } 
       else { 
        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 = { 
        EventID: $('#hdEventID').val(), 
        Subject: $('#txtSubject').val().trim(), 
        Start: $('#txtStart').val().trim(), 
        End: $('#chkIsFullDay').is(':checked') ? null : $('#txtEnd').val().trim(), 
        Description: $('#txtDescription').val(), 
        ThemeColor: $('#ddThemeColor').val(), 
        IsFullDay: $('#chkIsFullDay').is(':checked') 
       } 
       SaveEvent(data); 
       // call function for submit data to the server 
      }) 

      function SaveEvent(data) { 
       $.ajax({ 
        type: "POST", 
        url: '/home/SaveEvent', 
        data: data, 
        success: function (data) { 
         if (data.status) { 
          //Refresh the calender 
          FetchEventAndRenderCalendar(); 
          $('#myModalSave').modal('hide'); 
         } 
        }, 
        error: function() { 
         alert('Failed'); 
        } 
       }) 
      } 
     }) 
    </script> 
} 

這裏是我的控制器:

using System; 
using System.Collections.Generic; 
using System.Linq; 
using System.Web; 
using System.Web.Mvc; 

namespace FamilyCalendar2.Controllers 
{ 
    public class HomeController : Controller 
    { 
     // GET: Home 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public JsonResult GetEvents() 
     { 
      using (Entities1 dc = new Entities1()) 
      { 
       var events = dc.Event.ToList(); 
       return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; 
      } 
     } 

     [HttpPost] 
     public JsonResult SaveEvent(Event e) 
     { 
      var status = false; 
      using (Entities1 dc = new Entities1()) 
      { 
       if (e.EventID > 0) 
       { 
        //Update the event 
        var v = dc.Event.Where(a => a.EventID == e.EventID).FirstOrDefault(); 
        if (v != null) 
        { 
         v.Subject = e.Subject; 
         v.Start = e.Start; 
         v.End = e.End; 
         v.Description = e.Description; 
         v.IsFullDay = e.IsFullDay; 
         v.ThemeColor = e.ThemeColor; 
        } 
       } 
       else 
       { 

        dc.Event.Add(e); 
       } 

       dc.SaveChanges(); 
       status = true; 

      } 
      return new JsonResult { Data = new { status = status } }; 
     } 

     [HttpPost] 
     public JsonResult DeleteEvent(int eventID) 
     { 
      var status = false; 
      using (Entities1 dc = new Entities1()) 
      { 
       var v = dc.Event.Where(a => a.EventID == eventID).FirstOrDefault(); 
       if (v != null) 
       { 
        dc.Event.Remove(v); 
        dc.SaveChanges(); 
        status = true; 
       } 
      } 
      return new JsonResult { Data = new { status = status } }; 
     } 
    } 
} 

這是事件類的樣子:

namespace FamilyCalendar2 
{ 
    using System; 
    using System.Collections.Generic; 

    public partial class Event 
    { 
     public int EventID { get; set; } 
     public string Subject { get; set; } 
     public string Description { get; set; } 
     public System.DateTime Start { get; set; } 
     public Nullable<System.DateTime> End { get; set; } 
     public string ThemeColor { get; set; } 
     public Nullable<bool> IsFullDay { get; set; } 
     public string User { get; set; } 
    } 
} 
+0

我應該提到:如果我複製和粘貼源到我的項目的日期時間的問題仍然存在。這讓我覺得可能是我的nuget軟件包有問題嗎?我有點新VS2017 – Daveyman123

+0

你可以調試此代碼?所以你可以看到問題在哪裏?在您的發佈方法開始時,您看到您的DateTime道具有什麼價值? –

+0

{1/1/0001 12:00:00 AM}這是調試的開始時間,結束時間爲空。 – Daveyman123

回答

1

格式該日期不適用於c#自動綁定。

'DD/MM/YYYY HH:mm A' 

將其更改爲

'DD/MM/YYYY HH:mm:ss' 
+0

謝謝。我還應該提到,我必須格式化爲'MM/DD/YYYY HH:mm:ss'才能在我的電腦上運行。我不知道爲什麼把這個月先做好了,但它確實如此。 – Daveyman123