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.
[Challenge] Make a functional calendar
Moderator: General Moderators
Re: [Challenge] Make a functional calendar
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?
... 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.
Re: [Challenge] Make a functional calendar
Yup--to go along with all the other challenges.scottayy wrote:... Is there a reason this is in PHP - Code?
Re: [Challenge] Make a functional calendar
Demo: http://tinyurl.com/ybxawse
Full code, with HTML and styling:
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.
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>* 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.