Step 1.
First of all try to collect the necessary information which are important to display the actual month and highlight the actual day. Besides this we want to display the actual month and year informations as well. To do this we need 3 special days informations:
The actual day
The first day of the actual month
The last day of the actual month
With the above mentioned informations we can decide what day was the first day, how long is the month and of course which is the actual day.
Step 2.
To get the information mentioned in Step 1 we will use the PHP built in function: getdate(). Without parameters this function returns the actual day informations in an array as follows:
To get the last day of the month with getdate we need to try to get the 0. day of the next month. So the code to get the information looks like this:
Step 3.
To display a calendar we need a table with 7 columns for the days of the week. The number of lines depending on the number of days and the first day of the month. However we need a header line with month and year information, a subheader line with the name of the days.
Step 4.
Ok, now we have the header of the table. Let's try to fill the first row. It is not so easy as you can not just write 1 in the first cell, 2 in the second and so on. It only works if the first day of the month was Monday, but what if not? To decide this we need the wday item from the firstDay array. With this information we can fill the cells with a space if needed. The code to do this is the follows:
Step 5.
As next step we need to fill to following lines. It is a bit easier, we only need to know how many full week we have and fill some table rows as follows:
Step 6.
As semi final step we need to add the rest of the month to the last line. In this case it is quite easy:
Step 7.
To make the calendar little bit nicer we will introduce some CSS design. The CSS file is very simple:
Step 8.
The complete code using the CSS is the following:
First of all try to collect the necessary information which are important to display the actual month and highlight the actual day. Besides this we want to display the actual month and year informations as well. To do this we need 3 special days informations:
The actual day
The first day of the actual month
The last day of the actual month
With the above mentioned informations we can decide what day was the first day, how long is the month and of course which is the actual day.
Step 2.
To get the information mentioned in Step 1 we will use the PHP built in function: getdate(). Without parameters this function returns the actual day informations in an array as follows:
Code:
Array ( [seconds] => 40 [minutes] => 58 [hours] => 21 [mday] => 17 [wday] => 2 [mon] => 6 [year] => 2003 [yday] => 167 [weekday] => Tuesday [month] => June [0] => 1055901520 )
Code:
<?php
$today = getdate();
$firstDay = getdate(mktime(0,0,0,$today['mon'],1,$today['year']));
$lastDay = getdate(mktime(0,0,0,$today['mon']+1,0,$today['year']));
?>
To display a calendar we need a table with 7 columns for the days of the week. The number of lines depending on the number of days and the first day of the month. However we need a header line with month and year information, a subheader line with the name of the days.
Code:
<?php
// Create a table with the necessary header informations
echo '<table>';
echo ' <tr><th colspan="7">'.$today['month']." - ".$today['year']."</th></tr>";
echo '<tr class="days">';
echo ' <td>Mo</td><td>Tu</td><td>We</td><td>Th</td>';
echo ' <td>Fr</td><td>Sa</td><td>Su</td></tr>';
?>
Ok, now we have the header of the table. Let's try to fill the first row. It is not so easy as you can not just write 1 in the first cell, 2 in the second and so on. It only works if the first day of the month was Monday, but what if not? To decide this we need the wday item from the firstDay array. With this information we can fill the cells with a space if needed. The code to do this is the follows:
Code:
<?php
echo '<tr>';
for($i=1;$i<$firstDay['wday'];$i++){
echo '<td> </td>';
}
$actday = 0;
for($i=$firstDay['wday'];$i<=7;$i++){
$actday++;
echo "<td>$actday</td>";
}
echo '</tr>';
?>
As next step we need to fill to following lines. It is a bit easier, we only need to know how many full week we have and fill some table rows as follows:
Code:
<?php
$fullWeeks = floor(($lastDay['mday']-$actday)/7);
for ($i=0;$i<$fullWeeks;$i++){
echo '<tr>';
for ($j=0;$j<7;$j++){
$actday++;
echo "<td>$actday</td>";
}
echo '</tr>';
}
?>
As semi final step we need to add the rest of the month to the last line. In this case it is quite easy:
Code:
<?php
if ($actday < $lastDay['mday']){
echo '<tr>';
for ($i=0; $i<7;$i++){
$actday++;
if ($actday <= $lastDay['mday']){
echo "<td>$actday</td>";
}
else {
echo '<td> </td>';
}
}
echo '</tr>';
}
?>
To make the calendar little bit nicer we will introduce some CSS design. The CSS file is very simple:
Code:
table {
width:210px;
border:0px solid #888;
border-collapse:collapse;
}
td {
width:30px;
border-collpase:collpase;
border:1px solid #888;
text-align:right;
padding-right:5px;
}
.days{
background-color: #F1F3F5;
}
th {
border-collpase:collpase;
border:1px solid #888;
background-color: #E9ECEF;
}
.actday{
background-color: #c22;
font-weight:bold;
}
The complete code using the CSS is the following:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
function showCalendar(){
// Get key day informations.
// We need the first and last day of the month and the actual day
$today = getdate();
$firstDay = getdate(mktime(0,0,0,$today['mon'],1,$today['year']));
$lastDay = getdate(mktime(0,0,0,$today['mon']+1,0,$today['year']));
// Create a table with the necessary header informations
echo '<table>';
echo ' <tr><th colspan="7">'.$today['month']." - ".$today['year']."</th></tr>";
echo '<tr class="days">';
echo ' <td>Mo</td><td>Tu</td><td>We</td><td>Th</td>';
echo ' <td>Fr</td><td>Sa</td><td>Su</td></tr>';
// Display the first calendar row with correct positioning
echo '<tr>';
for($i=1;$i<$firstDay['wday'];$i++){
echo '<td> </td>';
}
$actday = 0;
for($i=$firstDay['wday'];$i<=7;$i++){
$actday++;
if ($actday == $today['mday']) {
$class = ' class="actday"';
} else {
$class = '';
}
echo "<td$class>$actday</td>";
}
echo '</tr>';
//Get how many complete weeks are in the actual month
$fullWeeks = floor(($lastDay['mday']-$actday)/7);
for ($i=0;$i<$fullWeeks;$i++){
echo '<tr>';
for ($j=0;$j<7;$j++){
$actday++;
if ($actday == $today['mday']) {
$class = ' class="actday"';
} else {
$class = '';
}
echo "<td$class>$actday</td>";
}
echo '</tr>';
}
//Now display the rest of the month
if ($actday < $lastDay['mday']){
echo '<tr>';
for ($i=0; $i<7;$i++){
$actday++;
if ($actday == $today['mday']) {
$class = ' class="actday"';
} else {
$class = '';
}
if ($actday <= $lastDay['mday']){
echo "<td$class>$actday</td>";
}
else {
echo '<td> </td>';
}
}
echo '</tr>';
}
echo '</table>';
}
showCalendar();
?>
</body>
</html>
[/html]