Adding Events to Full Calendar using ASP.NET, C# and JSON

Question

Ok, so I know this may be a bit of a duplicate of this question: fullCalendar events not showing even though correct JSON feed But after trying the code to no avail I thought I would post another question to see if any body could help

Basically I'm trying to add events dynamically to the Full Calendar JQuery plugin with ASP.NET C# using data from an SQL Server Database.

Here is the code I have used in my web method in the code behind file

[WebMethod]
public static String TestOnWebService()
{

    String connectionString = WebConfigurationManager.ConnectionStrings["UniString"].ConnectionString;
    SqlConnection myConnection = new SqlConnection(connectionString);

    myConnection.Open();

    String query = "SELECT * FROM timetable";

    SqlCommand cmd = new SqlCommand(query, myConnection);

    SqlDataReader reader = cmd.ExecuteReader();


    string myJsonString = "";
    List<object> myList = new List<object>();


    if (reader.HasRows)
    {
        var indexOfId = reader.GetOrdinal("id");
        var indexOfLecture = reader.GetOrdinal("lecture");
        var indexOfStartDate = reader.GetOrdinal("start_date");
        var indexOfEndDate = reader.GetOrdinal("end_date");
        var indexOfTimeStart = reader.GetOrdinal("start_time");
        var indexOfTimeEnd = reader.GetOrdinal("end_time");


        while (reader.Read())
        {

            var Id = reader.GetValue(indexOfId).ToString();
            var Lecture = reader.GetValue(indexOfLecture).ToString();
            var DateStart = reader.GetValue(indexOfStartDate).ToString();
            var DateEnd = reader.GetValue(indexOfEndDate).ToString();
            var StartTime = reader.GetValue(indexOfTimeStart);
            var EndTime = reader.GetValue(indexOfTimeEnd);


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


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


            timeTable t_table = new timeTable(Id, Lecture, SendStartDate, SendEndDate);


            myList.Add(t_table);


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


        myConnection.Close();
    }

    return myJsonString;

}

}

and here is my AJAX call which I use to grab the JSON data via POST method:

$(document).ready(function () {

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventClick: function() {
        alert('a day has been clicked!');
    }, 
    events: function (start, end, callback) {
        $.ajax({
            type: "POST",    
            url: "webserv.aspx/TestOnWebService",   
            contentType: "application/json; charset=utf-8",  
            dataType: "json",
            success: function (doc) {
                alert("Success");
                var events = [];
                alert(doc.d);
                var obj = $.parseJSON(doc.d);  
                console.log(obj);
                $(obj.event).each(function () {                           
                    events.push({
                        title: $(this).attr('title'),  
                        start: $(this).attr('start'),     
                        end: $(this).attr('end'),
                        id: $(this).attr('id')
                    });
                });                     
                //callback(events);
                callback && callback(events);
            },
            error: function(xhr, status, error) {
                alert(xhr.responseText);
            }
        });
    }
})

})

The AJAX call seems to succeed as I can alert out a success message and I can also alert out the JSON data, which looks like this:

I can also output the parsed object of the JSON Data in the console which looks like this:

I get no errors in the console when I do this but the events don't seem to add to the Full Calendar UI (which also appears fine on my page).

I think I might be going wrong somewhere with the following code but I can't seem to put my finger on it:

$(obj.event).each(function () {                           
  events.push({
  title: $(this).attr('title'),  
  start: $(this).attr('start'),     
  end: $(this).attr('end'),
  id: $(this).attr('id')
});

Also I get an the error "Callback is not a function" when I use this code:

callback(events);

But not when I use this:

callback && callback(events);

I'm not sure if this has anything to do with the problems I'm experiencing but I thought I would add it in just in case.

Thanks in advance for any of your responses, they are much appreciated.

EDIT:

Apologies, I forgot to add the code for my timeTable class. It is as follows:

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

public timeTable(String I, String t, String ds, String de)
{
    this.id = I;
    this.title = t;
    this.start = ds;
    this.end = de;
}


}

My HTML is literally just one line:

<div id="calendar"></div> 

Here is the javascript files I have linked in the head of my page

        <!-- Javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src='js/moment.js'></script>
<script src='js/fullcalendar.js'></script>
<script src="js/script.js"></script>

Update:

So another thing I've tried is looping through the object I have created using my JSON string and pushing it into the events array, however this doesn't seem to work either. See code below:

$(document).ready(function () {

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventClick: function () {
        alert('a day has been clicked!');
    },
    events: function (start, end, callback) {
        $.ajax({
            type: "POST",
            url: "webserv.aspx/TestOnWebService",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (doc) {
                alert("Success");
                var events = [];
                alert(doc.d);
                var obj = $.parseJSON(doc.d);
                console.log(obj);

                for (var k in obj) {// k represents the id keys 1,2,3
                    var d = obj[k]; // We assign a the reference to each id object to the d variable
                      for (var p in d) { //Next we access the nested objects by using the p variable
                          if (p.hasOwnProperty) { //Check to make sure p has its own properties
                              //alert(p + ":" + d[p]); //We alert the key (d) and the keys value (d[p])
                              events.push(p + ": " + d[p]);
                              }

                            }
                     }
                console.log(events);

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

})

It outputs the array to the console but still doesn't show any events on the Full Calendar UI :-(

Update 2

Here's my next code edit which doesn't seem to have worked either, I unsure why as it populates the events array fine with the values needed, I also added a addDay = "false" attribute as well but still no joy, Any body at all got any idea's, I'm stumped:

$(document).ready(function () {

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    eventClick: function () {
        alert('a day has been clicked!');
    },
    events: function () {
        $.ajax({
            type: "POST",
            url: "webserv.aspx/TestOnWebService",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (doc) {
                alert("Success");
                var events = [];
                //console.log(doc.d);
                var obj = $.parseJSON(doc.d);
                //console.log(obj);

                $.each(obj, function (index) {

                    $.each(obj[index], function (key, value) {

                        events.push(key + ": " + value)


                    });

                });

                console.log(events);

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

})

Answer 1

More correct:

<script>

    $(document).ready(function () {

        $.ajax({
            type: "POST",
            url: "../04_Entries/04_42_ReservationCalander.aspx/TestOnWebService",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (doc) {

                var events = [];
                var docd = doc.d;


                var obj = $.parseJSON(doc.d);
                console.log(obj);


               $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    eventClick: function () {

                    },

                    editable: false,

                    events: obj //Just pass obj to events
                })
                console.log(events);

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

</script>

Answer 2

I solved this by adding parameter in the 'events: function ()', to 'events: function (start, end,timezone, callback). It should work now.

Answer 3

In your original code, I believe, you are defining the 'each' function incorrectly. Remove the 'event from the 'obj. and use 'callback(events). This what it should be:

//only use 'obj' which has the list of events
    $(obj).each(function () {                           
       events.push({
       title: $(this).attr('title'),  
       start: $(this).attr('start'),     
       end: $(this).attr('end'),
       id: $(this).attr('id')
       });
    });                     
    callback(events);
    //callback && callback(events);

Answer 4

Well this worked for me

<script>

    $(document).ready(function () {
        var something = "";
        $.ajax({
            type: "POST",
            url: "../04_Entries/04_42_ReservationCalander.aspx/TestOnWebService",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (doc) {
                alert("Success");
                var events = [];
                var docd = doc.d;
                something = docd;

                var obj = $.parseJSON(doc.d);
                console.log(obj);

                for (var k in obj) {// k represents the id keys 1,2,3
                    var d = obj[k]; // We assign a the reference to each id object to the d variable
                    for (var p in d) { //Next we access the nested objects by using the p variable
                        if (p.hasOwnProperty) { //Check to make sure p has its own properties
                            //alert(p + ":" + d[p]); //We alert the key (d) and the keys value (d[p])
                            events.push(p + ": " + d[p]);
                        }

                    }
                }
                  $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    eventClick: function () {
                        alert('a day has been clicked!');
                    },
                    events: obj
                })
                console.log(events);

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


    });

</script>