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>
Alles anzeigen
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';
}
Alles anzeigen