PHPBuilder - Building a PHP Calender Page 2

RSS Twitter

Building a PHP Calender - Page 2

by: PHP Builder Staff
July 28, 2009

The next bit is more tricky than it looks once it is actually written in code. What I had to do was find a way to increment the year when the month moved past December. Also, the year increments at that time too. Later on you will see that I had to do the same run-around for when we are going backwards through the calender.

if($month == '12'):
    $next_year = $year + 1;
else: $next_year = $year;

Now let's use the month and year values set above to figure out what day the first of the month falls on. Luckily mktime is perfect for this task. For those who might not know, the values passed into mktime are Hour, Minute, Second, Month, Day and year. It then returns a Unix timestamp for that moment in time.

$first_of_month = mktime(0, 0, 0, $month, 1, $year);

// An array naming all of the days in the week
$day_headings = array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');

$maxdays = date('t', $first_of_month);
$date_info = getdate($first_of_month);
$month = $date_info['mon'];
$year = $date_info['year'];

// Make sure that if the current set month is January and we are going backwards through the calender that the year number decreases by one.
if($month == '1'):
    $last_year = $year-1;
else: $last_year = $year;

// Subtract one day from the first day of the month to get the end of last month
$timestamp_last_month = $first_of_month - (24*60*60);
$last_month = date("m", $timestamp_last_month);

// Make sure that if the month is December, the next month is 1, not 13
if($month == '12'):
    $next_month = '1';
else: $next_month = $month+1;

As you can see we spent quite a lot of time here making sure that we know where we are in time, and that we control what happens when days, years and months increase and decrease as we navigate throughout the calender. Always remember that when you are working with things like dates it's a good idea to setup all the defaults before you begin to actually build the code. You do not always know exactly what it is you are going to need, but its almost a promise that you will need to know what the current day, month and year is. Again we are using the PHP date() function as well as mktime() in order to manipulate the dates accurately.
We continue by starting to draw the calender.

$calendar = "
<table width='400px' style='border: 1px solid #cccccc';>
    <tr style='background: #3e7eb7;'>
        <td colspan='7' class='navi'>
            <a style='margin-right: 50px; color: #ffffff;' href='$self?month=".$last_month."&year=".$last_year."'>«</a>
            $date_info[month] $year
            <a style='margin-left: 50px; color: #ffffff;' href='$self?month=".$next_month."&year=".$next_year."'>»</a>
        <td class='datehead'>SUN</td>
        <td class='datehead'>MON</td>
        <td class='datehead'>TUE</td>
        <td class='datehead'>WED</td>
        <td class='datehead'>THU</td>
        <td class='datehead'>FRI</td>
        <td class='datehead'>SAT</td>

Above we have setup the table header, and navigation links to move forward and backward through the months and years on the calender. Now we print the days, taking care to highlight todays date. Each day is a link for that day that we can navigate to. Creating an events system is now simple because the day, month and year you have clicked on is set in the URL, so you can look what is set and display events according to that.

// clear the css class name
$class = "";
// get the curret day of the week
$weekday = $date_info['wday'];
// set the current day as 1
$day = 1;

// print the width of the calender
if($weekday > 0)
    $calendar .= "<td colspan='$weekday'> </td>";

while($day <= $maxdays):

// if its a sunday, start a new line
    if($weekday == 7):
        $calendar .= "</tr><tr>";
        $weekday = 0;

    $linkDate = mktime(0, 0, 0, $month, $day, $year);

// check if the date being printed out is todays date. If so, use a different css class to make it stand out
    if((($day < 10 and "0$day" == date('d')) or ($day >= 10 and "$day" == date('d'))) and (($month < 10 and "0$month" == date('m')) or ($month >= 10 and "$month" == date('m'))) and $year == date('Y')):
        $class = "caltoday";
// otherwise just print a link in a box
        $d = date('m/d/Y', $linkDate);
        $class = "cal";

    $calendar .= "
        <td class='{$class}'>

// every date is a link to that date, making it simple to add events to the calender for a certain date
            <a href='$self?viewyear={$year}&viewmonth={$month}&viewday={$day}'>{$day}</a>
if($weekday != 7)
    $calendar .= "<td colspan='" . (7 - $weekday) . "'> </td>";

// actually print out the huge string we have just built up
echo $calendar . "</tr></table>";

And that completes the basic rundown of the calender, believe it or not. Every day is clickable, and months and years are navigable by clicking the arrows next to the month name in the table head. Today's date has a different CSS class to any other date, so it is stylable, and the calender is pretty versatile. To round things off nicely though, I am going to include a small form that will allow you to jump to any month of any year up to twenty years in the future. Also, I was thinking that should you no longer be navigating through the current month in the calander, a little link navigating you back to the current month should be shown. The code is simple:

$months = array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');

echo "
<form style='float: right; margin-right: 10px;' action='$self' method='get'>
    <select name='month'>";
        for($i=0; $i<=11; $i++):
            echo "<option value='".($i+1)."'";
            if($month == $i+1)
                echo "selected = 'selected'";
            echo ">".$months[$i]."</option>";
        echo "

    <select name='year'>";
        for($i=date('Y'); $i<=(date('Y')+20); $i++):
            echo "<option value='".($i)."'";
            if($year == $i)
                echo "selected = 'selected'";
            echo ">".$i."</option>";

        echo "</select>
<input type='submit' value='go' />

if($month != date('m') || $year != date('Y'))
echo "<a style='float: left; margin-left: 10px; font-size: 12px; padding-top: 5px;' href='$self?month=".date('m')."&year=".date('Y')."'>« Back To Current Date</a>";
echo "</center>";

The screenshot below is the result:

As with every article I write, it is my sincere wish that this code could be of use to you, or--at least--that you learned at least one new thing from something that I have written here.
Until next time.
Happy Coding!
Marc Steven Plotz

« Previous Page

Comment and Contribute

Your comment has been submitted and is pending approval.




(Maximum characters: 1200). You have characters left.