When I started my first project as a Programmer, I was told to put a calendar at the sidebar of the webpage. At that time, one of my friend help me with the code. This time I googled it and found one very simple and good sample of creating a calendar using JavaScript. I hope this will be helpful to others too.
There are few simple steps for creating a calendar
Step 1:
Insert the following codes into the HEAD section of your webpage:
<style type="text/css"> .main { width:200px; border:1px solid black; } .month { background-color:black; font:bold 12px verdana; color:white; } .daysofweek { background-color:gray; font:bold 12px verdana; color:white; } .days { font-size: 12px; font-family:verdana; color:black; background-color: lightyellow; padding: 2px; } .days #today{ font-weight: bold; color: red; } </style> <script type="text/javascript" src="basiccalendar.js"></script>
Step 2:
Download basiccalendar.js (by right clicking, and selecting “Save As”), and upload to your webpage directory.
Step 3:
Finally, insert the below script where you wish the calendar to appear on your page:
<script type="text/javascript"> var todaydate=new Date() var curmonth=todaydate.getMonth()+1 //get current month (1-12) var curyear=todaydate.getFullYear() //get current year document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1)); </script>
Click here to see an DEMO
Name required
April 12, 2011
doesn’t work on IE9 or Firefox