Hack25.Create an Interactive Calendar | PHP Hacks: Tips & Tools For Creating Dynamic Websites

Hack 25. Create an Interactive Calendar

Use PHP's date functions to create an interactive HTML calendar.

A calendar is often the best way to represent event data. It's something that your users are familiar with, and it is a great way to show lots of information in a small space. Pop-up calendar controls are available on the Web, and open source event calendar systems that include all the event management functionality you need are also available, but, at least when I looked, no simple calendar display controls that could show events in a calendar format were available. This hack creates a simple HTML calendar with controls for navigating back and forth through the months of the year.

3.16.1. The Code

Save the code in Example 3-20 as cal.php.

Example 3-20. Making calendaring work using PHP

 <html> <head> <style type="text/css"> .calendar {   font-family: arial, verdana, sans serif;  } .calendar td {   border: 1px solid #eee; } .calendar-title {   text-align: center;   font-style: italic; } .calendar-day-title {   text-align: center;   font-size: small;   background: #ccc;   font-weight: bold; } .calendar-day, .calendar-outmonth-day {   height: 60px;   vertical-align: top;   text-align: center;   font-size: small;   padding: 0px; } .calendar-day-number {   text-align: right;   background: #ddd; } .calendar-content {    padding: 2px;   font-size: x-small; } .calendar-outmonth-day {   color: #666;   font-style: italic;   background: #ddd; } </style> </head> <body> <?php class Day {   function Day( $inmonth, $month, $day, $year )   { $this->{'month'} = $month; $this->{'day'} = $day; $this->{'year'} = $year; $this->{'inmonth'} = $inmonth; $this->{'number'} = $number; $this->{'text'} = "";   }   function get_day() { return $this->{'day'}; }   function get_month() { return $this->{'month'}; }   function get_year() { return $this->{'year'}; }   function get_inmonth() { return $this->{'inmonth'}; }   function get_number() { return $this->{'number'}; }   function get_text() { return $this->{'text'}; }   function set_text( $text ) { $this->{'text'} = $text; } } function setCalendarText( $days, $m, $d, $y, $text ) {   foreach( $days as $day )   { if ( $day->get_day() == $d &&  $day->get_month() == $m &&    $day->get_year() == $y )   $day->set_text( $text ); } } function get_last_month( $month, $year ) {   $lastmonth = $month - 1;   $lastyear = $year;   if ( $lastmonth < 0 ) { $lastmonth = 11; $lastyear -= 1; }   return array( $lastmonth, $lastyear ); } function get_next_month( $month, $year ) {   $nextmonth = $month + 1;   $nextyear = $year;   if ( $nextmonth > 11 ) { $nextmonth = 0; $nextyear += 1; }   return array( $nextmonth, $nextyear ); } function makeCalendarDays( $month, $year ) {   list( $nextmonth, $nextyear ) = get_next_month( $month, $year );   list( $lastmonth, $lastyear ) = get_last_month( $month, $year );   $dimlm = cal_days_in_month( CAL_GREGORIAN, $lastmonth, $lastyear );   $jd = cal_to_jd( CAL_GREGORIAN, $month + 1, 1, $year );   $day = jddayofweek( $jd );   $dim = cal_days_in_month( CAL_GREGORIAN, $month + 1, $year );   $days = array( );   for( $d = 0; $d < $day; $d++ ) $days []= new Day( 0, $lastmonth + 1, $dimlm - ( $day - $d ), $lastyear );   for( $d = 1; $d <= $dim; $d++ ) $days []= new Day( 1, $month + 1, $d, $year ); $left = ( ( floor( ( $day + $dim ) / 7 ) + 1 ) * 7 ) - ( $day + $dim ); for( $d = 0; $d < $left; $d++ )   $days []= new Day( 0, $nexmonth + 1, $d+1, $nextyear ); return $days; } $today = getdate(); $year = $today['year']; $month = $today['mon'] - 1; if ( $_GET['year'] ) $year = $_GET['year']; if ( $_GET['month'] ) $month = $_GET['month']; $days = makeCalendarDays( $month, $year ); setCalendarText( &$days, $month + 1, 5, $year, "Meet<br/>Jim" ); setCalendarText( &$days, $month + 1, 10, $year, "Meet<br/>Sue" ); $months = array(   "January", "February", "March", "April",   "May", "June", "July", "August",   "September", "October", "November", "December" ); $day_names = array( "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ); ?> <div style="width:600px;"> <table  width="100%" cellspacing="0" cellpadding="1"> <tr><td colspan="7"  width="13%"> <?php list( $nextmonth, $nextyear ) = get_next_month( $month, $year ); list( $lastmonth, $lastyear ) = get_last_month( $month, $year ); ?> <a href="cal.php?year=<?php echo($lastyear); ?>&month=<?php echo( $lastmonth ); ?>">&lt;&lt;</a> <?php echo( $months[$month] ); ?> <?php echo( $year ); ?> <a href="cal.php?year=<?php echo($nextyear); ?>&month=<?php echo( $nextmonth ); ?>">&gt;&gt;</a> </td></tr> <tr> <?php foreach( $day_names as $day ) { ?> <td ><?php echo( $day ); ?></td> <?php } ?> </tr> <?php $p = 0; foreach( $days as $d ) { if ( $p == 0 ) echo ( "<tr>" ); $day_style = $d->get_inmonth() ? "calendar-day" : "calendar-outmonth-day"; ?> <td  width="13%"> <div > <?php echo( $d->get_day() ); ?> </div> <div > <?php echo( $d->get_text() ); ?> </div> </td> <?php $p += 1; if ( $p == 7 ) $p = 0; } ?> </tr> </table> </div> <body> </html>

Figure 3-21 shows the members and methods of the Day class central to this hack. Each calendar box is actually a Day object that contains its date, the day number, the inmonth value that specifies whether this box is in or out of the current month, and the text of the item at that date.

Figure 3-21. The Day class members and methods

It's the script's job to first create the array of Day objects using the makeCalendarDays( ) function, and then to display each object using the PHP and HTML logic at the end of the page.

3.16.2. Running the Hack

Upload the cal.php file to your web server and navigate to it in your web browser. You should see something like Figure 3-22.

Figure 3-22. The calendar control as seen in Safari

You can change the events that are shown in the calendar by tweaking the calls to setCalendarText( ), which will change the text that is displayed on any given day.

3.16.3. See Also

"Build Dynamic HTML Graphs" [Hack #14]
"Add Vector Graphics with PHP" [Hack #22]