This tutorial will show you how to render a calendar for the current
month using PHP and HTML. This tutorial makes use of PHP’s calendar
functions – you must have these installed for the code to work. For more
information visit the calendar section on PHP website.
You can view an example of the calendar here.To start with lets define some CSS style. Here’s are the styles used in the example (change these to suit your site):
Calendar Styles
<style type=”text/css” media=”all”>To render the calendar we need the current month and year (expressed as integers). Using PHP’s calendar functions we can determine the variables we need to render the calendar: the number of days in the month and the start day. The function jddayofweek() allows you to get a day as an integer and the jdmonthname() converts the month to a word.
body {
background-color: #2A2A2A;
color: #EEEEEE;
font-family: Tahoma, Verdana, sans-serif;
font-size: 10px;
}
table {
width: 125px;
}
td {
padding: 1px;
border: 1px solid #666666;
text-align: center;
}
</style>
Calendar Variables
<?phpNow using some simple HTML we’ll start off the table, we’ll start the week with Sunday and end it with Saturday.
// get this month and this years as an int
$thismonth = ( int ) date( “m” );
$thisyear = date( “Y” );
// find out the number of days in the month
$numdaysinmonth = cal_days_in_month( CAL_GREGORIAN, $thismonth, $thisyear );
// create a calendar object
$jd = cal_to_jd( CAL_GREGORIAN, date( “m” ),date( 1 ), date( “Y” ) );
// get the start day as an int (0 = Sunday, 1 = Monday, etc)
$startday = jddayofweek( $jd , 0 );
// get the month as a name
$monthname = jdmonthname( $jd, 1 )
?>
Calendar Table Head
<table>Now the guts of rendering the calendar. We need to work out from the start day how many empty cells the calendar must start off with. Then we render each day as a cell; every seven cells we start a new row. Finally, we clean up by working out how many empty cells we need to complete the current row.
<tr>
<td colspan=”7″><div align=”center”><strong><?= $monthname ?></strong></div></td>
</tr>
<tr>
<td><strong>S</strong></td>
<td><strong>M</strong></td>
<td><strong>T</strong></td>
<td><strong>W</strong></td>
<td><strong>T</strong></td>
<td><strong>F</strong></td>
<td><strong>S</strong></td>
</tr>
<tr>
Rendering the Calendar
<?phpThen we just finish off the HTML.
// put render empty cells
$emptycells = 0;
for( $counter = 0; $counter < $startday; $counter ++ ) {
echo “\t\t<td>-</td>\n”;
$emptycells ++;
}
// renders the days
$rowcounter = $emptycells;
$numinrow = 7;
for( $counter = 1; $counter <= $numdaysinmonth; $counter ++ ) {
$rowcounter ++;
echo “\t\t<td>$counter</td>\n”;
if( $rowcounter % $numinrow == 0 ) {
echo “\t</tr>\n”;
if( $counter < $numdaysinmonth ) {
echo “\t<tr>\n”;
}
$rowcounter = 0;
}
}
// clean up
$numcellsleft = $numinrow – $rowcounter;
if( $numcellsleft != $numinrow ) {
for( $counter = 0; $counter < $numcellsleft; $counter ++ ) {
echo “\t\t<td>-</td>\n”;
$emptycells ++;
}
}
?>
Finishing Off
</tr>And finally here’s the complete working code. If you want render a calendar for any given month or any given year simply override the $thismonth and $thisyear variables.
</table>
</body>
</html>
Calendar Source Code
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Calendar</title>
<style type=”text/css” media=”all”>
body {
background-color: #2A2A2A;
color: #EEEEEE;
font-family: Tahoma, Verdana, sans-serif;
font-size: 10px;
}
table {
width: 125px;
}
td {
padding: 1px;
border: 1px solid #666666;
text-align: center;
}
</style>
</head>
<body>
<?php
// get this month and this years as an int
$thismonth = ( int ) date( “m” );
$thisyear = date( “Y” );
// find out the number of days in the month
$numdaysinmonth = cal_days_in_month( CAL_GREGORIAN, $thismonth, $thisyear );
// create a calendar object
$jd = cal_to_jd( CAL_GREGORIAN, date( “m” ),date( 1 ), date( “Y” ) );
// get the start day as an int (0 = Sunday, 1 = Monday, etc)
$startday = jddayofweek( $jd , 0 );
// get the month as a name
$monthname = jdmonthname( $jd, 1 )
?>
<table>
<tr>
<td colspan=”7″><div align=”center”><strong><?= $monthname ?></strong></div></td>
</tr>
<tr>
<td><strong>S</strong></td>
<td><strong>M</strong></td>
<td><strong>T</strong></td>
<td><strong>W</strong></td>
<td><strong>T</strong></td>
<td><strong>F</strong></td>
<td><strong>S</strong></td>
</tr>
<tr>
<?php
// put render empty cells
$emptycells = 0;
for( $counter = 0; $counter < $startday; $counter ++ ) {
echo “\t\t<td>-</td>\n”;
$emptycells ++;
}
// renders the days
$rowcounter = $emptycells;
$numinrow = 7;
for( $counter = 1; $counter <= $numdaysinmonth; $counter ++ ) {
$rowcounter ++;
echo “\t\t<td>$counter</td>\n”;
if( $rowcounter % $numinrow == 0 ) {
echo “\t</tr>\n”;
if( $counter < $numdaysinmonth ) {
echo “\t<tr>\n”;
}
$rowcounter = 0;
}
}
// clean up
$numcellsleft = $numinrow – $rowcounter;
if( $numcellsleft != $numinrow ) {
for( $counter = 0; $counter < $numcellsleft; $counter ++ ) {
echo “\t\t<td>-</td>\n”;
$emptycells ++;
}
}
?>
</tr>
</table>
</body>
</html>
0 comments:
Post a Comment