|
|
Hallo,
meine Frage ist etwas komplexer, aber vielleicht kann mir dennoch jemand helfen.
Aufgabe war es einen Kalender zu realisieren, der sich dynamisch verwalten lässt, die aktuelle Wochen anzeigt, etc. Der Benutzer soll einen Termin (einen Betreff und einen Ort) in die entsprechende Stelle des Kalenders schreiben können.
Es gibt eine externe *.js-Datei, die alle wichtigen Funktionen dafür beinhaltet. Ich muss sie also nur aufrufen.
Fehlend an der Aufgabe ist nun noch, dass man keine Termine in der Vergangenheit eintragen kann, der Termin gespeichert werden soll, wenn alle Angaben korrekt waren (Ort und Betreff eingegeben wurde und es sich nicht um einen Termin in der Vergangenheit handelt) und der Kalender aktualisiert und die betreffende Woche soll angezeigt werden.
Dies ist die externe *.js Datei (wichtig sind vor allem speichereTermin() und aktualisiereKalender())
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}
function speichereTermin(termin, betreff, ort) {
var expDate = new Date();
// cookie expires in one year (actually, 365 days)
expDate.setTime(expDate.getTime() + 365 * 24 * 60 * 60 * 1000);
setCookie(termin.getTime(), betreff + "#" + ort, expDate);
}
function findeNaechstenTermin(jahr, monat, tag, stunde, minute, intervall) {
var startDate = new Date(jahr, monat, tag, stunde, minute, 0, 0);
var dc = document.cookie;
var betreffort = "";
var timestamp;
var begin = 0;
var end = 0;
while (end != -1)
{
end = dc.indexOf("=", begin);
timestamp = dc.substring(begin, end);
if (timestamp >= startDate.getTime() && timestamp < startDate.getTime() + intervall * 60 * 1000)
{
begin = end + 1;
end = dc.indexOf(";", begin);
if (end == -1)
end = dc.length;
betreffort = unescape(dc.substring(begin, end));
end = -1;
}
else
{
end = dc.indexOf(";", begin);
begin = end + 1;
}
}
return betreffort;
}
function aktualisiereKalender(dateInWeek)
{
var wochentag = new Array("Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
var stunde = new Array(8,9, 11, 14, 15, 17, 20);
var minute = new Array(10, 55, 45, 0, 45, 30, 0);
var intervall = new Array(90, 90, 90, 90, 90, 90, 240);
var sow = new Date(dateInWeek);
var day, month;
/* Montag der Woche bestimmen */
if ((wd = sow.getDay()) == 0)
sow.setTime(sow.getTime() - 6 * 24 * 60 * 60 * 1000);
else
sow.setTime(sow.getTime() - (wd - 1) * 24 * 60 * 60 * 1000);
/* Titelzeile aktualisieren */
var d = new Date(sow.getTime());
for (k = 0; k < 7; k++)
{
day = d.getDate();
month = d.getMonth() + 1;
eval("document.getElementById('dow" + k + "').innerHTML = ' '");
eval("document.getElementById('dow" + k + "').innerHTML = '"
+ wochentag[k] + ", " + day + "." + month + "." + "'");
d.setTime(d.getTime() + 24 * 60 * 60 * 1000);
}
/* Termine aktualiseren */
d.setTime(sow.getTime());
for (i = 0; i < 7; i++)
{
for (j = 0; j < 7; j++)
{
eval("document.getElementById('hod" + i + j + "').innerHTML = ' '");
betreffort = findeNaechstenTermin(d.getFullYear(), d.getMonth(), d.getDate(), stunde[j], minute[j], intervall[j]);
split = betreffort.indexOf("#");
termin = "<span class=\"betreff\">" + betreffort.substring(0, split) + "</span><br />" +
"<span class=\"ort\">" + betreffort.substring(split+1, betreffort.length) + "</span>";
eval("document.getElementById('hod" + i + j + "').innerHTML = '" + termin + "'");
}
d.setTime(d.getTime() + 24 * 60 * 60 * 1000);
}
}
Und dies die bisherige Umsetzung:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>MyCalendar</title>
<meta http-equiv="language" content="de">
<meta http-equiv="content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="2.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="calendar.js"></script>
</head>
<body>
<img src="title.jpg" alt="">
<p>MyCalandar ist ein Kalender um über Ihre Termine zu koordinieren.<br> Im unten
stehenden Formular können Sie neue Termine hinzufügen.<br><br></p>
<p><a href="javascript:aktualisiereKalender('2006/11/20')">Woche 1</a> ·
<a href="javascript:aktualisiereKalender('2006/11/27')">Woche 2</a> ·
<a href="javascript:aktualisiereKalender('2006/12/04')">Woche 3</a> ·
<a href="javascript:aktualisiereKalender('2006/12/11')">Woche 4</a> ·
<a href="javascript:aktualisiereKalender('2006/12/18')">Woche 5</a>
</p>
<table>
<script type="text/javascript">
/* Generierung des Kalenderblatts mit JavaScript */
today = new Date();
bereich = new Array("<div>08:10-09:40</div>","<div>09:55-11:25</div>",
"<div>11:45-13:15</div>","<div>14:00-15:30</div>","<div>15:45-17:15</div>",
"<div>17:30-19:00</div>","<div>ab 20:00</div>");
/* Erste Zeile für Datum*/
document.write("<tr class=\"headline\"><td class=\"zeit\">Uhrzeit</td>");
for (k = 0; k < 7; k++)
document.write("<th id=\"dow" + k + "\"q></th>");
document.write("</tr>");
/* Weitere Zeilen für Termine */
for (k = 0; k < 7; k++)
{
document.write("<tr><td class=\"zeit\">" + bereich[k] + "</td>");
for (j = 0; j < 7; j++)
document.write("<td id=\"hod" + j + k + "\">" + j + k +"</td>");
document.write("</tr>");
}
aktualisiereKalender(today.toUTCString());
</script>
</table>
<p>___________________________________________________________________________</p>
<h2>Termin hinzufügen</h2>
<form id="formular" name="formular" method="post" action="" onsubmit="return check_form()">
<p><label>Betreff:
<input type="text" name="betreff">
</label>
<label>Ort:
<input type="text" name="ort">
</label><br><br>
<label>Datum:
<select name="datum">
<option>20/11</option>
<option>21/11</option>
<option>22/11</option>
<option>23/11</option>
<option>24/11</option>
<option>25/11</option>
<option>26/11</option>
</select>
</label>
<label>Uhrzeit:
<select name="uhrzeit">
<option>08:10-09:40</option>
<option>09:55-11:25</option>
<option>11:45-13:15</option>
<option>14:00-15:30</option>
<option>15:45-17:14</option>
<option>17:30-19:00</option>
<option>19:00-00.00</option>
</select>
</label><br><br>
<input type="submit" name="senden" value="Senden">
<input type="reset" name="abbrechen" value="Abbrechen">
</p>
</form>
<script type="text/javascript">
function check_form() {
if (! document.formular.betreff.value | ! document.formular.ort.value) {
alert('Betreff oder Ort fehlt');
return false;
}
else
//funktionen zum speichern des termins und des anzeigens (aktualisieren des kalenders)
//speichereTermin();
//aktualisiereKalender();
}
</script>
</body>
</html>
|
|
