nicht angemeldet
Hallo !
Ich versuche gerade, die Eingabe eines Datums mit Hilfe eines Kalendertools zu realisieren. Und zwar soll eine Tabelle, die alle Tage eines gewählten Monats enthält, nach einem Mausklick (Buttons: Vorheriger Monat, Nächster Monat) ausgetauscht werden.
Zu diesem Zweck generiere ich den entsprechenden HTML-Code per JavaScript und möchte ihn nun mit "document.getElementById("calendar").appendChild(rows[i])" anzeigen. Leider klappt das nicht. Da keine Fehlermeldung erscheint, vermute ich, daß der Code zwar gewissermaßen "intern" schon geschrieben wird, aber die Anzeige nicht aktualisiert wird.
Für Hilfestellung jeglicher Art wäre ich sehr dankbar.
Für alle, die es interessiert, hier der bisher produzierte Code:
--- JavaScript in separater Datei ------------------------------
function displayCalendar(month, year) {
calendarPage(month, year);
for(i=0;i<rows.length;i++) {
document.getElementById("calendar").appendChild(rows[i]);
}
}
function calendarPage(month, year) {
rows = new Array();
currentWeek = -1;
days = daysForDisplay(month, year);
currentDayOWeek = 1;
isCurrentMonth = false;
for(i=0;i<days.length;i++) {
// determine if month is current month
if(days[i] == 1) isCurrentMonth = !isCurrentMonth;
// begin new week
if(currentDayOWeek == 1) {
currentWeek++;
rows[currentWeek] = document.createElement("tr");
}
// create new td tag for current day
currentDay = document.createElement("td");
// create new class attribute for td tag of current day
currentClass = document.createAttribute("class");
// set the class attribute
if(isCurrentMonth) currentClass.nodeValue = "currentMonth";
else currentClass.nodeValue = "otherMonth";
currentDay.setAttributeNode(currentClass);
// insert number of current day
currentNumber = document.createTextNode(days[i]);
currentDay.appendChild(currentNumber);
// add current day to week
rows[currentWeek].appendChild(currentDay);
// determine next day of the week
if(currentDayOWeek == 7) currentDayOWeek = 1;
else currentDayOWeek++;
}
return rows;
}
function daysForDisplay(month, year) {
daysForDisplay = new Array();
// get number of days displayed belonging to the previous month
firstDayOMonth = new Date(year, month - 1, 1);
numPreviousDays = getDayOWeek(firstDayOMonth) - 1;
// if there are days belonging to the previous month which shall be displayed
if(numPreviousDays > 0) {
// get previous month
if(month == 1) {
previousMonth = 12;
previousYear = year - 1;
}
else {
previousMonth = month - 1;
previousYear = year;
}
// get number of days of the previous month
daysOPreviousMonth = daysOMonth(previousMonth, previousYear);
// loop through days of previous month in order to add them to the array of displayed days
for(i=daysOPreviousMonth-numPreviousDays+1;i<=daysOPreviousMonth;i++) daysForDisplay.push(i);
}
// get number of days of this month
daysOMonth = daysOMonth(month, year);
// loop through days of this month in order to add them to the array of displayed days
for(i=1;i<=daysOMonth;i++) daysForDisplay.push(i);
// get number of days displayed belonging to the next month
lastDayOMonth = new Date(year, month - 1, daysOMonth);
numNextDays = 7 - getDayOWeek(lastDayOMonth);
// loop through days of the next month in order to add them to the array of displayed days
for(i=1;i<=numNextDays;i++) daysForDisplay.push(i);
return daysForDisplay;
}
function getDayOWeek(date) {
day = date.getDay();
if(day == 0) return 7;
else return day;
}
function isLeapYear(year) {
if(year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) return true;
else return false;
}
function daysOMonth(month, year) {
days = new Array(0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
if(month != 2) return days[month];
else {
if(isLeapYear(year)) return 29;
else return days[month];
}
}
--- Die HTML-Datei -----------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="calendar.js" type="text/javascript"></script>
</head>
<body onload="displayCalendar(4, 2004)">
<p>Datum:<br>
<table border="1" cellspacing="0" class="calendar" id="calendar"></table></p>
</body></html>