title: CRUD operation on fullcalendar in ASP.NET MVC
body: <p>I have a problem with fullcalendar and ASP.NET MVC. 
  I  set format date of 'YYYY/MM/DD', but when I try to save event then JS or C# (I am not so sure) change automatically format to 'YYYY/DD/MM'. The result of it is that when I select date where day is equal or greater than 13 then I get exception 'The conversion of datetime2 data type to a datetime data type resulted in an out-of-range value' and always get date like '[0001-01-01]'.</p>
  
  <p>I have tried change in View in different ways format of date, but without any possitive result. </p>
  
  <p>I wanted implement code from this site:
  <a href="http://www.dotnetawesome.com/2017/07/curd-operation-on-fullcalendar-in-aspnet-mvc.html" rel="nofollow noreferrer">http://www.dotnetawesome.com/2017/07/curd-operation-on-fullcalendar-in-aspnet-mvc.html</a></p>
  
  <p>In my project, but it doesn't work fine with dates. But when I downloaded this project from the site and opened then everything was OK and I don't know what is wrong with my project.</p>
  
  <p>Do You have any ideas?</p>
  
  <p>I will be grateful for any answer.</p>
  
  <p>My View:</p>
  
  <pre><code>@{
  ViewBag.Title = "Index";
  }
  
  @{ 
  Layout = null;
  }
  
  &lt;h2&gt;Index&lt;/h2&gt;
  &lt;div id="calender"&gt;&lt;/div&gt;
  
  &lt;div id="myModal" class="modal fade" role="dialog"&gt;
  &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;&lt;span id="eventTitle"&gt;&lt;/span&gt;&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;button id="btnDelete" class="btn btn-default btn-sm pull-right"&gt;
                  &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt; Remove
              &lt;/button&gt;
              &lt;button id="btnEdit" class="btn btn-default btn-sm pull-right" style="margin-right:5px;"&gt;
                  &lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt; Edit
              &lt;/button&gt;
              &lt;p id="pDetails"&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="myModalSave" class="modal fade" role="dialog"&gt;
   &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Save Event&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
              &lt;form class="col-md-12 form-horizontal"&gt;
                  &lt;input type="hidden" id="hdEventID" value="0" /&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Subject&lt;/label&gt;
                      &lt;input type="text" id="txtSubject" class="form-control"/&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Start&lt;/label&gt;
                      &lt;div class="input-group date" id="dtp1"&gt;
                          &lt;input type="text" id="txtStart" class="form-control" /&gt;
                          &lt;span class="input-group-addon"&gt;
                              &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;div class="checkbox"&gt;
                          &lt;label&gt;&lt;input type="checkbox" id="chkIsFullDay" checked="checked" /&gt;  Is Full Day event&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group" id="divEndDate" style="display:none"&gt;
                      &lt;label&gt;End&lt;/label&gt;
                      &lt;div class="input-group date" id="dtp2"&gt;
                          &lt;input type="text" id="txtEnd" class="form-control" /&gt;
                          &lt;span class="input-group-addon"&gt;
                              &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Description&lt;/label&gt;
                      &lt;textarea id="txtDescription" rows="3" class="form-control"&gt;&lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label&gt;Theme Color&lt;/label&gt;
                      &lt;select id="ddThemeColor" class="form-control"&gt;
                          &lt;option value=""&gt;Default&lt;/option&gt;
                          &lt;option value="red"&gt;Red&lt;/option&gt;
                          &lt;option value="blue"&gt;Blue&lt;/option&gt;
                          &lt;option value="black"&gt;Black&lt;/option&gt;
                          &lt;option value="green"&gt;Green&lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/div&gt;
                  &lt;button type="button" id="btnSave" class="btn btn-success"&gt;Save&lt;/button&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" /&gt;
  &lt;link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print"/&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /&gt;
  
  &lt;link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="~/Scripts/modernizr-2.6.2.js"&gt;&lt;/script&gt;
  
  &lt;script src="~/Scripts/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(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 = $('&lt;div/&gt;');
                      $description.append($('&lt;p/&gt;').html('&lt;b&gt;Start:&lt;/b&gt;' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
                      if (calEvent.end != null) {
                          $description.append($('&lt;p/&gt;').html('&lt;b&gt;End:&lt;/b&gt;' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
                      }
                      $description.append($('&lt;p/&gt;').html('&lt;b&gt;Description:&lt;/b&gt;' + 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 &amp;&amp; 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 &amp;&amp; $('#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 &gt; 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');
                  }
              })
          }
      })
  &lt;/script&gt;
  </code></pre>
  
  <p>My Controller:</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.Web.Mvc;
  
  namespace MVCEventCalendar.Controllers
  {
  public class HomeController : Controller
  {
      // GET: Home
      public ActionResult Index()
      {
          return View();
      }
  
      public JsonResult GetEvents()
      {
          using (MyDatabaseEntities dc = new MyDatabaseEntities())
          {
              dc.Configuration.LazyLoadingEnabled = false;
              var events = dc.Events.ToList();
              return new JsonResult { Data = events, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
          }
      }
  
      [HttpPost]
      public JsonResult SaveEvent(Event e)
      {
          var status = false;
          using (MyDatabaseEntities dc = new MyDatabaseEntities())
          {
              if (e.EventID &gt; 0)
              {
                  //Update the event
                  var v = dc.Events.Where(a =&gt; 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.Events.Add(e);
              }
  
              dc.SaveChanges();
              status = true;
  
          }
          return new JsonResult { Data = new { status = status } };
      }
  
      [HttpPost]
      public JsonResult DeleteEvent(int eventID)
      {
          var status = false;
          using (MyDatabaseEntities dc = new MyDatabaseEntities())
          {
              var v = dc.Events.Where(a =&gt; a.EventID == eventID).FirstOrDefault();
              if (v != null)
              {
                  dc.Events.Remove(v);
                  dc.SaveChanges();
                  status = true;
              }
          }
          return new JsonResult { Data = new { status = status} };
      }
    }
  }
  </code></pre>
  
  <p>Model:</p>
  
  <pre><code>namespace School_Project.Models
  {
  using System;
  using System.Collections.Generic;
  
  public partial class Events
  {
      public int EventID { get; set; }
      public int ClassID { get; set; }
      public string Subject { get; set; }
      public string Description { get; set; }
      public System.DateTime Start { get; set; }
  
      public Nullable&lt;System.DateTime&gt; End { get; set; }
      public string ThemeColor { get; set; }
      public bool IsFullDay { get; set; }
  
      public virtual School_Class School_Class { get; set; }
  
    }
  }
  </code></pre>