Home » PHP » PHP Calendar Example

About Olayemi Odunayo

I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.

PHP Calendar Example

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:

  1. A computer with PHP 5.5 installed
  2. 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.

  1. format: This field is required and it specifies the format of the timestamp.
  2. 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

Download
You can download the full source code of this example here: Phpcalendarexample

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments