Hallo,
ich hätte eine Frage:
Ich habe mir einen Kalender in Java-Script programmiert, allerdings gibt es da ein kleines Problem: Sobald ich bei dem Kalender zu blättern anfange, verschwindet der Rest der Seite und ich sehe lediglich den Kalender, was ich eben vermeiden möchte.
Hat jemand eine Idee??
Vielen Dank schonmal!!
Ohne Code wird dir hier niemand konkret weiterhelfen können.
Dass einfach alles verschwindet kann viele Ursachen haben - würde dir einfach mal empfehlen mit Firebug (Firefox Addon) dein Javascript zu debuggen - dann kannste genau sehen bei welcher Zeile das Unglück passiert.
hier http://jsfiddle.net/ kannst du ein _MINIMAL_ beispiel posten
Hallo,
also hier mein Code:
zuerst der HTML-Teil:
<html>
<head>
<title>JavaScript-Calendar</title>
<script language="JavaScript" type="text/javascript" src="calendar.js"></script>
</head>
<body>
<table>
<tr>
<td>
<script language="javascript">
Calendar(2011,7);
</script>
</td>
<td><form name="Date" action="">
<input type="text" size="30" name="output" readonly="readonly"><br>
<input type="button" value="Go!!" onClick="this.form.output.value='Jetzt steht was drin'">
<form>
<a onClick="Date.output.value='Jetzt steht was andres drin'" style="cursor:pointer">Hallo</a></td>
</tr>
</table>
</body>
</html>und hier der JS-Teil:
function leapyear (year) {
if((year % 400) == 0 || ((year % 4) == 0 && (year % 100) != 0)) {
return true;
}
return false;
}
function header (year, month) {
var nameOfMonth = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
var nameOfDay = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
if (year < 999) {
year+=1900;
}
document.open();
document.write("<table border=\"1\">");
document.write("<tr><td><div align=\"left\">");
if (month == 0) {
document.write("<a href=\"javascript:Calendar(" + (year-1) + ", 11)\"><<</a></div></td>");
}
else {
document.write("<a href=\"javascript:Calendar(" + year + ", " + (month-1) + ")\"><<</a></div></td>");
}
document.write("<td colspan=\"5\"><div align=\"center\">" + nameOfMonth[month] + " " + year + "</div></td>");
if (month == 11) {
document.write("<td><div align=\"right\"><a href=\"javascript:Calendar(" + (year+1) + ", 0)\">>></a></div></td></tr>");
}
else {
document.write("<td><div align=\"right\"><a href=\"javascript:Calendar(" + year + ", " + (month+1) + ")\">>></a></div></td></tr>");
}
document.write("<tr>");
for (i = 0; i <= 6; i++) {
document.write("<td>" + nameOfDay[i] + "</td>");
}
document.write("</tr>");
}
function fillTable (year, month) {
if (year < 999) {
year+=1900;
}
var date = new Date(year, month, 1);
var dateGermanWeek = new Array(7,1,2,3,4,5,6);
var numberOfDays;
if (leapyear(year)) {
numberOfDays = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
}
else {
numberOfDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
}
var counterDaysBefore;
if (month == 0) {
counterDaysBefore = numberOfDays[11]-dateGermanWeek[date.getDay()]+2;
}
else {
counterDaysBefore = numberOfDays[month-1]-dateGermanWeek[date.getDay()]+2;
}
var counterDaysMonth = 1;
var counterDaysAfter = 1;
for (i = 1; i <= 6; i++) {
document.write("<tr>");
for (j = 1; j <= 7; j++) {
if (i == 1 && j < dateGermanWeek[date.getDay()]) {
document.write("<td>"+ counterDaysBefore + "</td>");
counterDaysBefore++;
}
else if (counterDaysMonth <= numberOfDays[month]) {
document.write("<td>"+ counterDaysMonth +"</td>");
counterDaysMonth++;
}
else {
document.write("<td>"+ counterDaysAfter +"</td>");
counterDaysAfter++;
}
}
document.write("</tr>");
}
document.write("</table>");
}
function Calendar (year, month) {
header(year, month);
fillTable(year, month);
document.close();
}
function toggleDiv(element){
if(document.getElementById(element).style.display == 'none')
document.getElementById(element).style.display = 'block';
else
document.getElementById(element).style.display = 'none';
}Das Unglück passiert, sobald man in dem Kalender blättert!
Vielen Dank schonmal!!
dein problem ist dass du überall document.write verwendest, dadurch wird das gesamte html auf der seite überschrieben, und deine form rechts verschwindet dabei
erstelle ein div mit id "calendar"
und dann anstelle von document.write verwende document.getElementById("calendar").innerHTML = "..."
siehe dazu auch:
http://stackoverflow.com/questions/2487…from-javascript
also zB so:
<html>
<head>
<title>JavaScript-Calendar</title>
<script language="JavaScript" type="text/javascript" src="calendar.js"></script>
</head>
<body>
<table>
<tr>
<td>
<div id="calendar"></div>
<script language="javascript">
Calendar(2011,7);
</script>
</td>
<td><form name="Date" action="">
<input type="text" size="30" name="output" readonly="readonly"><br>
<input type="button" value="Go!!" onClick="this.form.output.value='Jetzt steht was drin'">
<form>
<a onClick="Date.output.value='Jetzt steht was andres drin'" style="cursor:pointer">Hallo</a></td>
</tr>
</table>
</body>
</html>function leapyear (year) {
if((year % 400) == 0 || ((year % 4) == 0 && (year % 100) != 0)) {
return true;
}
return false;
}
function header (year, month) {
var nameOfMonth = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
var nameOfDay = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
if (year < 999) {
year+=1900;
}
calendar_div_content = "";
calendar_div_content += ("<table border=\"1\">");
calendar_div_content += ("<tr><td><div align=\"left\">");
if (month == 0) {
calendar_div_content += ("<a href=\"javascript:Calendar(" + (year-1) + ", 11)\"><<</a></div></td>");
}
else {
calendar_div_content += ("<a href=\"javascript:Calendar(" + year + ", " + (month-1) + ")\"><<</a></div></td>");
}
calendar_div_content += ("<td colspan=\"5\"><div align=\"center\">" + nameOfMonth[month] + " " + year + "</div></td>");
if (month == 11) {
calendar_div_content += ("<td><div align=\"right\"><a href=\"javascript:Calendar(" + (year+1) + ", 0)\">>></a></div></td></tr>");
}
else {
calendar_div_content += ("<td><div align=\"right\"><a href=\"javascript:Calendar(" + year + ", " + (month+1) + ")\">>></a></div></td></tr>");
}
calendar_div_content += ("<tr>");
for (i = 0; i <= 6; i++) {
calendar_div_content += ("<td>" + nameOfDay[i] + "</td>");
}
calendar_div_content += ("</tr>");
}
function fillTable (year, month) {
if (year < 999) {
year+=1900;
}
var date = new Date(year, month, 1);
var dateGermanWeek = new Array(7,1,2,3,4,5,6);
var numberOfDays;
if (leapyear(year)) {
numberOfDays = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
}
else {
numberOfDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
}
var counterDaysBefore;
if (month == 0) {
counterDaysBefore = numberOfDays[11]-dateGermanWeek[date.getDay()]+2;
}
else {
counterDaysBefore = numberOfDays[month-1]-dateGermanWeek[date.getDay()]+2;
}
var counterDaysMonth = 1;
var counterDaysAfter = 1;
for (i = 1; i <= 6; i++) {
calendar_div_content += ("<tr>");
for (j = 1; j <= 7; j++) {
if (i == 1 && j < dateGermanWeek[date.getDay()]) {
calendar_div_content += ("<td>"+ counterDaysBefore + "</td>");
counterDaysBefore++;
}
else if (counterDaysMonth <= numberOfDays[month]) {
calendar_div_content += ("<td>"+ counterDaysMonth +"</td>");
counterDaysMonth++;
}
else {
calendar_div_content += ("<td>"+ counterDaysAfter +"</td>");
counterDaysAfter++;
}
}
calendar_div_content += ("</tr>");
}
calendar_div_content += ("</table>");
calendar_div = document.getElementById("calendar");
calendar_div.innerHTML = calendar_div_content;
}
function Calendar(year, month) {
header(year, month);
fillTable(year, month);
}
function toggleDiv(element){
if(calendar_div.getElementById(element).style.display == 'none')
calendar_div.getElementById(element).style.display = 'block';
else
calendar_div.getElementById(element).style.display = 'none';
}Vielen Dank, hat mir sehr weitergeholfen.
Viele Grüße,
Philipp
Hallo,
ich stehe nun vor einem neuen, etwas kleinerem Problem, aber ich komme irgendwie nicht drauf.
Der Kalender öffnet sich, sobald man auf ein Icon klickt. Wenn man ein entspr. Datum ausgewählt hat, schließt sich der Kalender wieder. Es soll nun das aktuell selektierte Datum bei wiederholtem Öffnen des Kalenders, also indem man wieder auf das Icon klickt farblich hinterlegt werden.
Hier ist auch schon das Problem. Die Zelle der Tabelle wird nur dann farblich hinterlegt, wenn man einen Monat zurück- und dann wieder vorgeht. Es soll aber auch ohne dieses Blättern funktionieren.
Mein aktueller HTML-Code:
<html>
<head>
<title>JavaScript-Calendar</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript" type="text/javascript" src="calendar.js"></script>
</head>
<body>
<table>
<tr>
<td>Date:</td>
<td>
<form name="dateform" action="">
<input type="text" size="20" name="date"><a href="#" onClick="show('calendar');"><img src="calendar.gif"></a>
</form>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="check" value="Check Date" onClick="checkDatum()">
</td>
</tr>
<tr>
<td> </td>
<td>
<div id="calendar" style="display:none">
<script language="javascript">callCalendar();</script>
</div>
</td>
</tr>
</table>
</body>
</html>Mein aktueller JS-Code:
//überprüft, ob ein bestimmtes Jahr ein Schaltjahr ist
function leapyear (year) {
if((year % 400) == 0 || ((year % 4) == 0 && (year % 100) != 0)) {
return true;
}
return false;
}
//definiert den Header des Kalenders, also Monat und Wochentage
function header (year, month) {
var nameOfMonth = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
var nameOfDay = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
if (year < 999) {
year+=1900;
}
calendarDivContent = "";
calendarDivContent += ("<div id=\"tab\"><table>");
calendarDivContent += ("<tr><td><div align=\"left\">");
if (month == 0) {
calendarDivContent += ("<a href=\"javascript:Calendar(" + (year-1) + ", 11)\"><<</a></div></td>");
}
else {
calendarDivContent += ("<a href=\"javascript:Calendar(" + year + ", " + (month-1) + ")\"><<</a></div></td>");
}
calendarDivContent += ("<td colspan=\"5\"><div align=\"center\">" + nameOfMonth[month] + " " + year + "</div></td>");
if (month == 11) {
calendarDivContent += ("<td><div align=\"right\"><a href=\"javascript:Calendar(" + (year+1) + ", 0)\">>></a></div></td></tr>");
}
else {
calendarDivContent += ("<td><div align=\"right\"><a href=\"javascript:Calendar(" + year + ", " + (month+1) + ")\">>></a></div></td></tr>");
}
calendarDivContent += ("<tr>");
for (i = 0; i <= 6; i++) {
calendarDivContent += ("<td>" + nameOfDay[i] + "</td>");
}
calendarDivContent += ("</tr>");
}
//hier werden die einzelnen Tage in die richtigen Zellen eingetragen
function fillTable (year, month) {
if (year < 999) {
year+=1900;
}
var date = new Date(year, month, 1);
var dateGermanWeek = new Array(7,1,2,3,4,5,6);
var numberOfDays;
if (leapyear(year)) {
numberOfDays = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
}
else {
numberOfDays = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
}
var counterDaysMonth = 1;
for (i = 1; i <= 5; i++) {
calendarDivContent += ("<tr>");
for (j = 1; j <= 7; j++) {
if (i == 1 && j < dateGermanWeek[date.getDay()]) {
calendarDivContent += ("<td> </td>");
}
else if (counterDaysMonth <= numberOfDays[month]) {
if (counterDaysMonth + "." + (month+1) + "." + year == document.dateform.date.value) {
calendarDivContent += ("<td style=\"background-color:red\"><a onClick=\"dateform.date.value='"+ counterDaysMonth + "." + (month+1) + "." + year +"'; hide('calendar');style=\"cursor:pointer;\">"+ counterDaysMonth +"</a></td>");
}
else {
calendarDivContent += ("<td><a onClick=\"dateform.date.value='"+ counterDaysMonth + "." + (month+1) + "." + year +"'; hide('calendar'); \" style=\"cursor:pointer\">"+ counterDaysMonth +"</a></td>");
}
counterDaysMonth++;
}
else {
calendarDivContent += ("<td> </td>");
}
}
calendarDivContent += ("</tr>");
}
calendarDivContent += ("</table></div>");
calendarDiv = document.getElementById("calendar");
calendarDiv.innerHTML = calendarDivContent;
}
//erzeugt vollständigen Kalender
function Calendar (year, month) {
header(year, month);
fillTable(year, month);
}
//diese Funktion ruft den eigentl. Kalender auf
function callCalendar() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
if (document.dateform.date.value) {
var string = document.dateform.date.value.replace(/[^0-9^\.]/g, '');
var split = string.split(".");
var month = parseInt(split[1] || 0, 10);
var year = parseInt(split[2] || 0, 10);
}
Calendar(year,month);
}
//Funktion zum Anzeigen des Kalenders
function show (div) {
with(document.getElementById(div).style) {
if (display == "none") {
display = "inline";
}
else {
display = "none";
}
}
}
//Funktion zum Verbergen des Kalenders
function hide (div) {
with (document.getElementById(div).style) {
if (display == "none") {
display = "none";
}
else {
display = "none";
}
}
}
//Ermittelt das vollständige Jahr
function getFullYear(date) {
if (!date) {
date = new Date();
}
if (typeof date.getFullYear != 'undefined') {
return date.getFullYear();
}
var year = date.getYear();
if (year < 1000) {
year += 2000;
}
return year;
}
//Überprüft, ob ein bestimmtes Datum gültig ist
function checkDate(string) {
if(!string) {
return false;
}
string += '';
string = string.replace(/[^0-9^\.]/g, '');
var split = string.split(".");
var day = parseInt(split[0], 10);
var month = parseInt(split[1] || 0, 10);
var year = parseInt(split[2] || 0, 10);
if(isNaN(year)) year = getFullYear();
var check = new Date(year, month - 1, day);
var day2 = check.getDate();
var year2 = getFullYear(check);
var month2 = check.getMonth() + 1;
if (year2 == year && month == month2 && day == day2) {
return true;
}
return false;
}
//Aufruf von obiger Funktion
function checkDatum () {
if (checkDate(document.dateform.date.value)) {
alert("Das Datum " + document.dateform.date.value + " ist gültig!");
}
else {
alert("Das Datum ist ungültig!");
}
}Ich hab das komplette Paket auch angehängt.
Vielen Dank schonmal!
Du musst das farblich Markieren des derzeitig ausgewählten Tages _ebenfalls_ mit JavaScript machen, und nicht wie jetzt fix in die calenderDivContent Variable schreiben.
Versehe jeden Tag mit einer eindeutigen id (am besten das Datum des Tages) und markier beim Aufruf von show('calender', 'currentSelectedDate') das <td> Element mit id 'currentSelectedDate' mit document.getElementById('currentSelectedDate').style.backgroundcolor = 'yellow';
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!