Back to Scripts

Adding a Calendar in HTML

Combining PHP date functionality with a one day calendar image. Very easy to set up, we demonstrate how to set it up using both PHP and Javascript.

1. Server side Calendar using PHP

<center>
<table background="images/calendar.gif" width="50" height="60" cellpadding="0" cellspacing="0">
<tr><td align="center">
<font face="tahoma,arial" size="1"><?php echo date("M");?></font><br/>
<font face="tahoma,arial" size="3"><?php echo date("d");?></font>
</td></tr>
</table>
</center>

The PHP outputs:

Jul
08

If you like our script, please rate it!

In a nutshell we follow 3 steps

Create a table of a fixed size that contains an image of the calendar in its background.
Print the current month 'echo date("M");'
Print the current day 1-31 'echo date("d");'

Changing the image is a simple matter of setting a new background for the table, make sure to match the width and height of the calendar to that of the table

To format the date differently, lets say we wished to display the month in a different format:
echo date("m"); // displays the month numerically 01-12
echo date("n"); // displays the month numerically without a leading zero 1-12
echo date("F"); // displays the month textually January-December

For a full list of date formating options goto http://php.net/date

2. Client side Calendar using javascript

How would I do this on the client side using javascript?
<center> <table background="images/calendar.gif" width="50" height="60" cellpadding="0" cellspacing="0"> <tr><td align="center"><font face="tahoma,arial" size="1"> <script type="text/javascript"> var d=new Date() var monthname = new Array ("Jan","Feb","Mar","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") document.write(monthname[d.getMonth()]+"<br/>") document.write(d.getDate()) </script> </font> </td></tr> </table> </center> The javascript outputs:

The same 3 steps are followed like we did with the PHP:

Set the background image
Display the current month
Display the current date

However the lack of standard formats for the date object requires that they be written up by the developer. Additionally certain corporate environments disable the use of javascript as a security risk. If given a choice one should always pick the server side solution over the client side javascript solution.

References:
PHP.net reference manual for the function date
Javascript Date Object

About Privacy Policy Hosting by Web Hosting Canada

Except where otherwise noted, this site is licensed under a Creative Commons License