title: fullcalendar- TypeError: t.start is undefined
body: <p>There's already questions with the same name. I tried the solutions provided in them but it didn't help.</p>
  
  <p>I'm trying to add events to a fullcalendar dynamically.
  That means, I have an AJAX request which will communicate with the PHP service and will return the data that needs to be shown in calendar.</p>
  
  <p>This AJAX request is initiated whenever I change a month (only month view is enabled). So, when user uses right or left arrow button and navigates to November 2016, following JSON will be returned. This is how it works for every month.</p>
  
  <pre><code>[
      {
          "start": "2016-11-01 00:00:00",
          "title": "Non Work Day",
          "backgroundColor": "#00a65a",
          "borderColor": "#00a65a"
      },
      {
          "start": "2016-11-02 00:00:00",
          "title": "Absent",
          "backgroundColor": "#00a65a",
          "borderColor": "#00a65a"
      },
      {
          "start": "2016-11-03 00:00:00",
          "title": "Absent",
          "backgroundColor": "#00a65a",
          "borderColor": "#00a65a"
      },
      {
          "start": "2016-11-04 00:00:00",
          "title": "Absent",
          "backgroundColor": "#00a65a",
          "borderColor": "#00a65a"
      }
  ]
  </code></pre>
  
  <p>This is my AJAX function that fetches these value. For now, I have hardcoded a date in it.</p>
  
  <pre><code>function fetchCalenderAttendance(dateofMonth)
  {
       var date   =   "2016-11-01";
       var post_url = "url_to_php_service.php";
  
       $.ajax({
       url: post_url,
       data:{dateofMonth:date,csrf_test_name:csrf_token},
       type: "POST",
       dataType: 'JSON',
       beforeSend: function ( xhr ) 
       {
           //Add your image loader here
           $('#loading').show(); 
      },
       success: function(result)
      { 
        var event= result;
        $('#calendar').fullCalendar( 'renderEvent', event, true);
         //$('#calendar').fullCalendar( 'updateEvent', event );
      }
     });//end of ajax 
  }
  </code></pre>
  
  <p>When I give <code>$('#calendar').fullCalendar( 'renderEvent', event, true);</code>
  I get t.start is undefined.</p>
  
  <p>When I give <code>$('#calendar').fullCalendar( 'updateEvent', event );</code>
  I get n is undefined.</p>
  
  <p>In one SO question, it wsa mentioned to format the date. I did that in PHP service</p>
  
  <p><strong>Date_create</strong> (): to create the date from the field of the database</p>
  
  <pre><code>example: $start = date_create($row-&gt;start_date)
  </code></pre>
  
  <p><strong>Date_format</strong>(): to convert the date to a datetime </p>
  
  <pre><code>example: date_format ($start, 'Y-m-d H:i:s')
  </code></pre>
  
  <p>I have no idea why I am not able to add an event.</p>
  
  <p>This is my fullcalendar js file.</p>
  
  <pre><code>$(function () {
  
  
  
      /* initialize the calendar
       -----------------------------------------------------------------*/
      //Date for the calendar events (dummy data)
      var date = new Date();
      var d = date.getDate(),
          m = date.getMonth(),
          y = date.getFullYear();
      var dateofMonth=y+'-'+m+'-'+d;
      //fetchCalenderAttendance(dateofMonth);
      $('#calendar').fullCalendar({
          header: {
              left: 'prev,next',
              center: 'title',
              right: 'month'
          },
          buttonText: {
              today: 'today',
              month: 'month'
          },
          //Random default events
          events: [
              {
                  title: 'Absent',
                  start: new Date(y, m, 1),
                  backgroundColor: "#f56954", //red
                  borderColor: "#f56954" //red
              },
              {
                  title: 'Holiday',
                  start: new Date(y, m, d - 5),
                  end: new Date(y, m, d - 2),
                  backgroundColor: "#00c0ef", //Info (aqua)
                  borderColor: "#00c0ef" //Info (aqua)
              },
              {
                  title: 'Late by : 00:10:41',
                  start: new Date(y, m, 2),
                  backgroundColor: "#f39c12", //yellow
                  borderColor: "#f39c12" //yellow
              },
              {
                  title: 'On Time',
                  start: new Date(y, m, d + 2, 19, 0),
                  end: new Date(y, m, d + 1, 22, 30),
                  allDay: false,
                  backgroundColor: "#00a65a", //Success (green)
                  borderColor: "#00a65a" //Success (green)
              }
          ],
          editable: true,
          droppable: true, // this allows things to be dropped onto the calendar !!!
          drop: function (date, allDay) { // this function is called when something is dropped
  
              // retrieve the dropped element's stored Event Object
              var originalEventObject = $(this).data('eventObject');
  
              // we need to copy it, so that multiple events don't have a reference to the same object
              var copiedEventObject = $.extend({}, originalEventObject);
  
              // assign it the date that was reported
              copiedEventObject.start = date;
              copiedEventObject.allDay = allDay;
              copiedEventObject.backgroundColor = $(this).css("background-color");
              copiedEventObject.borderColor = $(this).css("border-color");
  
              // render the event on the calendar
              // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
              $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);
  
              // is the "remove after drop" checkbox checked?
              if ($('#drop-remove').is(':checked')) {
                  // if so, remove the element from the "Draggable Events" list
                  $(this).remove();
              }
  
          }
      });
  
      /* ADDING EVENTS */
      var currColor = "#3c8dbc"; //Red by default
      //Color chooser button
      var colorChooser = $("#color-chooser-btn");
      $("#color-chooser &gt; li &gt; a").click(function (e) {
          e.preventDefault();
          //Save color
          currColor = $(this).css("color");
          //Add color effect to button
          $('#add-new-event').css({"background-color": currColor, "border-color": currColor});
      });
      $("#add-new-event").click(function (e) {
          e.preventDefault();
          //Get value and make sure it is not null
          var val = $("#new-event").val();
          if (val.length == 0) {
              return;
          }
  
          //Create events
          var event = $("&lt;div /&gt;");
          event.css({
              "background-color": currColor,
              "border-color": currColor,
              "color": "#fff"
          }).addClass("external-event");
          event.html(val);
          $('#external-events').prepend(event);
  
          //Add draggable funtionality
          ini_events(event);
  
          //Remove event from text input
          $("#new-event").val("");
      });
  
  
        $('.fc-corner-left').click(function() {
              var date = $('#calendar').fullCalendar('getDate');              
              dateofMonth = "2016-11-01";
              if(dateofMonth)
              {
                  fetchCalenderAttendance(dateofMonth);
              }
            });
  
            $('.fc-corner-right').click(function() {
              var date = $('#calendar').fullCalendar('getDate');
              dateofMonth = "2016-11-01";
              if(dateofMonth)
              {
                  fetchCalenderAttendance(dateofMonth);
              }
            });
  });
  </code></pre>