Create a simple calendar using javascript

November 24, 2009 |  by Rabi Shrestha
0c7437e7f1dc1c9e4faf14153d0c27a0 Del.icio.us

calen
When i started my first project as 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 also .
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">
 
/***********************************************
* Basic Calendar-By Brian Gosselin at http://scriptasylum.com/bgaudiodr/
* Script featured on Dynamic Drive (http://www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
 
</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


No Comments


Trackbacks

  1. Design Gala

Leave a Reply