title: fullCalendar: Getting data from controller JSON
body: <p>I am using the fullCalendar library in Visual Studio 2015. I am having trouble populating events from an AJAX command. No events are populating on the calendar. If I pass only one datetime and set allDay = true, it will populate the event. I need it to work with time as well and ave multiple events per day. </p>
  
  <p>JS Code:</p>
  
  <pre><code>$(document).ready(function () {
  
  $(".calendar").fullCalendar
      ({
          header: {
              left: 'month,basicWeek,basicDay,today',
              center: 'title',
              right: 'prev,next'
          },
          weekends: false,
          eventLimit: true,
          theme: true,
          editable: false,
          fixedWeekCount: false,
          events: function(start, end, timezone, callback)
          {$.ajax
              ({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  url: "/Calendar/GetCalendarEvents",
                  dataType: 'json',
                  success: function (data)
                  {
  
                      var events = [];
                      $.each(data, function (index, value) {
  
                          events.push({
                              id: value['id'],
                              title: value['title'],
                              date: value['date']
                              //all data
                          });
                          console.log(value)
                      });
                      callback(events);
                  },
                  error: function (xhr, err) {
                      alert("ERROR! - readyState: " + xhr.readyState + "&lt;br/&gt;status: " + xhr.status + "&lt;br/&gt;responseText: " + xhr.responseText);
                  }
              });
  
          }   });})
  </code></pre>
  
  <p>Note: The above code was one of may attempts to get it working. I have tried coding it differently before. </p>
  
  <p>Controller Code:</p>
  
  <pre><code>public ActionResult GetCalendarEvents()
      {
          var events = new List&lt;VMCalendarEvents&gt;();
          var db_events = db.PatientVisits.ToList();
          foreach(var e in db_events)
          {
              DateTime visit_start = Convert.ToDateTime(e.VisitStart);
              DateTime visit_end = Convert.ToDateTime(e.VisitEnd);
  
              var calEvent = new VMCalendarEvents
              {
                  id = e.PatientVisitID.ToString(),
                  title = "Placeholder Title" + e.PatientVisitID.ToString(),
                  date = visit_start.ToShortDateString(),
                  start = visit_start.ToString(),
                  end = visit_end.ToString(),
                  editable = true,
                  allDay = false
  
              };
              events.Add(calEvent);
          }
  
          var rows = events.ToArray();
          return Json(rows, JsonRequestBehavior.AllowGet);}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/YNue6.png" rel="nofollow noreferrer">Controller Code Output</a></p>
  
  <p><a href="https://i.stack.imgur.com/Rn1NW.png" rel="nofollow noreferrer">JS Objects from Controller</a></p>
  
  <p><strong>EDIT:</strong> Problem Solved</p>
  
  <p>So after some investigating I decided to use Razor in MVC to solve the problem. Instead of writing it into a seperate JS file, I put it into a  header in the html file. By implementing the code below I was able to get the objects in the date formats of (yyyy-MM-ddTHH:dd  &amp;  MM/dd/yyyy hh:mm tt):</p>
  
  <pre><code>    $(function () {
  
      $('#calendar').fullCalendar({
          header: {
              left: 'prev,next today',
              center: 'title',
              right: 'month,agendaWeek,agendaDay'
          },
          defaultDate: '2017-06-12',
          editable: true,
          events: '@Url.Action("GetCalendarEvents", "Calendar")',
  
      });
  
  });
  </code></pre>
  
  <p>I called the Controller using the URL Action command and return the JSON data as a ActionResult. </p>