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