In this example we are going to build a web based dynamic calendar using PHP. A web based calendar can be used for events, upcoming product specials, memos, and anything else you can think of. The calendar is divided into two parts, the top part shows the current year and month, while the lower part shows each day of the month.
For this example we will use:
- A computer with PHP 5.5 installed
- notepad++
1. Getting Started
This calendar shows only the current month and year. The web based calendar in this example depends heavily on PHP date() function. Let’s do a short introduction of the date() function.
1.1 Date in PHP
To manipulate dates in php we use the date(format,timestamp) function.
- format: This field is required and it specifies the format of the timestamp.
- timestamp: This field is optional and it specifies the timestamp to use, if it is not given, the current timestamp is used.
Note The optional timestamp parameter is an integer Unix timestamp that defaults to the current local time if a timestamp is not given.
The unix timestamp is the number of seconds that have elapsed since January 1, 1970, not counting leap seconds.
A call to function date("Y/m/d") will return the current year, month and day in the format “current year/month/day”. Also date("Y") will return the current year. To return a date in the future or past you will have to include a timestamp value in your function call.
Some of the strings you can use in the format field are
- Y: This returns the year in numeric form.
- m: This returns the month in numeric form with leading zeros.
- d: This returns day of the month in numeric form with leading zeros.
- D: This returns a textual representation of the days. Three letters.
- t: This returns the numbers of days in the given month. 28 through 31
- w: This returns the numeric representation of the day of the week. 0 (for sunday) through 6(for saturday)
- i: This returns day of the month without leading zeros. 1 to 31
- z: This returns day of the year, starting from 0 to 365.
- W: This returns the week number of the year. weeks starting on Monday
- F: This returns a full textual representation of a month. January through December.
- n: This returns the numeric representation of the month without leading zeros. 1 through 12.
- y: This returns a two digit representation of the year. Examples are 98 or 07
Please check the php manual for the complete list.
1.2 Web Based Calendar Code
calendar.php
<?php
$numofdays=date("t");//numbers of days in the current month
$first=date("Y-m") ."-". "1";//get the current year and month, join it with firstday of the month
$day=strtotime($first);//get the timestamp value of $first
$firstday= date("w",$day);//get the numeric representation of the firstday in the month
$hasdaystarted=false; //have we reached the first day of the month
$dayscounter=0;
$numofdays=$numofdays+$firstday;
?>
<DOCTYPE html>
<html lang=eng>
<head>
<title>Today's Calendar</title>
<style>
html, body{
width:100%;
height:100%;
margin:0%;
font-family:"helvetica","verdana","calibri", "san serif";
padding:0%;
border:0%;
font-weight:bold;
}
.date:hover{
background-color:#ededed;
cursor:pointer;
}
.col2{
height:1950px;
background-image:url(../images/live137244_goldensparks.jpg);
background-repeat:no-repeat;
padding-top:30px;
}
.container_comp{
width:880px;
height:700px;
margin:0 auto;
padding:40px;
background-color:#f7f7f7;
border-radius:20px;
border:1px solid #999999;
margin-bottom:25px;
}
div.wrapper{
display:block;
width:100%;
margin:0;
text-align:left;
background-color:#f3e6c3;
}
.day{
width:109px;
height:25px;
color:#330000;
float:left;
padding:5px;
text-align:center;
font:bold 16px arial;
border-bottom:1px solid #999999;
border-right:1px solid #999999;
background-color:#cccccc;
}
.container_calendar{
width:840px;
height:541px;
margin:0 auto;
background-color:#f7f7f7;
border-radius:20px;
border:2px solid #999999;
margin-bottom:25px;
}
.date{
width:119px;
height:100px;
float:left;
border-bottom:1px solid #999999;
border-right:1px solid #999999;
background-color:#ffffff;
}
</style>
</head>
<div class="wrapper">
<div class="col2" style="height:850px">
<div class="container_comp">
<?php
echo "<div align=center><h1>" . date("F Y") . "<h1></div>";
?>
<div class=container_calendar>
<div>
<div class="day" style="border-top-left-radius:18px;">Sunday</div>
<div class=day>Monday</div> <div class=day>Tuesday</div> <div class=day>Wednesday</div> <div class=day>Thursday</div> <div class=day>Friday</div>
<div class="day" style="border-top-right-radius:18px;">Saturday</div>
<div class="clear"></div>
</div>
<?php
for($I=0; $I<$numofdays; $I++){
if($I==$firstday)
$hasdaystarted= true;
if($hasdaystarted){
$dayscounter++;
echo "<div class=date>$dayscounter </div>";
}
else
echo "<div class=date> </div>";
}
?>
</div>
</div>
</div>
</html>
We start by getting the number of days in the current month numofdays=date("t"); (line two). In line three we get the current year and month. In line four we get the timestamp of the first day in the current month with PHP strtotime function. The $hasdaystarted (Line 6) is a boolean value which indicates if we have reached the firstday of the month (we would use it, in our loop). The $daycounter increments the date in our loop(Line 115).
We use a loop in line 111 to out each day of output calendar.
2. Summary
In this example we learnt how to create a web based dynamic calendar in PHP. We also learnt about PHP date function, how to use and manipulate it.
3. Download the source code
