Calendar Test

This is a sample for the calendar control. The article that also serves as documentation can be found here, together with the download links.

Here is the component - try it by clicking on the links on it or on the links below the control; the dates will change the currently selected day, and the links around the header will move to the previous / next month

Please click on the arrows in the header to move to next / previous month; please hover and click on the calendar date to select it; all the related operations are Ajax driven and to be found in the included ajax.php

The additional data display is ON toggle
The default data display is OFF toggle

The additional data was only setup for this test for March 2009; therefore, as soon as you click on one of the toggle links above, the calendar will be switched back to March 2009

The test has a lot of Ajax stuff which is very simple in this case, but even so, please do not spend too much time understanding it if all you need is to show this calendar on a page; in that case, the code below is all you need, after including calendar.php file:

  // create the CalendarData value object and setup some data:
  $dt = new CalendarData();
			
  // setup some information
  $dt->month = 3;
  $dt->year = 2009;
		
  // create the Calendar object and obtain the html associated with it
  $cal = new Calendar($dt);
  $html = $cal->getHtml();
		
  // and then, somewhere in the page where you need it shown:
  echo $html;

To clarify one thing: the component is rendered solely on the server side (using php). No full rendering on browser using Javascript. When you click on "next month" or "previous month", you need to go to the server in order to render the calendar for the new month. I know this gives a bad perception, however consider this:

Many times (most of the time) you need to show additional data besides the calendar days (things like "number of hours billed that day" or "number of items sold"), so you need to go to the server / database anyway
Nobody says that a roundtrip means refreshing the entire page: since the next / previous links trigger javascript functions, a very simple Ajax implementation retrieving just the updated control will do the trick. The current test does that, so when you move to the next month, actually only the calendar control gets rendered.
Just try it - you almost don't feel the roundtrip at all.

All the colors, the widths are set by CSS. No explicit format html is generated for this particular purpose except attaching some CSS classes. This gives you full flexibility. Please look at the css file to see how the formatting was done.

Test Calendar Control