JQuery Agenda/Calendar assignments

Posted by dddave June 8th, 2011

As I went through my first year at the Hogeschool in Rotterdam, I progressively learned more. Halfway through, we tackled JQuery as well as XML. XML was a very useful language in my eyes, since it proved to be very easy to learn and was supported by most of the other languages I came across (ActionScript, PHP, JavaScript, C# etc). The works shown in this post make extensive use of JQuery, XML and AJAX to communicate between the two later on.

The XML Agenda (PHP communication)

image

View it here (Web)

Description:
The above example shows a PHP page that reads from an external (PHP-generated) XML file using the PHP simpleXML library. Its main purpose was to become familiar with the simpleXML object, as well as the generation of XML files using PHP. The PHP-generated XML was created based on the data existing within a simple MySQL table. The data consisted of a number of people that each have a number of agenda entries assigned to them.

 

The XML Agenda: Version 2

View it here (Web)

Description:
This second example builds upon the first one, but has taken a different turn. This example does not read XML data from a PHP-generated XML file, but checks for XML files that are within the same directory. The user then gets to decide on the XML file of which the data should be displayed.

 

The JQuery Calendar

View it here (Web)

Description:
It was finally time for JQuery and AJAX to steal the spotlight. Here, I built a calendar in JQuery that orders its days in rows of seven blocks. The lighter coloured days are the days of the weekend, while the darker ones are the days that do not belong to the currently displayed month. Buttons above the calendar allow the visitor to switch between both months and years.

The calendar was built. I also wanted to be able to load data from the server-side, and map that into the right day on the calendar. That is where AJAX came in. AJAX, or Asynchronous Javascript And XML, allows JavaScript to load XML from a given http address and read it. This was made exceptionally simple in JQuery, which already has AJAX as one of its built-in methods.

The result is a calendar in which data from different sources can be loaded and mapped to the correct day (using the dropdown window at the top). If one were to hover their mouse cursor over a day within the calendar that had an appointment in it, its details would be displayed within the column on the right side (for example: 21-12-2012 in the source ‘Standard’).

Comments are closed.