如何使用JavaScript将数组中的值显示到日历上

Question

Here I have a java script that will build an calendar based on the year and month chosen in document.write(makeCalendar(2013,0)) First param is the year and second param is the month. I have worked to a point where it only displays the calendar event on that day but is unable to display the rest of the date in my HolidayName[] Here is my array and loop to display the events, although new events will be added later on. It is only capable of displaying the first date, which I dont understand why since it should be looping all the way through. Below is my loop, followed by the javascript.

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
    }
}   

Below is the code and the event is being displayed in the show dates section from the functon getHoliday(mth, dayCtr)

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) 

}

Answer 1

Because you have else { return "" } and then outside the if...else statement, return name . So whether the condition is true or false, your function will terminate during the first run of the loop, returning the name if the condition is true, or an empty string otherwise.

Also, I think you need to increment index by 3, not by 1, on each loop; and you should use semi-colons to end each line (unless it is the start or end of a {} block).

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; index + 2 < HolidayName.length; index+=3) {
    if (HolidayName[index] == month && HolidayName[index + 1] == day) {
      return HolidayName[index + 2];
    }
  }
  return '';
}