[Challenge] Make a functional calendar

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
Griven
Forum Contributor
Posts: 165
Joined: Sat May 09, 2009 8:23 pm

[Challenge] Make a functional calendar

Post by Griven »

Create a calendar that shows the days of the month in tabular format--each day with its own square. Start with Sunday on the left, and end with Saturday on the right. Each square must display the number of the day.

In addition to displaying the current month, the calendar should have controls with which the user can navigate to other months.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: [Challenge] Make a functional calendar

Post by s.dot »

I have done this multiple multiple times. lol.. more times than I would like to count.

... Is there a reason this is in PHP - Code?
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: [Challenge] Make a functional calendar

Post by jackpf »

I've done this
http://jackpf.co.uk/blog/172#


It even uses ajax ;)
Griven
Forum Contributor
Posts: 165
Joined: Sat May 09, 2009 8:23 pm

Re: [Challenge] Make a functional calendar

Post by Griven »

scottayy wrote:... Is there a reason this is in PHP - Code?
Yup--to go along with all the other challenges.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Re: [Challenge] Make a functional calendar

Post by s.dot »

Demo: http://tinyurl.com/ybxawse

Full code, with HTML and styling:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1">
<title>Simple PHP Calendar</title>
<style type="text/css">
.weekday
{
    width: 40px;
    background-color: #002366;
    color: #fff;
    font-family: verdana, arial, tahoma;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}
.day, .today
{
    height: 30px;
    width: 15px;
    border: solid 1px #e6e6e6;
    text-align: center;
    background-color: #fff;
    color: #000;
    font-family: verdana, arial, tahoma;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}
.today
{
    background-color: #ffc0cb;
}
.day:hover, .today:hover
{
    background-color: #e6e6e6;
}
.date
{
    color: #000;
    font-family: verdana, arial, tahoma;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
}
.datenav
{
    text-align: center;
}
.datenav a
{
    padding-left: 38px;
    padding-right: 38px;
    color: #002365;
    font-family: verdana, arial, tahoma;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
}
</style>
</head>
<body>
<?php
 
//month, year, timestamp, days in month, first day of week
$month  = !empty($_GET['m']) && in_array($_GET['m'], range(1, 12)) ? (int) $_GET['m'] : date('n');
$year   = !empty($_GET['y']) && in_array($_GET['m'], range(1970, 2037)) ? (int) $_GET['y'] : date('Y');
$ts     = strtotime($month . '/' . date('j') . '/' . $year);
$days   = date('t', $ts);
$first  = date('w', mktime(0, 0, 0, $month, 01, $year));
 
//ok, down to calendar making business
echo '<table align="center" cellspacing="2" cellpadding="2" border="0">
    <tr>
        <td colspan="7" class="date">' . date('F, Y', $ts) . '</td>
    </tr>
    <tr>
        <td colspan="7" class="datenav">
            <a href="?m=' . $month . '&y=' . ($year-1) . '" title="Last Year"><|</a>';
            
            //dececide to decrement the year or not
            $lm = date('n', strtotime('-1 month', $ts));
            echo '<a href="?m=' . $lm . '&y=';
            echo $lm == 12 ? $year-1 : $year;
            echo '" title="Last Month"><</a>';
            
            //decide to increment the year or not
            $nm = date('n', strtotime('+1 month', $ts));
            echo '<a href="?m=' . $nm . '&y=';
            echo $nm == 1 ? $year+1 : $year;
            echo '" title="Next Month">></a>';
            
            echo '<a href="?m=' . $month . '&y=' . ($year+1) . '" title="Next Year">|></a>
        </td>
    </tr>
    <tr>
        <td class="weekday">Sun</td>
        <td class="weekday">Mon</td>
        <td class="weekday">Tue</td>
        <td class="weekday">Wed</td>
        <td class="weekday">Thu</td>
        <td class="weekday">Fri</td>
        <td class="weekday">Sat</td>
    </tr>
    <tr>';
    
    //show empty cells until first day of week
    for ($d = 0; $d < $first; $d++)
    {
        echo '<td>&nbsp;</td>';
    }
    
    //now for days that really exist
    for ($i = $first; $i < ($days+$first); $i++)
    {
        //new table row
        if ((($i) % 7) == 0)
        {
            echo '</tr><tr>';
        }
        
        //show day
        if (($i-$first+1 == date('j')) && $month == date('n') && $year == date('Y'))
        {
            echo '<td class="today">' . ($i-$first+1) . '</td>';
        } else
        {
            echo '<td class="day">' . ($i-$first+1) . '</td>';
        }
    }
    
    echo '</tr>
</table>';
 
?>
</body>
</html>
Features:
* Valid HTML and CSS
* Highlights current day
* CSS hover effect on days
* Navigate forward and backward by month or year
* Shows currently selected month
* Accounts for leap years
* Checks month and year parameters for valid input
* Easily customizable

Limitations:
* Date year range 1970-2037


I had fun. :)
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
Post Reply