Page 1 of 1

[Challenge] Make a functional calendar

Posted: Sat Sep 26, 2009 6:42 pm
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.

Re: [Challenge] Make a functional calendar

Posted: Sat Sep 26, 2009 7:33 pm
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?

Re: [Challenge] Make a functional calendar

Posted: Sat Sep 26, 2009 8:01 pm
by jackpf
I've done this
http://jackpf.co.uk/blog/172#


It even uses ajax ;)

Re: [Challenge] Make a functional calendar

Posted: Sat Sep 26, 2009 8:42 pm
by Griven
scottayy wrote:... Is there a reason this is in PHP - Code?
Yup--to go along with all the other challenges.

Re: [Challenge] Make a functional calendar

Posted: Sun Sep 27, 2009 7:56 am
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. :)