Below is a piece of java script that creates a calendar based on the selected year and month:
document.write(makeCalendar(2013,0))HolidayName[] array. Even though I've written a loop to display all the events, it only shows the first date. The issue puzzles me as the loop should iterate through all the dates. Here's the loop along with the JavaScript code:
var HolidayName = new Array (0, 1, "New Years Day",6, 1, "Canada Day",11, 25, "Christmas Day",11, 26, "Boxing Day")
function getHoliday(month, day)
{
for(var index = 0; HolidayName.length > index; index++)
{
if(HolidayName[index] == month && HolidayName[index+1] == day)
{
var name = HolidayName[index+2]
}
else
{
return ""
}
return name
}
}
The code snippet below showcases how the event is displayed in the "show dates" section using the getHoliday(mth, dayCtr) function:
function leapYear(yr) {
if (yr < 1000) yr+=1900
return((yr%4 == 0) && ((yr%100 == 0) || (yr%400 ==0)))
}
function startCol(width, height, color){
return('<TD WIDTH=' + width + ' HEIGHT=' + height + '>' + '<FONT COLOR="' + color + '">');
}
function makeCalendar(yr, mth){
var months = new Array("Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec")
var days = new Array(31, leapYear(yr)?29:28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)
var weekDays = new Array("Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat")
var HolidayName = new Array (0, 1, "New Years Day",6, 1, "Canada Day",11, 25, "Christmas Day",11, 26, "Boxing Day")
function getHoliday(month, day)
{
for(var index = 0; HolidayName.length > index; index++)
{
if(HolidayName[index] == month && HolidayName[index+1] == day)
{
var name = HolidayName[index+2]
}
else
{
return ""
}
return name
}
}
var mthSz = days[mth]
var mthName = months[mth]
var firstDyofMnth = new Date(yr, mth, 1)
var firstDay = firstDyofMnth.getDay() + 1
var numRows = Math.ceil((mthSz + firstDay-1)/7)
var mthNameHeight = 50
var borderWidth = 2
var cellSpacing = 4
var cellHeight = 80
var hdrColor = "midnightblue"
var hdrSz = "+3"
var colWidth = 100
var dayCellHeight = 25
var dayColor = "black"
var dayCtr = 1
// Build the HTML Table
var txt = '<CENTER>'
txt += '<TABLE BORDER=' + borderWidth + ' CELLSPACING=' + cellSpacing + '>'
//Show Month Name and Year
txt += '<TH COLSPAN=7 HEIGHT=' + mthNameHeight + '>'
txt += '<FONT COLOR="' + hdrColor + '" SIZE=' + hdrSz + '>'
txt += mthName + ' ' + year + '</FONT>' + '</TH>'
// Show Days of the Week
txt += '<TR ALIGN="center" VALIGN="center">'
for (var dy = 0; dy < 7; ++dy) {
txt += startCol(colWidth, dayCellHeight, dayColor) + weekDays[dy] + '</FONT></TD>'
}
txt += '</TR>'
// Show Dates in Calendar
for (var row=1; row <= numRows; ++row) {
txt += '<TR ALIGN="right" VALIGN="top">'
for (var col = 1; col <= 7; ++col) {
if (((col < firstDay) && (row==1)) || (dayCtr>mthSz))
{txt += '<TD BGCOLOR="Gainsboro"><BR></TD>'}
else
{
txt += '<TD HEIGHT=' + cellHeight + '><FONT COLOR="' + dayColor + '"> <B>'
txt += dayCtr
txt += '</B></FONT><BR>' + getHoliday(mth,dayCtr) + '</TD>'
dayCtr++;
}
}
txt += '</TR>'
}
// close all basic table tags and output txt string
txt += '</TABLE></CENTER>'
document.write(txt)
}