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

})

Webruster, I edited my initial post to show the HTML and Timetable class — Dude365, Oct 28 '15 at 12:51
try to arrange the order same as shown in the example and try to see in console are you getting any Js errors — Krsna Kishore, Oct 28 '15 at 15:37
No luck, when I changed the order of moment.js and full-calendar.js it just through an error in the console. Also tried moving script.js (which contains the AJAX call) to the bottom of the page so it loads after the calendar but nothing happened either unfortunately. — Dude365, Oct 28 '15 at 16:09
https://stackoverflow.com/questions/38790520/maping-events-to-fullcalender-using-json/38831073#38831073 — Eldhose p k, Sep 12 '16 at 08:44

score 2 · Answer 1 · edited Mar 30 '17 at 08:22

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>

score 1 · Answer 2 · edited Feb 03 '16 at 04:35

1

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

edited Feb 03 '16 at 04:35

GAMITG

3,810
7
32
51

answered Feb 03 '16 at 04:15

KC Chua

19
5

Can you elaborate on your solution? – Scuba Steve Dec 10 '16 at 03:38

score 0 · Answer 3 · answered Oct 31 '15 at 16:06

0

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);

answered Oct 31 '15 at 16:06

Gloria Santin

2,066
3
51
124

Hi Gloria, thanks for your comment. You were right about the each function being defined incorrectly. Unfortunately it didn't solve the issue with the dates appearing however. I'm a bit stumped with it to be honest, everything that I've tried that seems to make sense doesn't work. btw: when I used callback(events) I get the error "callback is not a function". – Dude365 Nov 01 '15 at 21:22

score 0 · Answer 4 · answered Mar 30 '17 at 06:36

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>

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

4 Answers4