Currently working on the jquery fullcalendar, I've been unable to add events to it from code behind. I've tried all of these possible solutions but none of them worked for me: Fullcalendar/Fetching JSON feed(Edited) fullCalendar events not showing even though correct JSON feed JQuery FullCalendar not displaying events from aspx page This is my code [WebMethod] and my events class

Mapping Events to FullCalendar using JSON

Currently working on the jquery fullcalendar, I’ve been unable to add events to it from code behind.

I’ve tried all of these possible solutions but none of them worked for me:

This is my code

[WebMethod]

public static String TestOnWebService()
        {
            int i = 1;
           
            string myJsonString = "";
            List<object> myList = new List<object>();
            dt = db.getPublicHolidays();

            foreach (DataRow dr in dt.Rows)
            {
                        var id = i;
                        var title = dr["name"].ToString();
                        var start = dr["startDate"].ToString();
                        var end = dr["endDate"].ToString();


                        //Convert Implicity typed var to Date Time
                        DateTime RealStartDate = Convert.ToDateTime(start);
                        DateTime RealEndDate = Convert.ToDateTime(end);


                        //Convert Date Time to ISO
                        String SendStartDate = RealStartDate.ToString("s");
                        String SendEndDate = RealEndDate.ToString("s");


                        Events t_table = new Events(id, title, start, end);

                        myList.Add(t_table);
                        i++;
                    }

            myJsonString = (new JavaScriptSerializer()).Serialize(myList);
            return myJsonString;
            }
        }

JavaScript
​x
 
public static String TestOnWebService()
        {
            int i = 1;
           
            string myJsonString = "";
            List<object> myList = new List<object>();
            dt = db.getPublicHolidays();
​
            foreach (DataRow dr in dt.Rows)
            {
                        var id = i;
                        var title = dr["name"].ToString();
                        var start = dr["startDate"].ToString();
                        var end = dr["endDate"].ToString();
​
​
                        //Convert Implicity typed var to Date Time
                        DateTime RealStartDate = Convert.ToDateTime(start);
                        DateTime RealEndDate = Convert.ToDateTime(end);
​
​
                        //Convert Date Time to ISO
                        String SendStartDate = RealStartDate.ToString("s");
                        String SendEndDate = RealEndDate.ToString("s");
​
​
                        Events t_table = new Events(id, title, start, end);
​
                        myList.Add(t_table);
                        i++;
                    }
​
            myJsonString = (new JavaScriptSerializer()).Serialize(myList);
            return myJsonString;
            }
        }
​

and my events class

 public class Events
{
    public int id { get; set; }
    public String title { get; set; }
    public String start { get; set; }
    public String end { get; set; }

    public Events(int id2, String I, String t, String ds)
    {
        this.id = id2;
        this.title = I;
        this.start = t;
        this.end = ds;
    }
}

JavaScript
 
 public class Events
{
    public int id { get; set; }
    public String title { get; set; }
    public String start { get; set; }
    public String end { get; set; }
​
    public Events(int id2, String I, String t, String ds)
    {
        this.id = id2;
        this.title = I;
        this.start = t;
        this.end = ds;
    }
}
​

Here is the front end code

events: function (start, end, callback) {
          $.ajax({
              type: "POST",    //WebMethods will not allow GET
              url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',   //url of a webmethod - example below
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (doc) {
                  var events = [];   //javascript event object created here
                  var obj = $.parseJSON(doc.d);  //.net returns json wrapped in "d"

                  for(var i=0;i<obj.length;i++){
                      console.log(obj[i]['id']);
                      console.log(obj[i]['title']);
                      console.log(obj[i]['start']);
                      console.log(obj[i]['end']);
                  }


                  $(obj.event).each(function () { //yours is obj.calevent                          
                      events.push({
                          title: $(this).attr('title'),  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                          start: $(this).attr('start'), // will be parsed into DateTime object    
                          end: $(this).attr('end'),
                          id: $(this).attr('id')
                      });
                  });
                  callback(events);
              }
          });
      }

JavaScript
 
events: function (start, end, callback) {
          $.ajax({
              type: "POST",    //WebMethods will not allow GET
              url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',   //url of a webmethod - example below
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              success: function (doc) {
                  var events = [];   //javascript event object created here
                  var obj = $.parseJSON(doc.d);  //.net returns json wrapped in "d"
​
                  for(var i=0;i<obj.length;i++){
                      console.log(obj[i]['id']);
                      console.log(obj[i]['title']);
                      console.log(obj[i]['start']);
                      console.log(obj[i]['end']);
                  }
​
​
                  $(obj.event).each(function () { //yours is obj.calevent                          
                      events.push({
                          title: $(this).attr('title'),  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                          start: $(this).attr('start'), // will be parsed into DateTime object    
                          end: $(this).attr('end'),
                          id: $(this).attr('id')
                      });
                  });
                  callback(events);
              }
          });
      }
​

This is the result I get

Answer

SO AFTER THREE DAYS OF STRUGGLE, I GOT IT TO WORK! I added events from database to add to the jquery fullcalender. this is what solved my problem! Here is my code

My html and javascript code

    <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-md-3">
              <div class="box box-solid">
                <div class="box-header with-border">
                  <h4 class="box-title">Draggable Events</h4>
                </div>
                <div class="box-body">
                  <!-- the events -->
                  <div id="external-events">


                      <div runat="server" id="check">

                      </div>



                    <div class="checkbox">
                      <label for="drop-remove">
                        <input type="checkbox" id="drop-remove">
                        remove after drop
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /. box -->
              <div class="box box-solid">
                <div class="box-header with-border">
                  <h3 class="box-title">Create Event</h3>
                </div>
                <div class="box-body">
                  <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
                    <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
                    <ul class="fc-color-picker" id="color-chooser">
                      <li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                  <div class="input-group">
                    <input id="new-event" type="text" class="form-control" placeholder="Event Title">

                    <div class="input-group-btn">
                      <button id="add-new-event" type="button" class="btn btn-primary btn-flat">Add</button>
                    </div>
                    <!-- /btn-group -->
                  </div>
                  <!-- /input-group -->
                </div>
              </div>

                <br />
                <button onclick="saveEvent();">Save</button>
            </div>
            <!-- /.col -->
            <div class="col-md-9">
              <div class="box box-primary">
                <div class="box-body no-padding">
                  <!-- THE CALENDAR -->
                  <div id="calendar"></div>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /. box -->
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->
        </section>
        <!-- /.content -->

                 </ContentTemplate>

                 </asp:UpdatePanel>
            <!-- jQuery 2.2.0 -->

    <!-- Page specific script -->
    <script>
        var data2="";
        var startDateFinal="";
        var endDateFinal="";
        var eventNameFinal="";

      $(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())
              };



            // 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'
          },
          <%--events: {
              $.ajax({
                  type: "POST",    
                  url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
                  data: "{}",
                  contentType: "application/json; charset=utf-8",  
                  dataType: "json",
                  success: function (doc) {
                      alert("Success");
                      var events = [];
                      alert(doc.d);
                      var obj = $.parseJSON(doc.d);
                      for(var i=0;i<obj.length;i++){


                              title: 'All Day Event',
                              start: new Date(y, m, 1),
                              backgroundColor: "#f56954", //red
                              borderColor: "#f56954" //red


                            console.log(obj[i]['id']);
                             console.log(obj[i]['title']);
                              console.log(obj[i]['start']);
                              console.log(obj[i]['end']);
                      }


                      //$(obj.event).each(function () {                           
                      //    events.push({
                      //        id: $(this).attr('id'),
                      //        title: $(this).attr('title'),
                      //        start: $(this).attr('start'),
                      //        end: $(this).attr('end'),
                      //        backgroundColor: "#0073b7", 
                      //        borderColor: "#0073b7"            
                      //    });



                     // });                     
                      //callback(events);
                      callback && callback(events);
                  },
                  error: function(xhr, status, error) {
                      alert(xhr.responseText);
                  }
              });
               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)
            }
          ]


          $.ajax({
                  type: "GET",
                  url:  '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
                  data: {
                      name: $(this).attr('name'),
                      startDate: $(this).attr('startDate'),
                      endDate: $(this).attr('endDate'),
                  },
                      success: function(events)
                      {
                          $('#calendar').fullCalendar('removeEvents');
                          $('#calendar').fullCalendar('addEventSource', events);         
                          $('#calendar').fullCalendar('rerenderEvents' );
                      }
                  });

          },--%>

          // events: function () {
          //    var data = getData();
          //   console.log(data);

          //   //var events = [];
          //   //       $.each(data, function (key, val) {
          //   //           events.push({
          //   //               title: val.title,
          //   //               start: val.start, 
          //   //               end: val.end
          //   //           });
          //   //       });  

          //          //callback(events); 

          //},



          buttonText: {
            today: 'today',
            month: 'month',
            week: 'week',
            day: 'day'
          },

          eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
              debugger;
              if (event.forceAllDay && !allDay) {
                  revertFunc();
              } else {
                  if (!confirm('Move event?')) {
                      revertFunc();
                  } else {
                      console.log(event.id);
                  }
              }
          },

          eventDrop: function (event, delta, revertFunc) {
              //inner column movement drop so get start and call the ajax function......
              //debugger;
              console.log(event.start.format());
              console.log(event.id);
              var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
              var end = event.end || event.start.clone().add(defaultDuration);

               var n = 1;
              var dateMnsFive2 = moment(end).subtract(n , 'day');
              var date2 = dateMnsFive2.format("YYYY-MM-DD");

              console.log('end is ' + date2);

              //alert(event.title + " was dropped on " + event.start.format());

               //***********************************
              startDateFinal = event.start.format();
              endDateFinal = date2;
              eventNameFinal = event.title;
              //**********************************



          },
          editable: true,
          droppable: true, // this allows things to be dropped onto the calendar !!!

          drop: function (date, event, allDay) { // this function is called when something is dropped

              console.clear();
              console.log("dropped");


              console.log(date.format());


              var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
              var end = date.clone().add(defaultDuration); // on drop we only have date given to us
              console.log('end is ' + end.format());




            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');
            console.log(originalEventObject["title"]);



              //***********************************
              startDateFinal = date.format();
              endDateFinal = end.format();
              eventNameFinal = originalEventObject["title"];
              //**********************************




            // 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();
            }

          },

          eventResize: function(event,dayDelta,minuteDelta,revertFunc) {



                var n = 1;
              var dateMnsFive = moment(event.end.format()).subtract(n , 'day');
              var date = dateMnsFive.format("YYYY-MM-DD");
              alert(event.title + " end is now " + date);

              //*************************************
              eventNameFinal = event.title;
              endDateFinal = date;
              //*************************************


          },
         events: function (start, end, callback) {
              $.ajax({
                  type: "POST",    //WebMethods will not allow GET
                  url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',   //url of a webmethod - example below
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function (doc) {
                      var events = [];   //javascript event object created here
                      var obj = $.parseJSON(doc.d);  //.net returns json wrapped in "d"



                      for(var i=0;i<obj.length;i++){
                          console.log(obj[i]['id']);
                          console.log(obj[i]['title']);
                          console.log(obj[i]['start']);
                          console.log(obj[i]['end']);

                          addCalanderEvent(obj[i]['id'],obj[i]['start'],obj[i]['end'],obj[i]['title']);

                      }



                      //callback(events);
                  }
              });
          }
          <%--events: {
            type: "POST", 
            url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: {

                title: $(this).attr('title'),  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                start: $(this).attr('start'), // will be parsed into DateTime object    
                end: $(this).attr('end'),
                id: $(this).attr('id')
            },
            error: function() {
                alert('there was an error while fetching events!');
            },
            color: 'yellow',   // a non-ajax option
            textColor: 'black' // a non-ajax option
        }--%>

        });




        /* ADDING EVENTS */
        var currColor = "#3c8dbc"; //Red by default
        //Color chooser button
        var colorChooser = $("#color-chooser-btn");
        $("#color-chooser > li > 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 = $("<div />");
          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("");
        });
      });



      function saveEvent(){
            console.clear();
            console.log(startDateFinal +" - "+ endDateFinal+" - "+eventNameFinal);

            $.ajax({
                 type: "POST",
                 url: '<%= ResolveUrl("EmpHolidays.aspx/saveEvent") %>',
                 data: "{'startYear':'" + startDateFinal + "', 'endYear':'" + endDateFinal + "', 'eventName':'" + eventNameFinal + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: 'json',
                 success: function (response) {
                      if (response.d) {
                         debugger;
                 }
                 else {
                          debugger;
                 }
                 },
                 failure: function (response) {
                          debugger;
                 }
            });
        }

       function getData() {

        var data3;
        $.ajax({
            type: "POST",    
            url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
            data: "{}",
            contentType: "application/json; charset=utf-8",  
            dataType: "json",
            async:false,
             success: function (doc) {

                      data3 = $.parseJSON(doc.d);
                      data3 = JSON.stringify(data3)

                  },
                  error: function(xhr, status, error) {
                      alert(xhr.responseText);
                  }
        });



        return data3;


        }


        function addCalanderEvent(id, start, end, title)
        {

        console.log(id + start + end + title);

        var eventObject = {
        title: title,
        start: start,
        end: end,
        id: id,
        allDay: true
        };

        $('#calendar').fullCalendar('renderEvent', eventObject, true);
        return eventObject;
        }

    </script>

<script src="../plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="../plugins/fullcalendar/fullcalendar.min.js"></script>

JavaScript
 
    <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-md-3">
              <div class="box box-solid">
                <div class="box-header with-border">
                  <h4 class="box-title">Draggable Events</h4>
                </div>
                <div class="box-body">
                  <!-- the events -->
                  <div id="external-events">
​
​
                      <div runat="server" id="check">
​
                      </div>
​
​
​
                    <div class="checkbox">
                      <label for="drop-remove">
                        <input type="checkbox" id="drop-remove">
                        remove after drop
                      </label>
                    </div>
                  </div>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /. box -->
              <div class="box box-solid">
                <div class="box-header with-border">
                  <h3 class="box-title">Create Event</h3>
                </div>
                <div class="box-body">
                  <div class="btn-group" style="width: 100%; margin-bottom: 10px;">
                    <!--<button type="button" id="color-chooser-btn" class="btn btn-info btn-block dropdown-toggle" data-toggle="dropdown">Color <span class="caret"></span></button>-->
                    <ul class="fc-color-picker" id="color-chooser">
                      <li><a class="text-aqua" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-blue" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-light-blue" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-teal" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-yellow" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-orange" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-green" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-lime" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-red" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-purple" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-fuchsia" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-muted" href="#"><i class="fa fa-square"></i></a></li>
                      <li><a class="text-navy" href="#"><i class="fa fa-square"></i></a></li>
                    </ul>
                  </div>
                  <!-- /btn-group -->
                  <div class="input-group">
                    <input id="new-event" type="text" class="form-control" placeholder="Event Title">
​
                    <div class="input-group-btn">
                      <button id="add-new-event" type="button" class="btn btn-primary btn-flat">Add</button>
                    </div>
                    <!-- /btn-group -->
                  </div>
                  <!-- /input-group -->
                </div>
              </div>
​
                <br />
                <button onclick="saveEvent();">Save</button>
            </div>
            <!-- /.col -->
            <div class="col-md-9">
              <div class="box box-primary">
                <div class="box-body no-padding">
                  <!-- THE CALENDAR -->
                  <div id="calendar"></div>
                </div>
                <!-- /.box-body -->
              </div>
              <!-- /. box -->
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->
        </section>
        <!-- /.content -->
​
                 </ContentTemplate>
​
                 </asp:UpdatePanel>
            <!-- jQuery 2.2.0 -->
​
    <!-- Page specific script -->
    <script>
        var data2="";
        var startDateFinal="";
        var endDateFinal="";
        var eventNameFinal="";
​
      $(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())
              };
​
​
​
            // 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'
          },
          <%--events: {
              $.ajax({
                  type: "POST",    
                  url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
                  data: "{}",
                  contentType: "application/json; charset=utf-8",  
                  dataType: "json",
                  success: function (doc) {
                      alert("Success");
                      var events = [];
                      alert(doc.d);
                      var obj = $.parseJSON(doc.d);
                      for(var i=0;i<obj.length;i++){
​
​
                              title: 'All Day Event',
                              start: new Date(y, m, 1),
                              backgroundColor: "#f56954", //red
                              borderColor: "#f56954" //red
​
​
                            console.log(obj[i]['id']);
                             console.log(obj[i]['title']);
                              console.log(obj[i]['start']);
                              console.log(obj[i]['end']);
                      }
​
​
                      //$(obj.event).each(function () {                           
                      //    events.push({
                      //        id: $(this).attr('id'),
                      //        title: $(this).attr('title'),
                      //        start: $(this).attr('start'),
                      //        end: $(this).attr('end'),
                      //        backgroundColor: "#0073b7", 
                      //        borderColor: "#0073b7"            
                      //    });
​
​
​
                     // });                     
                      //callback(events);
                      callback && callback(events);
                  },
                  error: function(xhr, status, error) {
                      alert(xhr.responseText);
                  }
              });
               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)
            }
          ]
​
​
          $.ajax({
                  type: "GET",
                  url:  '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
                  data: {
                      name: $(this).attr('name'),
                      startDate: $(this).attr('startDate'),
                      endDate: $(this).attr('endDate'),
                  },
                      success: function(events)
                      {
                          $('#calendar').fullCalendar('removeEvents');
                          $('#calendar').fullCalendar('addEventSource', events);         
                          $('#calendar').fullCalendar('rerenderEvents' );
                      }
                  });
​
          },--%>
​
          // events: function () {
          //    var data = getData();
          //   console.log(data);
​
          //   //var events = [];
          //   //       $.each(data, function (key, val) {
          //   //           events.push({
          //   //               title: val.title,
          //   //               start: val.start, 
          //   //               end: val.end
          //   //           });
          //   //       });  
​
          //          //callback(events); 
​
          //},
​
​
​
          buttonText: {
            today: 'today',
            month: 'month',
            week: 'week',
            day: 'day'
          },
​
          eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
              debugger;
              if (event.forceAllDay && !allDay) {
                  revertFunc();
              } else {
                  if (!confirm('Move event?')) {
                      revertFunc();
                  } else {
                      console.log(event.id);
                  }
              }
          },
​
          eventDrop: function (event, delta, revertFunc) {
              //inner column movement drop so get start and call the ajax function......
              //debugger;
              console.log(event.start.format());
              console.log(event.id);
              var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
              var end = event.end || event.start.clone().add(defaultDuration);
​
               var n = 1;
              var dateMnsFive2 = moment(end).subtract(n , 'day');
              var date2 = dateMnsFive2.format("YYYY-MM-DD");
​
              console.log('end is ' + date2);
​
              //alert(event.title + " was dropped on " + event.start.format());
​
               //***********************************
              startDateFinal = event.start.format();
              endDateFinal = date2;
              eventNameFinal = event.title;
              //**********************************
​
​
​
          },
          editable: true,
          droppable: true, // this allows things to be dropped onto the calendar !!!
​
          drop: function (date, event, allDay) { // this function is called when something is dropped
​
              console.clear();
              console.log("dropped");
​
​
              console.log(date.format());
​
​
              var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration'));
              var end = date.clone().add(defaultDuration); // on drop we only have date given to us
              console.log('end is ' + end.format());
​
​
​
​
            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');
            console.log(originalEventObject["title"]);
​
​
​
              //***********************************
              startDateFinal = date.format();
              endDateFinal = end.format();
              eventNameFinal = originalEventObject["title"];
              //**********************************
​
​
​
​
            // 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();
            }
​
          },
​
          eventResize: function(event,dayDelta,minuteDelta,revertFunc) {
​
​
​
                var n = 1;
              var dateMnsFive = moment(event.end.format()).subtract(n , 'day');
              var date = dateMnsFive.format("YYYY-MM-DD");
              alert(event.title + " end is now " + date);
​
              //*************************************
              eventNameFinal = event.title;
              endDateFinal = date;
              //*************************************
​
​
          },
         events: function (start, end, callback) {
              $.ajax({
                  type: "POST",    //WebMethods will not allow GET
                  url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',   //url of a webmethod - example below
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function (doc) {
                      var events = [];   //javascript event object created here
                      var obj = $.parseJSON(doc.d);  //.net returns json wrapped in "d"
​
​
​
                      for(var i=0;i<obj.length;i++){
                          console.log(obj[i]['id']);
                          console.log(obj[i]['title']);
                          console.log(obj[i]['start']);
                          console.log(obj[i]['end']);
​
                          addCalanderEvent(obj[i]['id'],obj[i]['start'],obj[i]['end'],obj[i]['title']);
​
                      }
​
​
​
                      //callback(events);
                  }
              });
          }
          <%--events: {
            type: "POST", 
            url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: {
​
                title: $(this).attr('title'),  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                start: $(this).attr('start'), // will be parsed into DateTime object    
                end: $(this).attr('end'),
                id: $(this).attr('id')
            },
            error: function() {
                alert('there was an error while fetching events!');
            },
            color: 'yellow',   // a non-ajax option
            textColor: 'black' // a non-ajax option
        }--%>
​
        });
​
​
​
​
        /* ADDING EVENTS */
        var currColor = "#3c8dbc"; //Red by default
        //Color chooser button
        var colorChooser = $("#color-chooser-btn");
        $("#color-chooser > li > 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 = $("<div />");
          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("");
        });
      });
​
​
​
      function saveEvent(){
            console.clear();
            console.log(startDateFinal +" - "+ endDateFinal+" - "+eventNameFinal);
​
            $.ajax({
                 type: "POST",
                 url: '<%= ResolveUrl("EmpHolidays.aspx/saveEvent") %>',
                 data: "{'startYear':'" + startDateFinal + "', 'endYear':'" + endDateFinal + "', 'eventName':'" + eventNameFinal + "'}",
                 contentType: "application/json; charset=utf-8",
                 dataType: 'json',
                 success: function (response) {
                      if (response.d) {
                         debugger;
                 }
                 else {
                          debugger;
                 }
                 },
                 failure: function (response) {
                          debugger;
                 }
            });
        }
​
       function getData() {
​
        var data3;
        $.ajax({
            type: "POST",    
            url: '<%= ResolveUrl("EmpHolidays.aspx/TestOnWebService") %>',
            data: "{}",
            contentType: "application/json; charset=utf-8",  
            dataType: "json",
            async:false,
             success: function (doc) {
​
                      data3 = $.parseJSON(doc.d);
                      data3 = JSON.stringify(data3)
​
                  },
                  error: function(xhr, status, error) {
                      alert(xhr.responseText);
                  }
        });
​
​
​
        return data3;
​
​
        }
​
​
        function addCalanderEvent(id, start, end, title)
        {
​
        console.log(id + start + end + title);
​
        var eventObject = {
        title: title,
        start: start,
        end: end,
        id: id,
        allDay: true
        };
​
        $('#calendar').fullCalendar('renderEvent', eventObject, true);
        return eventObject;
        }
​
    </script>
​
<script src="../plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Slimscroll -->
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="../plugins/fullcalendar/fullcalendar.min.js"></script>
​

Here is the code behind function which returns json data from db

[WebMethod]
        public static String TestOnWebService()
        {
            int i = 1;

            string myJsonString = "";
            List<object> myList = new List<object>();
            dt = db.getPublicHolidays();

            foreach (DataRow dr in dt.Rows)
            {
                        var id = i;
                        var title = dr["name"].ToString();
                        var start = dr["startDate"].ToString();
                        var end = dr["endDate"].ToString();


                        //Convert Implicity typed var to Date Time
                        DateTime RealStartDate = Convert.ToDateTime(start);
                        DateTime RealEndDate = Convert.ToDateTime(end);


                        //Convert Date Time to ISO
                        String SendStartDate = RealStartDate.ToString("s");
                        String SendEndDate = RealEndDate.ToString("s");

                       //string start2 = ((RealStartDate.Ticks - 621355968000000000) / 10000000).ToString();
                       //string end2 = ((RealEndDate.Ticks - 621355968000000000) / 10000000).ToString();

                Events t_table = new Events(id, title, SendStartDate, SendEndDate);


                        myList.Add(t_table);
                        i++;

                    }

            myJsonString = (new JavaScriptSerializer()).Serialize(myList);
            return myJsonString;

            }
    }

JavaScript
 
[WebMethod]
        public static String TestOnWebService()
        {
            int i = 1;
​
            string myJsonString = "";
            List<object> myList = new List<object>();
            dt = db.getPublicHolidays();
​
            foreach (DataRow dr in dt.Rows)
            {
                        var id = i;
                        var title = dr["name"].ToString();
                        var start = dr["startDate"].ToString();
                        var end = dr["endDate"].ToString();
​
​
                        //Convert Implicity typed var to Date Time
                        DateTime RealStartDate = Convert.ToDateTime(start);
                        DateTime RealEndDate = Convert.ToDateTime(end);
​
​
                        //Convert Date Time to ISO
                        String SendStartDate = RealStartDate.ToString("s");
                        String SendEndDate = RealEndDate.ToString("s");
​
                       //string start2 = ((RealStartDate.Ticks - 621355968000000000) / 10000000).ToString();
                       //string end2 = ((RealEndDate.Ticks - 621355968000000000) / 10000000).ToString();
​
                Events t_table = new Events(id, title, SendStartDate, SendEndDate);
​
​
                        myList.Add(t_table);
                        i++;
​
                    }
​
            myJsonString = (new JavaScriptSerializer()).Serialize(myList);
            return myJsonString;
​
            }
    }
​

AND MY EVENTS CLASS

public class Events
{
    public int id { get; set; }
    public String title { get; set; }
    public String start { get; set; }
    public String end { get; set; }

    public Events(int id2, String I, String t, String ds)
    {
        this.id = id2;
        this.title = I;
        this.start = t;
        this.end = ds;
    }


}

JavaScript
 
public class Events
{
    public int id { get; set; }
    public String title { get; set; }
    public String start { get; set; }
    public String end { get; set; }
​
    public Events(int id2, String I, String t, String ds)
    {
        this.id = id2;
        this.title = I;
        this.start = t;
        this.end = ds;
    }
​
​
}
​

HERE IS THE OUTPUT 😀 😀

Advertisement

Answer