title: Create dynamic events to javascript calendar
body: <p>I have a  javascript calendar and I am trying to insert custom events on this from a json object. 
  The code for the calendar and the default events is:</p>
  
  <pre><code> /* initialize the calendar
               -----------------------------------------------------------------*/
              //Date for the calendar events (dummy data)
              var date = new Date();
              var d = date.getDate(),
                      m = date.getMonth(),
                      y = date.getFullYear();
              $('#calendar').fullCalendar({
                  header: {
                      left: 'prev,next today',
                      center: 'title',
                      right: 'month,agendaWeek,agendaDay'
                  },
                  buttonText: {//This is to add icons to the visible buttons
                      prev: "&lt;span class='fa fa-caret-left'&gt;&lt;/span&gt;",
                      next: "&lt;span class='fa fa-caret-right'&gt;&lt;/span&gt;",
                      today: 'today',
                      month: 'month',
                      week: 'week',
                      day: 'day'
                  },
                  //Random default events
                  events: [
                      {
                          title: 'All Day Event',
                          start: new Date(y, m, 1),
                          backgroundColor: "#f56954", //red 
                          borderColor: "#f56954" //red
                      },
                      {
                          title: 'Long Event',
                          start: new Date(y, m, d - 5),
                          end: new Date(y, m, d - 2),
                          backgroundColor: "#f39c12", //yellow
                          borderColor: "#f39c12" //yellow
                      },
                      {
                          title: 'Meeting',
                          start: new Date(y, m, d, 10, 30),
                          allDay: false,
                          backgroundColor: "#0073b7", //Blue
                          borderColor: "#0073b7" //Blue
                      },
                      {
                          title: 'Lunch',
                          start: new Date(y, m, d, 12, 0),
                          end: new Date(y, m, d, 14, 0),
                          allDay: false,
                          backgroundColor: "#00c0ef", //Info (aqua)
                          borderColor: "#00c0ef" //Info (aqua)
                      },
                      {
                          title: 'Birthday Party',
                          start: new Date(y, m, d + 1, 19, 0),
                          end: new Date(y, m, d + 1, 22, 30),
                          allDay: false,
                          backgroundColor: "#00a65a", //Success (green)
                          borderColor: "#00a65a" //Success (green)
                      },
                      {
                          title: 'Click for Google',
                          start: new Date(y, m, 28),
                          end: new Date(y, m, 29),
                          url: 'http://google.com/',
                          backgroundColor: "#3c8dbc", //Primary (light-blue)
                          borderColor: "#3c8dbc" //Primary (light-blue)
                      }
                  ],
                  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 = "#f56954"; //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
                  colorChooser
                          .css({"background-color": currColor, "border-color": currColor})
                          .html($(this).text()+' &lt;span class="caret"&gt;&lt;/span&gt;');
              });
              $("#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 event
                  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 functionality
                  ini_events(event);
  
                  //Remove event from text input
                  $("#new-event").val("");
              });
  </code></pre>
  
  <p>In the code below I substitute the dummy events with my json object and I am trying with a for loop to create custom events. The object comes normally but the events are not represented on the calendar.</p>
  
  <pre><code>  /* initialize the calendar
              -----------------------------------------------------------------*/
  
  
      $.ajax({
          type: "POST",
          url: "../services/myservice.asmx/mylist",
          data: "{}",
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (data) {
  
  
  
  
  
  
      //Date for the calendar events (dummy data)
  
  
      $('#calendar').fullCalendar({
          header: {
              left: 'prev,next today',
              center: 'title',
              right: 'month,agendaWeek,agendaDay'
          },
          buttonText: {//This is to add icons to the visible buttons
              prev: "&lt;span class='fa fa-caret-left'&gt;&lt;/span&gt;",
              next: "&lt;span class='fa fa-caret-right'&gt;&lt;/span&gt;",
              today: 'today',
              month: 'month',
              week: 'week',
              day: 'day'
          },
          //There i substitute the dummy events with the real that comes from  json
          events: [function () {
  
              for (i = 0; i &lt; data.d.length; i++) {
  
  
                  {
                      title: (data.d[i].thetitle);
                      start: new Date(data.d[i].y, data.d[i].m, data.d[i].d, 12, 0);
                      end: new Date(data.d[i].y, data.d[i].m, data.d[i].d, 14, 0);
                      allDay: false;
                      backgroundColor: "#00c0ef"; //Info (aqua)
                      borderColor: "#00c0ef"; //Info (aqua)
                  }
  
              }
          }],
  
          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");
  
              $('#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 = "#f56954"; //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
          colorChooser
                  .css({ "background-color": currColor, "border-color": currColor })
                  .html($(this).text() + ' &lt;span class="caret"&gt;&lt;/span&gt;');
      });
      $("#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 event
          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 functionality
          ini_events(event);
  
          //Remove event from text input
          $("#new-event").val("");
      });
     }
      });
  </code></pre>
  
  <p>EDIT. I iam posting the original template of the calendar that i am trying to use</p>
  
  <pre><code>   &lt;!-- THE CALENDAR --&gt;
                                  &lt;div id="calendar"&gt;&lt;/div&gt;
                              &lt;/div&gt;&lt;!-- /.box-body --&gt;
                          &lt;/div&gt;&lt;!-- /. box --&gt;
                      &lt;/div&gt;&lt;!-- /.col --&gt;
                  &lt;/div&gt;&lt;!-- /.row --&gt;  
  
  
              &lt;/section&gt;&lt;!-- /.content --&gt;
          &lt;/aside&gt;&lt;!-- /.right-side --&gt;
      &lt;/div&gt;&lt;!-- ./wrapper --&gt;
  
  
      &lt;!-- jQuery 2.0.2 --&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- jQuery UI 1.10.3 --&gt;
      &lt;script src="../js/jquery-ui-1.10.3.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- Bootstrap --&gt;
      &lt;script src="../js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- AdminLTE App --&gt;
      &lt;script src="../js/AdminLTE/app.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- fullCalendar --&gt;
      &lt;script src="../js/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;!-- Page specific script --&gt;
      &lt;script type="text/javascript"&gt;
          $(function() {
  
              /* initialize the external events
               -----------------------------------------------------------------*/
              function ini_events(ele) {
                  ele.each(function() {
  
                      // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
                      // it doesn't need to have a start or end
                      var eventObject = {
                          title: $.trim($(this).text()) // use the element's text as the event title
                      };
  
                      // store the Event Object in the DOM element so we can get to it later
                      $(this).data('eventObject', eventObject);
  
                      // make the event draggable using jQuery UI
                      $(this).draggable({
                          zIndex: 1070,
                          revert: true, // will cause the event to go back to its
                          revertDuration: 0  //  original position after the drag
                      });
  
                  });
              }
              ini_events($('#external-events div.external-event'));
  
              /* initialize the calendar
               -----------------------------------------------------------------*/
              //Date for the calendar events (dummy data)
              var date = new Date();
              var d = date.getDate(),
                      m = date.getMonth(),
                      y = date.getFullYear();
              $('#calendar').fullCalendar({
                  header: {
                      left: 'prev,next today',
                      center: 'title',
                      right: 'month,agendaWeek,agendaDay'
                  },
                  buttonText: {//This is to add icons to the visible buttons
                      prev: "&lt;span class='fa fa-caret-left'&gt;&lt;/span&gt;",
                      next: "&lt;span class='fa fa-caret-right'&gt;&lt;/span&gt;",
                      today: 'today',
                      month: 'month',
                      week: 'week',
                      day: 'day'
                  },
                  //Random default events
                  events: [
                      {
                          title: 'All Day Event',
                          start: new Date(y, m, 1),
                          backgroundColor: "#f56954", //red 
                          borderColor: "#f56954" //red
                      },
                      {
                          title: 'Long Event',
                          start: new Date(y, m, d - 5),
                          end: new Date(y, m, d - 2),
                          backgroundColor: "#f39c12", //yellow
                          borderColor: "#f39c12" //yellow
                      },
                      {
                          title: 'Meeting',
                          start: new Date(y, m, d, 10, 30),
                          allDay: false,
                          backgroundColor: "#0073b7", //Blue
                          borderColor: "#0073b7" //Blue
                      },
                      {
                          title: 'Lunch',
                          start: new Date(y, m, d, 12, 0),
                          end: new Date(y, m, d, 14, 0),
                          allDay: false,
                          backgroundColor: "#00c0ef", //Info (aqua)
                          borderColor: "#00c0ef" //Info (aqua)
                      },
                      {
                          title: 'Birthday Party',
                          start: new Date(y, m, d + 1, 19, 0),
                          end: new Date(y, m, d + 1, 22, 30),
                          allDay: false,
                          backgroundColor: "#00a65a", //Success (green)
                          borderColor: "#00a65a" //Success (green)
                      },
                      {
                          title: 'Click for Google',
                          start: new Date(y, m, 28),
                          end: new Date(y, m, 29),
                          url: 'http://google.com/',
                          backgroundColor: "#3c8dbc", //Primary (light-blue)
                          borderColor: "#3c8dbc" //Primary (light-blue)
                      }
                  ],
                  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 = "#f56954"; //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
                  colorChooser
                          .css({"background-color": currColor, "border-color": currColor})
                          .html($(this).text()+' &lt;span class="caret"&gt;&lt;/span&gt;');
              });
              $("#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 event
                  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 functionality
                  ini_events(event);
  
                  //Remove event from text input
                  $("#new-event").val("");
              });
          });
      &lt;/script&gt;
  </code></pre>