An AJAX calendar, QTip, .NET and JSON

Posted by Ed Nice on 11 August 2010 | 0 Comments

Tags: json, ajax, jquery, asp.net, c#, calendar, qtip

I recently needed to update a calendar on an old(ish) .NET 2.0 site.

It worked ok, but was based on the .NET calendar control and was showing its age.

I love writing cool new things, but I hate re-inventing the wheel, so I had a look at what was around in JQuery that migh do it?

For decent usability, I needed:

Rendering by month
Multiple events per day
No changes to the current event data
Something that can popup a div with more details and a link

There are a number of candidates for the calendar, but I selected fullCalendar as the most appropriate.

This looks pretty nice out of the box and has a load of callbacks for stuff so that I could hook in some click events for QTip and also had a really simple events model that would take a JSON feed.

This made it really easy to create data from the existing classes via a json parser that outputs data to a resource handler (.ashx) file for consumption by the calendar.

It was also quite straighforward to create some AJAX data for QTip, again in another Resource Handler (.ashx) file.

The demos and instructions for fullCalendar and QTip give you all you need to mash the two together, but there were a few things I struggled with.

QTip 1.01 like JQuery 1.3 but not 1.4. FullCalendar doesn't seem to care. There is a version based on 1.0.1 that uses 1.4 that fixed a load of errors in IE.

Actually, that was the only real issue.

A note on using a Resource Handler (.ashx) for ajax calls, rather than a, aspx page.

A while back, I found that calling AJAX data through Prototype where headers, body and html tags were added caused some issues with IE.

Using a .ashx file means you can do a simple Response.Write/Output which just sends raw data to the browser, which does half of AJAX's job for it, but stops IE playing up. This may have been specific to my implementation at the time, but .NET sends too much junk to the screen anyway, so I like the uncluttered rendering you get from a .ashx file. It's great for sending XML data out too.

In summary

You can save time by spending a little time on checking things out.

What is old may not be worthless.

It's always possible to get things working better without changing the underlying data or management of it, just the presentation.

Keep them wanting more

When this new calendar goes live, I'll post a link to it.

I'll also do a better 'how-to' so you can mash a calendar, a rollover and old data together in .NET.