Jahresplaner
Zielsetzung
Erzeugen eines Kalenders (Halbjahres-Übersicht) in HTML. Möglichkeit,
Termine hervorzuheben.
Realisierung
Über ein HTML-Formular werden Zeitraum und Termine
festgelegt:
<html>
<head>
<title>Jahresplaner © www.webdesign-perder.de</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
<!--
// Inline-Skript siehe unten
// -->
</SCRIPT>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<h1 id="tit">Jahresplaner</h1>
<p id="subtit">Kalender-Übersicht zur bequemen Ganzjahres-Planung.</p>
<noscript>
<hr noshade size="3">
<p> <font color="#FF0000" size="+1">Ihr <i>JavaScript</i>
ist leider <b>ausgeschaltet</b>.
Bitte aktivieren Sie <i>JavaScript</i>, um unseren Jahresplaner
nutzen zu können.</font> <a href="http://www.webdesign-perder.de/si_js.htm">Wie
geht das?</a></p>
<hr noshade size="3">
</noscript>
<form name="jpf">
<span id="zeitraum">Zeitraum:</span>
<select name="semester">
<option value="1">Jan.-Jun.</option>
<option value="2">Jul.-Dez.</option>
</select>
<select name="jahr">
<option value="-1"> </option>
<option value="0" selected> </option>
<option value="1"> </option>
<option value="2"> </option>
</select>
<span style="border: 5px #FF0000 outset"><input type="button"
name="ok" value="OK" onClick="jpgo();"></span>
</form>
<div id="jpt"><p><b><font color="#FF0000">Bitte
warten...</font></b></p></div>
<h1 id="terti">Termine</h1>
<p>Fügen Sie hier Termine zu Ihrem Jahresplaner hinzu. Formatierung
siehe Beispiele:</p>
<form name="ts">
<textarea name="term" rows="6" cols="80">+++
TERMINE HIER EINGEBEN: +++
TT.MM-TT.MM Terminbeschreibung
TT.MM-TT.MM K Beschreibung (Termin erhält Kürzel "K")
TT.MM-TT.MM Beschreibung* (Termin wird farblich hervorgehoben)
TT.-TT.MM. (im selben Monat)
TT.MM. (nur 1 Tag)</textarea>
</form>
<h1>Weitere Optionen</h1>
<form name="opts">
<input type="checkbox" name="titel"
value="checkbox" onChange="tcheck();">
Überschrift<span id="uebers" style="display:none">:
<input type="text" name="ttext" size="40"></span>
<br>
<input type="checkbox" name="wecheck" value="checkbox"
onChange="wcheck();" checked>
Wochenende hervorheben<span id="weid">:
<input type="radio" name="wewert" value="saso">
SA.+SO.
<input type="radio" name="wewert" value="so"
checked>
SO.</span>
</form>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Formular-Felder ausfüllen
var d=new Date();
monat=d.getMonth()+1;jahr=d.getFullYear();
semester=1; if (monat>6) semester=2;
document.jpf.semester[semester-1].selected=true;
for (var i=0;i<4;i++) document.jpf.jahr[i].innerHTML=jahr-1+i;
document.getElementById("jpt").innerHTML="<p><i>(Bitte
geben Sie einen Zeitraum an)</i></p>";
tcheck();
// -->
</SCRIPT>
</body>
</html>
Ein Inline-Skript steuert den Aufruf des Kalenders:
function jpgo(){
var h="http://www.webdesign-perder.de/sp_jp_go.htm";
var jahr=0;for (var i=0;i<4;i++) if (document.jpf.jahr[i].selected==true)
jahr=document.jpf.jahr[i].innerHTML;
h=h+"?"+document.jpf.semester.value;
h=h+"&"+jahr;
h=h+"&"+document.ts.term.value.replace(/\n/g,"|");
h=h+"&"; if (document.opts.titel.checked) h=h+document.opts.ttext.value;
h=h+"&3"; if (document.opts.wecheck.checked) for (i=0;i<2;i++)
if (document.opts.wewert[i].checked) h=h+document.opts.wewert[i].value;
this.location.href=h;
}
function tcheck(){
var s="";
if (document.opts.titel.checked) {
s="inline";
if (document.opts.ttext.value=="") for (var i=0;i<4;i++) if (document.jpf.jahr[i].selected)
document.opts.ttext.value=document.jpf.jahr[i].innerHTML;
} else s="none";
document.getElementById("uebers").style.display=s;
}
function wcheck(){
var s=""; if (document.opts.wecheck.checked) s="inline";
else s="none";
document.getElementById("weid").style.display=s;
}
Dieses Skript erzeugt aus den in der Adresszeile übergebenen
Daten den HTML-Code für den Halbjahresplaner:
function jp(){ // Jahresplaner (c) 2008 fabian@perder.net,
www.webdesign-perder.de
var Wochentag = new Array("So","Mo","Di","Mi","Do","Fr","Sa");
var mond=new Array("Januar","Febraur","März","April","Mai","Juni",
"Juli","August","September","Oktober","November","Dezember");
var tage=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
var tV=new Array;
var tB=new Array;
var tT=new Array;
var tF=new Array;
var Farben=new Array("#FFFF55","#ABFFAB","#FF5555","#ABABFF","#FF55FF","#ABFFFF",
"#FFFFAB","#55FF55","#FFABAB","#5555FF","#FFABFF","#55FFFF");
var farbe=0;
var leg1=new Array;
var leg2=new Array;
function umlaute(t){
t=t.replace(/%E4/g,"ä");
t=t.replace(/%F6/g,"ö");
t=t.replace(/%FC/g,"ü");
t=t.replace(/%C4/g,"Ä");
t=t.replace(/%D6/g,"Ö");
t=t.replace(/%DC/g,"Ü");
t=t.replace(/%DF/g,"ß");
t=t.replace(/%7C/g,"|");
return t;
}
// Parameter einlesen
var ps=window.location.search.replace("?","").replace(/%20/g,"
").split("&");
ps[2]=umlaute(ps[2]);
var jahr=ps[1];
if (jahr%4==0) tage[1]=29; // Schaltjahr?
// Termine parsen
zeilen=ps[2].split("|");
for (i=0;i<zeilen.length;i++){
var dat=zeilen[i].slice(0,zeilen[i].indexOf(" "));
tT[i]=zeilen[i].slice(dat.length+1,99).replace(/ /g," ");
var von=dat.slice(0,dat.indexOf("-"));
var vonTag=von.slice(0,von.indexOf("."));
var vonMon=von.slice(vonTag.length+1,99)-1;
var bis=dat.slice(von.length+1,99);
var bisTag=bis.slice(0,bis.indexOf("."));
var bisMon=bis.slice(bisTag.length+1,99)-1;
if (vonMon==-1) vonMon=bisMon;// Kein Monat angegeben: T.-T.M.
tV[i]=new Date(jahr,vonMon,vonTag);
tB[i]=new Date(jahr,bisMon,bisTag);
if (bis==0) tB[i]=tV[i];// Keine Zeitspanne angegeben: T.M.
if (tT[i].charAt(tT[i].length-1)=='*') {
tF[i]=Farben[farbe];
var gleicherTermin=false;
for (j=0;j<i;j++) {
if (tT[j]==tT[i]) {
gleicherTermin=true;
tF[i]=tF[j];
}
}
if (!gleicherTermin){// && tT[i]!="Beschreibung*") {
farbe=farbe+1;
if (farbe>=Farben.length) farbe=0;
}
}
}
// Ausgabe
var t="";
if (ps[3]) t=t+"<h1>"+umlaute(ps[3])+"</h1>";
t=t+'<table border="0" cellpadding="1" cellspacing="0">';
var monat=0;if (ps[0]==2) monat=6;
var bis=monat+6; if (ps[0]==12) bis=12;
for (var m=monat;m<bis;m++) {
t=t+'<tr height="94"><td align="right"
width="90">'+mond[m]+"<br>"+jahr+"</td>"
for (var tag=1;tag<=tage[m];tag++) {
d=new Date(jahr,m,tag);
var sonntag=false;
if ((!ps[4] || ps[4].slice(0,2)=="3s") &&
Wochentag[d.getDay()]=="So") sonntag=true;
if (ps[4]=="3saso" && Wochentag[d.getDay()]=="Sa")
sonntag=true;
f="";
if (sonntag) f="#CCCCCC";
s="";
// Termine
ter="";
for (i=0;i<tT.length;i++) {
if (d>=tV[i]&&d<=tB[i]) {
if (tT[i].charAt(tT[i].length-1)=='*') {
f=tF[i];
// Legende 1
var doppelt=false;
var can='<span style="background-color: '+tF[i]+'"> '+tT[i].slice(0,tT[i].length-1)+' </span>';
for (k=0;k<leg1.length;k++) if (leg1[k]==can) doppelt=true;
if (!doppelt) leg1[leg1.length]=can;
}
else {
s=' style="background-image: url(mitte.gif);
background-repeat: no-repeat; background-position: center top"';
if (d.getDate()==tB[i].getDate()&&d.getMonth()==tB[i].getMonth()) s='
style="background-image: url(rechts.gif); background-repeat: no-repeat;
background-position: left top"';
if (d.getDate()==tV[i].getDate()&&d.getMonth()==tV[i].getMonth())
{
s=' style="background-image: url(links.gif); background-repeat: no-repeat;
background-position: right top"';
if (d.getDate()==tB[i].getDate()&&d.getMonth()==tB[i].getMonth()) s='
style="background-image: url(rundum.gif); background-repeat: no-repeat;
background-position: center top"';
}
ter=ter+"<b>"+tT[i].charAt(0)+"</b><br>";
// Termin-Legende
var doppelt=false;
for (k=0;k<leg2.length;k++) if (leg2[k]==tT[i]) doppelt=true;
if (!doppelt) leg2[leg2.length]=tT[i];
}
}
}
if (f!="") f=' bgcolor="'+f+'"';
t=t+'<td class="td2" valign="bottom"'+f+' width="27"
align="center"'+s+'>';
t=t+ter;
if (sonntag) t=t+"<b>";
t=t+Wochentag[d.getDay()];
t=t+"<br>"+tag;
if (sonntag) t=t+"</b>";
t=t+"</td>";
}
t=t+"</tr>";
}
t=t+'<tr><td colspan="32" class="td3">www.webdesign-perder.de/sp_jp.htm';
if (leg1.length>0) t=t+'</td></tr><tr><td valign="top">Legende:</td><td
colspan="31">';
for (k=0;k<leg1.length;k++) t=t+leg1[k]+" ";
if (leg2.length>0) t=t+'</td></tr><tr><td valign="top">Termine:</td><td
colspan="31">';
for (k=0;k<leg2.length;k++) t=t+"(<b>"+leg2[k].slice(0,1)+"</b>)"+leg2[k].slice(1,leg2[k].length)+"
";
t=t+"</td></tr></table>";
document.getElementById("jpt").innerHTML=t;
document.title=document.title.replace("Jahresplaner","Jahresplaner
"+jahr);
}
Beispiel
Neuste Version: Jahresplaner
|
