Home arrow PHP arrow Page 3 - A Useful Event Calendar Written In PHP

A Useful Event Calendar Written In PHP

An events calendar allows you to keep a schedule of your appointments, etc. In this article Mitchell creates an extremely useful events calendar using only PHP.

Author Info:
By: Mitchell Harper
Rating: 4 stars4 stars4 stars4 stars4 stars / 198
June 10, 2002
  1. · A Useful Event Calendar Written In PHP
  2. · The event calendars logic
  3. · Creating the calendar
  4. · Highlighting days with events
  5. · Adding an event
  6. · Conclusion

print this article

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:


... 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'>
<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>

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'";
if($i == date("d") && $month == date("m") && $year == date("Y"))
echo "class='today'";
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:

The calendar with weekends emphasized

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);


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

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)
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:


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)
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:

Browsing from July to August
blog comments powered by Disqus

- Removing Singletons in PHP
- Singletons in PHP
- Implement Facebook Javascript SDK with PHP
- Making Usage Statistics in PHP
- Installing PHP under Windows: Further Config...
- File Version Management in PHP
- Statistical View of Data in a Clustered Bar ...
- Creating a Multi-File Upload Script in PHP
- Executing Microsoft SQL Server Stored Proced...
- Code 10x More Efficiently Using Data Access ...
- A Few Tips for Speeding Up PHP Code
- The Modular Web Page
- Quick E-Commerce with PHP and PayPal
- Regression Testing With JMeter
- Building an Iterator with PHP

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials