Eigenen Html-Kalender erstellen – Html und JavaScript

Wie bindet man eigentlich einen Html-Kalender ein? Klingt banal, ist es auch, doch eine fertige und ‚einfache‘ Lösung habe ich nicht wirklich gefunden. Da heißt es: „selbest ist der Programmierer!“.

Die Anforderung erschien mir recht einfach. Ich brauche einen einfachen Html-Kalender, der durch die einzelnen Monate scrollen kann und beim klicken auf ein Datum, dieses in eine Textbox übernimmt. Denkste! Klang einfach doch ein simple Html-Kalender Funktion konnte ich einfach nicht finden.

Der eine war auf PHP angewiesen, der andere Kalender wollte sich mit meinen Facebook-Terminen synchronisieren und wiederum der nächste Kalender war einfach völlig undurchsichtig und unkontrollierbar. Wenn es eins gibt was ein Programmierer niemals, aber auch wirklich niemals möchte, ist es die Kontrolle über das eigene Programm zu verlieren.

Nach drei stündiger Recherche für einen Html-Kalender und einem Flop nach dem anderen, kam mir die Idee: Mach es doch einfach selbst. Schnell eine Anforderungsdefinition und los gehts.

Vorab-Infos!

Vorab möchte ich noch anmerken, dass ich kein wirklicher Experte bin, was Html, CSS und JavaScript angeht. Auch solltet ihr euch nicht erschrecken lassen von den ganzen unten aufgeführten Funktionen. Eigentlich braucht man nur alles aufgeführtes in eine Datei Kopieren und fertig ist der Html-Kalender. Oder ihr benutzt einfach den angehängten Download.

kompletter Download am Ende des Artikels

Demo

HTML-Kalender: Step by Step

Aufteilung der Dateien

Vorab möchte ich kurz erklären wie die Dokumente aufgebaut sind. In der calendar.html sind alle HTML-Elemente inklusive der ganzen Struktur der Kalender Tabelle. In der inc/calendar.js befinden sich alle Javascript-Funktionen. In der inc/calendar.cssy befinden sich alle Stylings (Stylesheets).

Die Anforderungen an den Html-Kalender:

Es soll ein Html-Kalender geschaffen werden, der nur mit Html und JavaScript auskommt. Dieser soll durch die einzelnen Monate Scrollen können und beim klicken eines Datums soll dieses im Format ‚DD.MM.YYYY‘ in eine Textbox ‚input-Box‘ übernommen werden. Und der Html-Kalender soll natürlich auch irgendwie schön aussehen, wobei dies im Auge des Programmierers mehr als subjektiv erscheint.

Das Html-Gerüst

Für das Html-Gerüst habe ich eine einfache Tabelle erstellt. Diese besteht aus dem Tabellenkopf in dem sich die zwei Buttons befinden um die Monate weiter zuschalten und in der Mitte der Monatsname. Darunter befinden sich die Einzelnen Felder, die vorgesehen sind für die Tage. Dabei sind 42 Zellen vorgesehen, da es sein kann, dass der Monat an einem Sonntag in Zelle 7 startet und 31 Tage lang ist. Wenn man schon mal in der sechsten Spalte ist, macht man sie natürlich auch komplett. Ganz am Anfang der Tabelle gibt es eine Spalte die ausgeblendet wird (id=’date_memory‘), diese wird lediglich als Zwischenspeicher benutzt, da ich irgendwie nicht gecheckt habe, wie das mit den globalen Variablen – in JavaScript – funktioniert.

[code language=“html“]
<table border=1 id=’calendar‘>
<tr style=’visibility:collapse;‘ hidden>
<td colspan=7 id=’date_memory‘>—</td>
</tr>
<tr>
<td class=’calendar_head‘><a class=’calendar_link‘
href=’javascript:prevMonth()‘> &laquo;</a></td>
<td colspan=5 class=’calendar_head_month‘ id=’calendar_month‘>
—</td>
<td class=’calendar_head‘><a class=’calendar_link‘
href=’javascript:nextMonth()‘> &raquo;</a></td>
</tr>
<tr>
<td class=’calendar_day‘>Mo</td>
<td class=’calendar_day‘>Di</td>
<td class=’calendar_day‘>Mi</td>
<td class=’calendar_day‘>Do</td>
<td class=’calendar_day‘>Fr</td>
<td class=’calendar_day‘>Sa</td>
<td class=’calendar_day‘>So</td>
</tr>
<tr>
<td class=’calendar_entry‘ id=’calendar_entry_1′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_2′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_3′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_4′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_5′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_6′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_7′>-x-</td>
</tr>
<tr>
<td class=’calendar_entry‘ id=’calendar_entry_8′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_9′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_10′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_11′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_12′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_13′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_14′>-x-</td>
</tr>
<tr>
<td class=’calendar_entry‘ id=’calendar_entry_15′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_16′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_17′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_18′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_19′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_20′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_21′>-x-</td>
</tr>
<tr>
<td class=’calendar_entry‘ id=’calendar_entry_22′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_23′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_24′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_25′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_26′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_27′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_28′>-x-</td>
</tr>
<tr>
<td class=’calendar_entry‘ id=’calendar_entry_29′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_30′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_31′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_32′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_33′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_34′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_35′>-x-</td>
</tr>
<tr>
<td class=’calendar_entry‘ id=’calendar_entry_36′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_37′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_38′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_39′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_40′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_41′>-x-</td>
<td class=’calendar_entry‘ id=’calendar_entry_42′>-x-</td>
</tr>
</table>
[/code]

Anschließend soll noch die Textbox erschaffen werden, in die das geklickte Datum aus dem Html-Kalender übernommen wird.

[code language=“html“]
<form id=’myform‘>
<input id=’datum‘ />
</form>
[/code]

Die JavaScript Funktionen

Die iniCalendar-Funktion wird einmal aufgerufen beim laden der Internetseite. Diese ermittelt das aktuelle Datum und schreibt es in die date_memory-Zelle (mein kleiner Zwischenspeicher). Anschließend lädt die Funktion den Html-Kalender via loadcalendar().

[code language=“javascript“]
/**
* zum erstmaligen aufrufen des Kalenders
*/
function iniCalendar()
{
//heutiges Datum setzen
var d = new Date();
//aktuelles Datum speichern
setDateToMemory(d);
//Calender laden
loadcalendar();
}
[/code]

Die loadcalender-Funktion stellt die Primäre Routine des Html-Kalenders dar. Im ersten Schritt wird das aktuelle Datum gelesen, aus der Speicherzelle (date_memory). Dieses wird in ein Date-Typ umgewandelt. Tag, Monat und Jahr wird ermittelt. Die Monatsnummern fangen bei 0 an zuzählen (Januar = 0, Dezember = 11), daher rechne ich immer einen dazu. Anschließend wird jede Tages Zelle der Tabelle durchgegangen. Ab dem Starttag (Mo – So) wird angefangen zu zählen. Alle Zellen vorher werden ausgeblendet mit border = 0px, nicht mit hidden, sonst würden alle weiteren Zellen nach Links rutschen. Am Ende können diese mit hidden ausgeblendet werden. Die Tage werden zusätzlich mit einer JavaScript-Funktion belegt mit putDate(). Besonderheit hier ist die isValidDate()-Funktion. Diese gibt zurück ob ein Datum existiert oder nicht. Denn meine Schleife würde rein theoretisch immer weiterlaufen auch bis zum 42.7.2013 usw. ;). Daher prüfen wir ob die aktuelle Zahl noch gültig ist (Funktion wird später gezeigt).

Kleiner Einschub: Es werden jetzt auch die Events markiert in Grün, auf Wunsch von Kommentator Phil. Anzumerken ist dabei, dass Feiertage (rot) vor Events (grün) stehen. Das heißt: findet ein Event am gleichen Tag wie ein Feiertag statt, wird der Feiertag hervorgehoben statt des Events. Es ergibt sich eine Rotfärbung! Wer die Events ausblenden möchte, nimmt einfach unten in der Methode „getEventtext(..)“ die Event-Daten raus.

Nächster kleiner Einschub: Auf Wunsch von Conni (Kommentatorin) werden jetzt Events auch im ToolTip angezeigt. Das heißt, dass Events beim darüber fahren mit der Maus angezeigt werden.

[code language=“javascript“]
/**
* Läd die Tabelle mit dem übergebenen Datum (Monat)
*/
function loadcalendar()
{
//aktuelles Datum holen (1. des Monats)
var d = getDateFromMemory();
//Monat ermitteln aus this_date (zählen beginnt bei 0, daher +1)
var m = d.getMonth();
//Jahr ermitteln aus this_date (YYYY)
var y = d.getFullYear();
//Monat und Jahr eintragen
document.all.calendar_month.innerHTML = getMonthname(m+1) + ‚ ‚ + y;
//ersten Tag des Monats festlegen
var firstD = d;
firstD.setDate(1);
//Wochentag ermitteln vom 1. des übergebenen Monats (Wochentag aus firstD)
var dateDay = firstD.getDay(); //So = 0, Mo = 1 … Sa = 6
//Sonntag soll den Wert 7 darstellen -> Mo = 1 … So = 7
dateDay = (dateDay == 0) ? 7: dateDay;
//Speicher für aktuelle Zelle
var entry = “;
//Speicher für aktuellen Tag
var zahl = “;
//heutiges Datum ermitteln
var hD = new Date();
//ist event
//falls event, dann darf der Rahmen
//nicht vom isHolyday überschrieben werden
var bEvent = false;

//Alle Kalender Spalten durchzählen
for (var i = 1; i <= 42; i++)
{
bEvent = false;
//holen der aktuellen Zelle
entry = document.getElementById(‚calendar_entry_’+i);
//errechnen der Tages Zahl
zahl = (i+1)-dateDay;
//datum zusammenschreiben
var dx = new Date(y,m,zahl);

//Eintragen der Daten ab ersten Tag im Monat und wenn es ein gültiges Datum ist
if (i >= dateDay && isValidDate(y,m,zahl))
{
entry.innerHTML = ‚<a class=calendar_link href=javascript:putDate(‚+zahl+‘)>’+zahl+'</a>‘;
entry.hidden = false;
entry.style.visibility=’visible‘;
entry.style.border = ’solid 1px‘;
//wenn Event ist
if (!getEventtext(y,m,zahl))
{entry.style.color=’000000′;}
else{
entry.style.color=’00FF00′;
//Eventtext wird als Tooltip angezeigt
entry.title = getEventtext(y,m,zahl);
bEvent = true;
}
//Wenn Tag ein Feiertag ist
if (isHoliday(m,zahl))
{entry.style.color=’FF0000′;}
else{
if (!bEvent)
entry.style.color=’000000′;
}

//heutiges Datum hervorheben
if (hD.getDate() == dx.getDate() &&
hD.getMonth() == dx.getMonth() &&
hD.getYear() == dx.getYear())
{
entry.style.fontWeight = ‚bold‘;
entry.style.backgroundColor = ‚FFFF33‘;
}

}
else
{
entry.innerHTML = “;

if (i>= dateDay)
{//Wenn Kalenderende
//Zelle = hidden
entry.hidden = true;
entry.style.border = ‚0px‘;
}
else
{//Wenn Kalenderanfang
//Border-width = 0px
entry.style.border = ‚0px‘;
}
}
}
}
[/code]

Die nächsten zwei Funktionen kümmern sich darum, dass das Datum um einen Monat weiter geschalten wird (nextMonth) oder zurück geschalten werden (prevMonth). Das Datum wird auseinander genommen der Monat erhöht oder verringert. Sollte dabei die Jahresgrenze über- bzw. unterschritten werden, muss das Jahr ebenfalls mit gewechselt werden. Etwas verwirrend ist dabei, dass der Monat in dem Datentyp selber immer bei 0 anfängt zu zählen. Januar = 0, Februar = 1 … Dezember = 11.

[code language=“javascript“]
/**
* schaltet einen Monat Weiter
*/
function nextMonth()
{
var d = getDateFromMemory();
var m = d.getMonth()+1;
var y = d.getFullYear();

//Falls Jahres wechsel
if ((m+1)>12)
{
m = 0;
y = y + 1;
}
d = new Date(y,m,01)
setDateToMemory(d);
loadcalendar();
}
/**
* schaltet einen Monat zurück
*/
function prevMonth()
{
var d = getDateFromMemory();
var m = d.getMonth()+1;
var y = d.getFullYear();
//Falls Jahres1wechsel
if ((m-1)<1)
{
m = 11;
y = y – 1;
}
else
{
m = m – 2;
}
d = new Date(y,m,01);
setDateToMemory(d);
loadcalendar();
}
[/code]

Die isValidDate()-Methode fragt ab, ob der übergebene Tag noch für den Monat gültig ist. Dazu setze ich das Datum auf den 1. und erhöhe das Datum um einen Monat. Anschließend ziehe ich genau einen Tag ab und bekomme das Datum des letzten Tages im angegebenen Monat. Am Ende vergleiche ich nur noch ob mein übergebener Tag noch im Rahmen des ermittelten maximalen Monatstags ist.

[code language=“javascript“]
/**
* Ist ein Datum gültig
* @param y: Jahr
* @param m: Monat
* @param d: Tag
* @return true = gültig, false = ungültig
*/
function isValidDate(y,m,d)
{
//–Gibt Datum des letzten Tag des Monats aus–
var thisDate = new Date(y,m,1);
//einen Tag weiter schalten
thisDate.setMonth(thisDate.getMonth()+1);
//vom ersten Tag des nächsten monats
//ein Tag abziehen
thisDate.setTime(thisDate.getTime() – 12*3600*1000)

if (d>thisDate.getDate())
{return false;}
else
{return true;}
}
[/code]

In den nächsten zwei Methoden regele ich das Schreiben in den Speicher (Speicherzelle) und das lesen aus dieser. Dabei habe ich mich auf das Format YYYY,MM,DD geeinigt, so dass ich es bei der Get-Methode sauber auseinander schneiden kann (mit split()).

[code language=“javascript“]
/**
* setzt das übergebene Datum in die Speicherzelle
* @param d: datum zum schreiben in die Speicherzelle
*/
function setDateToMemory(d)
{
document.all.date_memory.innerHTML = d.getFullYear()+‘,’+(d.getMonth()+1)+‘,’+d.getDate();
}
/**
* Gibt das Datum aus der Speicherzelle zurück
* @return: datum in Date format
*/
function getDateFromMemory()
{
var s = document.all.date_memory.innerHTML;
var z = s.split(‚,‘);
return new Date(z[0],z[1]-1,z[2]);
}
[/code]

Natürlich darf die obligatorische Methode, welche Monatsnummern in Namen übersetzt, nicht vergessen werden.

[code language=“javascript“]
/**
* Gibt den Monatsnamen anhand der Monatsnummer zurück
*@param monthnumber: Monatsnummer (1-12)
*/
function getMonthname(monthnumber)
{
switch(monthnumber)
{
case 1:
return ‚Januar‘;
break;
case 2:
return ‚Februar‘;
break;
case 3:
return ‚März‘;
break;
case 4:
return ‚April‘;
break;
case 5:
return ‚Mai‘;
break;
case 6:
return ‚Juni‘;
break;
case 7:
return ‚Juli‘;
break;
case 8:
return ‚August‘;
break;
case 9:
return ‚September‘;
break;
case 10:
return ‚Oktober‘;
break;
case 11:
return ‚November‘;
break;
case 12:
return ‚Dezember‘;
break;
default:
return ‚—‚;
}
}
[/code]

Jetzt kommt noch die putDate-Funktion, diese kümmert sich darum, dass der angeklickte Tag im Html-Kalender auch in die Textbox übernommen wird.

[code language=“javascript“]
/**
* Übernimmt das angeklickte Datum in das Ausgabeelement
* @param n: Kalendertag zum Kombinieren mit Monat und Jahr
*/
function putDate(n)
{
var d = getDateFromMemory();
d.setDate(n);
document.forms[‚myform‘].elements[‚datum‘].value = d.getDate()+‘.’+(d.getMonth()+1)+‘.’+d.getFullYear();
}
[/code]

Feiertage anzeigen

Auf speziellen Wunsch von „Werner“ (Kommentator), ergänze ich eine Funktion zum markieren von Feiertagen. Dabei sind noch keine Feiertage, welche an verschiedenen Daten (bspw. Ostersonntag oder -Montag) stattfinden, berücksichtigt. Vielleicht fällt mir noch eine relativ einfache Lösung ein, die ich dann ergänze.

[code language=“javascript“]
/**
* Ist das Angegebene Datum ein Feiertag?
* @param m : Monat
* @param d : Tag
*/
function isHoliday(m,d)
{
//Monate fangen bei 0 an zuzählen
m++;
//festlegen der Feiertage
var h = new Array(7);
h[0] = "1.1";
h[1] = "6.1";
h[2] = "1.5";
h[3] = "3.10";
h[4] = "1.11";
h[5] = "25.12";
h[6] = "26.12";
h[7] = "31.12";
var iD;
//Alle Daten Testen
for ( var i = 0; i < h.length; i++) {
iH = h[i].split(".");
if (iH[0] == d && iH[1] == m) {
return true;
}
}
//Wenn kein Feiertag gefunden
return false;
}
[/code]

Veranstaltungen statt Datum ausgeben

Auf speziellen Wunsch von Anna (Kommentatorin) wurde der Kalender erweitert. Anna wollte gerne, dass statt des Datums ein Veranstaltungstext ausgegeben wird. Beispielsweise: 9.12.2014 = mein Geburtstag. Es sollen bestimmte Daten angegeben werden können und dazu ein kleiner Text der dann statt des Datums ausgegeben wird. … Und so wirds gemacht.

Es gibt jetzt eine neue Funktion getEventtext (in der Datei ‚inc/calendar.js‘). In dieser werden die Events definiert. Ich habe jetzt mal 8 Events definiert (0 bis 7). Möchte man noch mehr Events definieren, muss einfach nur die Zahl hinter dem Array erhöht werden. Die Einträge erfolgen immer mit ‚Tag.Monat.Jahr‘ gefolgt von einem Pipezeichen ‚|‘ (Tastenkürzel: ‚AltGR+<') und anschließend der Veranstaltungstext.

[code language=“javascript“]
/**
* Prüft ob an einem bestimmten Tag ein Event stattfindet
* und gibt dieses als Text zurück.
* @param int y: Jahr
* @param int m: Monat
* @param int d: tag
* @return Veranstaltungstext,
* wenn keine veranstaltung = false
*/
function getEventtext(y,m,d)
{
//convertieren in int-Zahlen
y = parseInt(y);
m = parseInt(m);
d = parseInt(d);

//Monate fangen bei 0 an zuzählen
m++;
//definieren der Events
var h = new Array(7);
h[0] = "22.1.2014|Rap Mayhem Festival, München";
h[1] = "1.2.2014|Spirit Of Goa, Hamburg";
h[2] = "16.2.2014|Emergenza Acoustic Festival, Berlin";
h[3] = "2.3.2014|Skarneval Koblenz, Wehdem";
h[4] = "12.4.2014|Balinger Rockfestival, Dillingen";
h[5] = "5.7.2014|HipHop Open, Stuttgart";
h[6] = "19.7.14|Feeling Fine Festival, Espelkamp";
h[7] = "26.7.14|Beach Party, Duisburg";

var dH;
var eH;
for ( var i = 0; i < h.length; i++) {
//Datum eH[0] von Event eH[1] trennen
eH = h[i].split("|");
//Datum trennen > Tag dH[0], Monat dH[1], Jahr dH[2]
dH = eH[0].split(".");

if (parseInt(dH[0]) == d && parseInt(dH[1]) == m
&& parseInt(dH[2]) == y)
{return eH[1];}
}
return false;
}
[/code]

Desweiteren gibt es die Funktion setReturnModus(index). Übergibt man den Index 0, so bleibt man im alten Modus und das Datum wird ausgegeben beim klicken von einem Eintrag. Übergibt man jetzt aber den Index 1, so wird der Veranstaltungstext ausgegeben. Wird keine Veranstaltung gefunden wird ‚keine Veranstaltung!‘ ausgegeben.
Diese Funktion ruft man am besten direkt nach der iniCalendar() Funktion im HTML-Dokument auf (siehe Download-Beispiel oder folgender Absatz ‚Das Finale‘).

[code language=“javascript“]
//Datum wird ausgegeben
setReturnModus(0);
[/code]
[code language=“javascript“]
//Veranstaltungstext wird ausgegeben
setReturnModus(1);
[/code]

Im folgenden Absatz Das Finale rufe ich die Funktion einfach auf.

Das Finale

Am Schluss muss nur noch die iniCalendar Funktion nach der Html-Tabelle aufgerufen werden. Wichtig ist der Aufruf danach, ansonsten würden die Html-Werte – auf die die Funktion zugreift – schlicht noch gar nicht existieren.

Im zweiten Schritt wird der Modus (setReturnModus()) angelegt. 0 steht für die Datumsausgabe und 1 für den Veranstaltungstext.

[code language=“html“]
<script type=’text/javascript‘>
iniCalendar();
//0 = Datumsausgabe
//1 = Veranstaltungstextausgabe
setReturnModus(0);
</script>
[/code]

Auch ein Stylesheet wäre noch ganz schön um die Tabelle etwas eleganter zu gestalten. Jedoch erspare ich mir das auflisten der Definition, diese ist im Anhang mit enthalten.

HTML-Kalender Download

Download – Html-JavaScript-Kalender: Html-Kalender