Create a Simple Calendar using Javascript

calen
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

3 Comments Create a Simple Calendar using Javascript

  1. Pingback: Design Gala

  2. Pingback: Design Gala

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>