Dynamically Loading Months from a Calendar

This article discusses how to load a new month from the PHP Calendar Class using the jQuery javascript framework so that the calendar loads without the entire page reloading.

The first thing to do would be to download the latest version of jQuery. Version 1.3.2 is included in the download files for this article. Next, download a copy of the calendar class from Sculch. A copy is also included in the download files for this article. If you want some nice visuals while the calendar loads, head over to ajaxload.info and download a fancy loading graphic. Again, a copy is included in the download files.

Okay, lets create the page that will handle the ajax request, and serve up the new calendar code. I name this file calendar.ajax.php, and a copy can be found in the download files.

1. <?php
2. if(isset($_GET['month'], $_GET['year'])){
3.   if($_GET['month'] >= 1 && $_GET['month'] <= 12){
4.     if(preg_match('/^[0-9]{4}$/',$_GET['year'])){
5.       require('include/calendar.class.php');
6.       $nCalendar = new calendar(mktime(0,0,0,$_GET['month'],1,$_GET['year']));
7.     } else { echo "Load error."; }
8.   } else { echo "Load error."; }
9. } else { echo "Load error."; }
10. ?>

What does this code do? The first line checks to see if the variables have a value. In this case, the month and year are passed in the URL and if someone navigates to this script without setting the variables then we print "Load error." Next, we need to make sure that the month passed is valid. It must be between 1 corresponding to January and 12 corresponding to December. If not, then print the "Load error." message. Our last line of validation checks to make sure that the year is a four digit number, using a simple regular expression. If not, then print "Load error."

Now it's time to print the calendar. We include the calendar class and create a new instance of it assigned to the variable $nCalendar. We pass a timestamp of the month to load using mktime and the variables passed to the script. That's it, the class automatically prints the calendar out when it's constructed.

Let's make the javascript to request this page. This can be stored in a separate file, or in the page itself, the latter is how we're doing it here.

1. function loadCalendar(vmonth, vyear){
2.   $('#ajax-calendar').html('<img src="ajax-calendar.gif" alt="" />');
3.   $.get("calendar.ajax.php",{month:vmonth,year:vyear},function(data){$('#ajax-calendar').html(data);});
4. }

This code is a simple javascript function that gets called whenever the next month or previous month buttons are clicked. The month and year are passed as variables called vmonth and vyear and are automatically generated by the calendar class script. Now, when a new month is requested we want to show a loading graphic so that the user knows that it's loading. So in the second line we change the html of our calendar wrapping div to show this animation. The next line requests the page that prints out the new calendar code and saves it to the calendar div.

If you changed the name of the function then you need to edit lines 81 and 83 of the calendar class to reflect this new function name, otherwise everything is already correct.

There you go! Load it up and watch the magic.

The Demo

The calendar is styled using CSS found at Free CSS Templates, and is not included in the download files.

The Download

Filename	dynamic-calendar.zip
Filesize	24997 bytes
Filetype	ZIP Archive
MD5 checksum	e0d0a35486a2873e68891926113d9f46
License	© 2009 by Sculch, LLC. under the MIT License