A Useful Event Calendar Written In PHP - Creating the calendar

(Page 3 of 6 )

PHP's date functions are excellent, and because they are so powerful it really is a breeze to create a calendar with PHP. Our calendar is flexible in terms of dates. It can either accept a date through the URL by passing in three separate variables, such as:

cal.php?day=3&month=4&year=2004

... which would goto the 3rd of April 2004, or we can just callup cal.php and it will figure out today's date and show the current month on the calendar. Cal.php starts by determining whether or not it has been given a date through the URL or whether it should grab today's date:

// Get values from query string
$day = $_GET["day"];
$month = $_GET["month"];
$year = $_GET["year"];
$sel = $_GET["sel"];
$what = $_GET["what"];

if($day == "")
$day = date("j");

if($month == "")
$month = date("m");

if($year == "")
$year = date("Y");

To move through months and years with the calendar, it passes the date as part of the URL, as we've just seen in the example above.

Once the date has been determined, we use PHP's strtotime function and the date function to get the date as a timestamp as well as the name of the selected month and number of days in that month. We also initialize some variables that we will use later:

$currentTimeStamp = strtotime("$year-$month-$day");
$monthName = date("F", $currentTimeStamp);
$numDays = date("t", $currentTimeStamp);
$counter = 0;
$numEventsThisMonth = 0;
$hasEvent = false;
$todaysEvents = "";

I'm going to skip reading in the events from the events file for now and come back to that a bit later. For now let's concentrate on the PHP code to actually display a basic calendar.

Firstly we setup the table headings, like so:

<table width='350' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td class='head' width='50'>S</td>
<td class='head' width='50'>M</td>
<td class='head' width='50'>T</td>
<td class='head' width='50'>W</td>
<td class='head' width='50'>T</td>
<td class='head' width='50'>F</td>
<td class='head' width='50'>S</td>
</tr>

We setup a variable called $numDays to store the number of days in the current month:

$numDays = date("t", $currentTimeStamp);

We then construct a for loop around this variable to display each day in the month as a table cell. Remember, however, that our table headings for the days of the week start at Sunday and end at Saturday, however each different month could start on a different day, so we have to setup empty cells to push the 1st day of the month under its appropriate day:

for($i = 1; $i < $numDays+1; $i++, $counter++)
{
$timeStamp = strtotime("$year-$month-$i");

if($i == 1)
{
// Workout when the first day of the month is
$firstDay = date("w", $timeStamp);

for($j = 0; $j < $firstDay; $j++, $counter++)
echo "<td>&nbsp;</td>";
}

There are seven days in a week, so each table row contains 7 columns. We use PHP's modulus operator to determine when a new table row needs to begin:

if($counter % 7 == 0)
echo "</tr><tr>";

Once we've setup the empty cells to align the first day of the month with its correct day the we simply fill table cells with the value of $I from the for loop, which represents the day of the month, like so:

echo "<td width='50'>$I</td>";

That's the basics of how to setup a calendar with a HTML table. With the code above however, weekends don't stand out. By adding the following code into the for loop, we highlight the days that fall on either Saturday or Sunday as grey:

if(date("w", $timeStamp) == 0 || date("w", $timeStamp) == 6)
echo "class='weekend'";
else
if($i == date("d") && $month == date("m") && $year == date("Y"))
echo "class='today'";
else
echo "class='normal'";

Getting the "w" attribute of the date returns a numerical value that represents the day of the week. 0 is Sunday and 6 is Saturday, so if the days is a weekend then its CSS class is set to weekend (grey text). If the day is today then its CSS class is set to today (red background). If not, it’s just shown with plain black text and a white background thanks to the "normal" CSS class. The code that we've just looked at would produce a calendar that looked like this:



We need a way to display the currently selected month and year, as well as a way to navigate from month to month. The solution to this is to setup a form and use two button controls to let us navigate to both the previous and upcoming months:

$monthName = date("F", $currentTimeStamp);

...

<tr>
<td width='50' colspan='1'>
<input type='button' value=' < ' onClick='goLastMonth(<?php echo $month . ", " . $year; ?>)'>
</td>
<td width='250' colspan='5'>
<span class='title'><?php echo $monthName . " " . $year; ?></span><br>
</td>
<td width='50' colspan='1' align='right'>
<input type='button' value=' > ' onClick='goNextMonth(<?php echo $month . ", " . $year; ?>)'>
</td>
</tr>

Notice the two buttons in the code above? They both point to JavaScript functions from their onClick event. The first button calls the goLastMonth function, passing in the selected month and year as parameters. The JavaScript goLastMonth function looks like this:

function goLastMonth(month, year)
{
// If the month is Januaru, decrement the year
if(month == 1)
{
--year;
month = 13;
}

document.location.href = 'cal.php?month='+(month-1)+'&year='+year;
}

Basically all it does it change the URL of our cal.php page, passing in different values for the month and year. GoLastMonth's whole purpose is to take us to the previous month. If we're already in January (month is 1), then we don't want to send the user to month 0, because that wouldn't make sense.

What we do is this: Instead of subtracting from the month, we subtract from the year and set the month to 13. If the month is between 2 and 12, then it's OK to subtract 1 from it, and we do so in the last line of the function:

document.location.href = 'cal.php?month='+(month-1)+'&year='+year;

So as you can see, if we had a month of 1 (January) and a year of 2003, then we would be redirected to the following URL:

cal.php?month=12&year=2002

The goNextMonth JavaScript function works in much the same way, accept it increases the year and resets the month to zero if the current month is December:

function goNextMonth(month, year)
{
// If the month is December, increment the year
if(month == 12)
{
++year;
month = 0;
}

document.location.href = 'cal.php?month='+(month+1)+'&year='+year;
}

Combining this JavaScript and our HTML buttons with the rest of our calendar, when I click the button to proceed from July to August, the code gives us a calendar that now looks like this:

Next: Highlighting days with events >>
 

More PHP Articles
More By Mitchell Harper

Comments On: A Useful Event Calendar Written In PHP

· Good Tutorial.The full source code could be nice, as I am having problems with the...    · I cannot seem to locate the mentioned support files link! Any help would be...   >>> Post your comment now!