Question

I’ve been trying to get this to work for weeks now, all to no avail. I am sure that my code must be failing through something fairly small and stupid, but having tried a number of different approaches I’m starting to really struggle as to what the problem might be. Has anybody else managed to get the jQuery Week Calendar (http://github.com/themouette/jquery-week-calendar) working with an HTTPHandler returning the JSON?

I’ve tried:

1. Hard-coding the JSON to come out of the handler as a string (e.g. “events: [{ etc }]”)
2. Trying with or without the initial “events : “
3. Using LINQ to retrieve data, then serializing with JavaScriptSerializer
4. Using DataContractJsonSerializer instead
5. Creating a ToJSON method with the above
6. Using $.getJson to retrieve the data
7. Using $.get instead
8. Using $.ajax, with “async = false”
9. Putting the data call in a function, then calling the function by:

    data: function(start, end, callback) {
        callback(getData());
    }

None of which seem to work. I’ve even tried running the data call before the calendar code using $.get, $getJSON and $.ajax, like:

    $.getJSON('/content/handlers/GetScheduledAppointments.ashx', function(json) {
        $calendar.weekCalendar({
            .
            .
            .
            data: json
        });
    });

I’ve tried so many different ways that I can’t really post every example of code that fails, but if anybody can help me I’ll be more than happy to post some examples if needed.

Has anybody managed to get these two things to work together…?

Answer 1

For anybody else having the same issues as me, I have a number of pointers that may help you. These are only things that I found helped me and are just guidance for anybody else who has wasted weeks of valuable time wondering why seemingly fine code doesn’t work. I am well aware my skillz are weak (old man), but if it helps save even one person some time then my time hasn’t been completely wasted.

This is for C# .NET 3.5 Web Forms, not MVC.

Firstly, make sure the ContentType and ContentEncoding properties of the Response object are set to JSON. In the past I have used “text/plain”, but this doesn’t seem to work for me on this occasion:

context.Response.ContentType = "application/json";
context.Response.ContentEncoding = Encoding.UTF8;

If using LINQ, creating a new object in the order and format the calendar is expecting will help minimise problems with data irregularities. If you require read-only appointments then you can just add the option to the list. The “title” element below is working as an ISNULL or COALESCE would in SQL, as to prevent nulls being returned:

var apps = (
    from a in db.Appointments
    select new {
        id = a.id,
        start = a.startTime.Value,
        end = a.endTime.Value,
        title = a.subjectLine == null ? "" : a.subjectLine
    }).ToList();

Whilst there are many ways of serializing the dataset into JSON, I have found the most clean method is to use the NewtonSoft Json.NET library. This is as simple as adding one line to create a JSON object, with the necessary ISO8601 date formatting:

return JsonConvert.SerializeObject(apps, new IsoDateTimeConverter());

As far as the jQuery side goes I’ll only show the “data: ” function, as this is the part that had me flummoxed for the longest:

data: function(start, end, callback) {
    $.ajax({
        url:        "/content/handlers/GetScheduledAppointments.ashx",
        type:       "GET",
        success:    function(json) {
            callback(json);
        },
        async:      false
    });
}

A handy tip regarding dates, which I came to before I started using the Json.NET library – if you simply cannot get .NET to return dates in a format that jWC likes, then use the[Date.js library to perform additional formatting in the jQuery itself. For days I couldn’t get my back-end to output the start and end times in a format that would render on the calendar, no matter what I tried. In all the functioning examples (with local data being generated in the jQuery) the dates were being created using the following format:

new Date(year, month, day, hour, minute)

So, using this basis, it is also possible to explicitly cast dates returned from the back end, as the Date.js library will take almost anything approaching a date and work its magic:

data: function(start, end, callback) {
    $.ajax({
        url:        "/content/handlers/GetScheduledAppointments.ashx",
        type:       "GET",
        success:    function(json) {
            if ($.isArray(json)) { 
                $.each(json, function(key, value) { 
                    value.start = new Date(value.start); 
                    value.end = new Date(value.end); 
                });
            }
            callback(json);
        },
        async:      false
    });
}

I know none of this is very leet (or even optimised), but hopefully this can be of use to some people who are having real difficulty with jWC and .NET.