Making the web work. Together.

An AJAX calendar, QTip, .NET and JSON

Posted by Ed on 11 August 2012 | 0 Comments

Tags: , , , , , ,

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 [url=http://arshaw.com/fullcalendar/]fullCalendar[/url] 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 [url=http://craigsworks.com/projects/qtip//]QTip[/url] 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. [url=http://github.com/dustmoo/qtip]There is a version  based on 1.0.1[/url] 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.

[b]In summary[/b]

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.

[b]Keep them wanting more[/b]

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. 


Post your comment

Comments

No one has commented on this page yet.

RSS feed for comments on this page | RSS feed for all comments