Create a Simple Calendar using Javascript

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 {
border:1px solid black;
.month {
font:bold 12px verdana;
.daysofweek {
font:bold 12px verdana;
.days {
font-size: 12px;
background-color: lightyellow;
padding: 2px;
.days #today{
font-weight: bold;
color: red;
<script type="text/javascript" src="basiccalendar.js">
* Basic Calendar-By Brian Gosselin at
* Script featured on Dynamic Drive (
* This notice must stay intact for use
* Visit for full source code

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));

Click here to see an DEMO

3 replys to 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 *