Dalldorf Design - Web Design, PC Services

JavaScript Calendar

Source Files calendar.js
calendar.css

In this tutorial you will learn how to create a JavaScript calendar that will display the current date. You will need to create a JavaScript file (calendar.js) and a style sheet (calendar.css).

In the calendar.js file you need to create a function called calendar(calendarDay). this function is used to call the functions that display the calendar.

function calendar(calendarDay)
{
if (calendarDay == null)
calDate = new Date();
else
calDate = new Date(calendarDay);

// Create the Calendar
document.write("<table id = 'calendar_table'>");
writeCalTitle(calDate); // write in the header for month and date
writeDayNames(); // write in the header for the days of the week
writeCalDays(calDate); // write in the days for the month
document.write("</table>");
}

Don't worry about the other functions, we will be writing those next. Now we will create the WriteCalTitle(calDate) function. We will create an array of all 12 months and then get the current month and year to display in the header of the calendar.

function writeCalTitle(calendarDay)
{

// array for month names
var monthName = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var thisMonth=calendarDay.getMonth(); // Extract month number which will be changed to it's name
var thisYear=calendarDay.getFullYear(); //Extract the year

//Create the header for the calendar
document.write("<tr>");
document.write("<th id='calendar_head' colspan='7'>");
document.write(monthName[thisMonth] + " " + thisYear);
document.write("</th>");
document.write("</tr>");
}

For anyone who has an understanding of JavaScript this should be easy to understand. If you don't understand the getMonth() and getFullYear() methods I would advise a Google search.

Next we are going to create the writeDayNames() function. The name pretty much describes it's behavior. Like in the writeCalTitle function we are going to populate an array with the days of the week. We then populate the table.

function writeDayNames()
{
var dayName = new Array("Sun","Mon","Tue","Wen","Thu","Fri","Sat");
document.write("<tr>");
      for (i=0;i<dayName.length;i++)
      {
      document.write("<th class ='calendar_weekdays'>" +dayName[i]+"</th>");
      }
document.write("</tr>");
}

The next function daysInMonth(calendarDay) holds the amount of days in each month and it calculates the leap year.

Finally we move on to the last function we will be using for the calendar. This last bit might look intimidating but if you made it this far you should be fine. We will call this function writeCaldays(calendarDay).

Now we need to setup our style sheet. We will call it calendar.css.

#calendar_table {background-color:#CCCCCC; font-size: 9pt; font-family: Arial, Helvetica, sans-serif;
border-style: outset; border-width: 5px; margin: 0px 0px 5px 5px}

#calendar_head {background-color:#000000; color: ivory; letter-spacing: 4}

#calendar_today {font-weight: bold; color: white; background-color:#000000; border: 1px solid black}

.calendar_weekdays {width: 30px; font-size: 10pt; border-bottom:1px solid #4D6882;}

.calendar_dates {text-align: center; background-color:#CCCCCC}

Now the last step is to call the calendarDay(calendarDay) function. You don't have to put a parameter value. It is optional if you want particular date to be displayed. This would be written as calendarDay("May 1, 2007"). Remember you need to link the calendar.css and calendar.js to the web page you will be displaying the calendar on.

Your Ad Here