Eigenen Html-Kalender erstellen – Html und JavaScript

Share on FacebookShare on Google+Share on LinkedInTweet about this on TwitterShare on TumblrEmail this to someone

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!”.

Getestet unter Chrome, Internet Explorer und Firefox

Html-Kalender

Html-Kalender

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

« »
Mo Di Mi Do Fr Sa So
-x- -x- -x- -x- -x- -x- -x-
-x- -x- -x- -x- -x- -x- -x-
-x- -x- -x- -x- -x- -x- -x-
-x- -x- -x- -x- -x- -x- -x-
-x- -x- -x- -x- -x- -x- -x-
-x- -x- -x- -x- -x- -x- -x-


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.

<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>

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

<form id='myform'>
	<input id='datum' />
</form>

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().

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

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.

/**
*	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';
			}
		} 				  				
	}		
}

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.

/**
* 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();
}

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.

/**
* 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;}
}

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()).

/**
* 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]);
}

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

/**
* 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 '---';
	}
}

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

/**
* Ü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();
}

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.

/**
* 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;
}

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.

/**
 * 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;
}

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’).

//Datum wird ausgegeben
setReturnModus(0);
//Veranstaltungstext wird ausgegeben
setReturnModus(1);

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.

<script type='text/javascript'>
	iniCalendar();
	//0 = Datumsausgabe
	//1 = Veranstaltungstextausgabe
	setReturnModus(0); 
</script>

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

weblink Download – Html-JavaScript-Kalender: Html-Kalender

Share on FacebookShare on Google+Share on LinkedInTweet about this on TwitterShare on TumblrEmail this to someone

MrKnowing

Programmierer und Wissensnerd! Kontaktiere mich auf Google+ oder einfach per Mail danny@mrknowing.com

You may also like...

36 Responses

  1. Werner sagt:

    Hallo!
    Der Kalender ist super! Kann ich eigentlich bei deinem Kalender einzelne Tage farblich hervorheben (z.B. Feiertage)?
    Liebe Grüße
    Werner

    • MrKnowing sagt:

      Hallo Werner,

      ich habe dir den Kalender ergänzt, um die Funktion isHoliday(m,d). In der Haupt-Methode “loadcalendar()” wird diese dann aufgerufen und geprüft, ob das gerade behandelte Datum einer der Feiertage ist. Ist dem so, wird es rot eingerahmt. Viel Spaß damit ;).

      lg

  2. Anna sagt:

    Hallo! Ich bin sehr begeistert von diesem Kalender:) Ich bräuchte einen Veranstaltungskalender und deshalb meine Frage. Gäbe es die Möglichkeit anstatt das Datum in dem Kasten unten anzeigen zu lassen, dass man in diesem Kasten immer einen anderen Text einfügen kann? Oder gibt es dafür eine andere Möglichkeit?
    Vielen Dank und Liebe Grüße Anna

    • MrKnowing sagt:

      Hi Anna,

      verstehe ich das richtig, du würdest gern zu verschiedenen Daten noch ein Veranstaltungsnamen hinzufügen? Bspw. 31.12 > Silvesterparty, 05.01 Festivalx? Quasi eine Zusatzinformation hinter dem Datum und dann nur diese ausgeben? … Dies geht mit Sicherheit. Muss mir nur was einfallen lassen ;)

      lg

      • Anna sagt:

        Hallo,
        ja du hast das richtig verstanden.
        Danke dass du dir was einfallen lässt
        Lg

        • MrKnowing sagt:

          So Anna,
          es ist vollbracht. Schau dir mal die letzten zwei Absätze “Veranstaltungen statt Datum” und “Das Finale” an.

          Im Download ist die neue Version auch drin. Bei Fragen einfach Fragen ;)

          lg

    • William sagt:

      Ja super! Der Januar ist nun mal der Monat, wo die neuen Kalender zum Einsatz kommen. Du bist also gnaaaz aktuell! Sie gefallen mir Alle sehrsehr gut, eine tolle Collage!Ganz liebe Grfcdfe schickt die Eva

  3. Anna sagt:

    Vielen Dank,dass du das so schnell hinbekommen hast. Du warst mir eine große Hilfe:)

  4. Jens sagt:

    Hallo!
    Ist gut gelungen der Kalender. Ich bräuchte einen Kalender, der Zeilenweise den Monat ausgibt, da ich darunter eintragen möchte ob ich z.B Urlaub habe oder … Nun müsste der am 1. Wochentag des Monats beginnen und am letzten enden, weil sonst immer leere Tage in der Zeile stehen. Habe es schon versucht, bekomme es aber nicht richtig hin.
    Gruß Jens

    • MrKnowing sagt:

      Hi Jens,

      grundsätzlich ist alles möglich. Jedoch ist deine Anfrage schon etwas komplexer, dazu müsste die Logik des Kalenders komplett umgekrempelt bzw. komplett neu definiert werden, wäre schon fast nen neues Projekt. Der Kalender ist nur immer auf einen Monat ausgelegt und so konzipiert. Daher werde ich die Anforderung nicht implementieren, sorry ;)

      lg

  5. Jens sagt:

    Ich hätte da ne Idee das einfach zu ändern,
    die teilweise raus und müsste nur irgenwie die Werte Monat beginnt mit 3. oder 4… Wochentag bzw. Monat hat n Tage in eine Variable in die HTML-Datei bekommen, dann kann ich Mo, Di … steuern. Habe es in function loadcalendar() mit dateDay1 = firstD.getDay(); versucht, das klappt auch beim Start, allerding bleibt der Wert gleich wenn ich die Monate weiterklicke. dateDay1 habe ich ohne var deklariert, dann ist sie global denke ich. Vielleicht hast du ja nen Tipp wie ich an die Wert komme.
    lg

  6. Jens sagt:

    die erste Zeile muss lauten:
    die tr-Umbrüche teilweise raus

    • MrKnowing sagt:

      Hi Jens,

      ich werde mir mal deine abstrakte Beschreibung anschauen. Jedoch bin ich momentan im Prüfungsstress. Kann etwas dauern.
      lg

  7. Steve sagt:

    Hallo

    Super Kalender! Jetzt hab ich auch endlich einen gefunden der funktioniert und gefällt.

    Zwei Problemchen hab ich aber noch.
    - Lässt sich das aktuelle Datum hervorheben? z.B. durch fette Schrift?
    - Was muss ich machen damit bei mehreren Events an einem Tag die Einträge untereinander gelistet werden und sich somit auch das Feld in der Höhe vergrößert?
    Alternativ würde mir auch gefallen dass die Events per Hover angezeigt werden.

    Vielen Dank im voraus. LG

    • MrKnowing sagt:

      Hi Steve,

      das Datum wird jetzt hervorgehoben. Dazu gibt es in der Methode loadCalendar() eine Variable hD. Da steht das heutige Datum drin und das wird dann abgefragt, ob der Tag der gerade in den Kalender eingetragen wird der heutige ist. Im Blogbeitrag ist das die Zeile 52 bis 59 (im Abschnitt loadCalendar()).

      Um mehrere Events, an einem Tag einzutragen: Kann ich dir nicht genau sagen, aber probiers mal damit. Du machst die Ausgabebox zu einer Textarea (so dass mehrzeilige Ausgaben überhaupt möglich sind) und dann probiere einfach ein Textumbruch einzufügen in der Methode getEventtext(y,m,d). Beispiel:

      h[0] = “22.1.2014|Rap Mayhem Festival, München \n Eventzwei, Berlin \n Eventdrei, Leipzig”;

      Dabei steht das “\n” für einen Textumbruch.

      Sollte es nicht gehen, dann meld dich noch mal. Schaue es mir dann später an, bin momentan etwas im Stress.

      lg

  8. Steve sagt:

    Das mit dem aktuellen Datum hat geklappt, ist jetzt hervorgehoben. Vielen Dank schomal dafür!

    Die Textarea hab ich nicht hinbekommen. Hätte vielleicht dazu sagen sollen dass ich im Grunde keine Ahnung von Javascript habe ;) Wenn ich den Code sehe verstehe ich auch die Logik dahinter und kann darin auch ein bisschen was anpassen, aber um eine neue Funktion hinzuzufügen reicht es leider nicht :/

    Da wäre ich Dir sehr dankbar wenn Du das auch noch hinbekommen würdest. Aber lass Dir ruhig Zeit, musst Dich nicht extra stressen deswegen. Bis die restliche Seite fertig ist vergeht eh noch viel Zeit.

    LG

  9. Ulrich Härtling sagt:

    Hallo Steve,

    ein klasse Kalender der sich, im Gegenteil zu einem den ich schon mal hatte, größenmässig (Tabelle und Schrift) ändern lässt. Da ich die Anzeige von Events verwende, wäre es schön wenn im Kalender der Tag an dem ein Event stattfindet hervorgehoben wird (fett oder farbiger Hintergrund). Wie ist dies zu bewerkstellen?

    LG

    • MrKnowing sagt:

      Hi Ulrich,
      ich habe die Änderung soweit Umgesetzt. Komischerweise hat Phil genau die gleiche Frage gestellt, komischerweise zum gleichen Zeitpunkt wie du ;) (Zufälle gibts …). Ich habe dabei die Rahmenbox grün eingefärbt, wenn ein Event stattfindet.

      lg
      ps.: Mein Name ist nicht Steve ;)

  10. Phil sagt:

    Hallooo! :)

    Sehr schöner Kalender den Du veröffentlicht hast.

    Eine Sache fehlt mir jetzt noch^^
    Und zwar hätte ich gerne die Tage, an denen ein Event stattfindet farbig markiert. Leider habe ich keine js Kenntnisse und Google will auch nicht so recht einen Lösungsansatz ausspucken.

    Wäre klasse von Dir, wenn Du den Kalender dahingehend noch erweiterst.

    Gruß Phil

    • MrKnowing sagt:

      Hi Phil,
      ich habe dir die loadcalendar()-Methode so erweitert, dass alle Events grün umrahmt werden. Jedoch gehen Feiertage vor. Das soll heißen, wenn es ein Event am 1.5 Gibt wird der Kasten rot umrahmt weil dort auch ein Feiertag stattfindet. Die Farben kannst du natürlich ändern wenn du magst. Schau einfach in die Zeile “if(!getEventtext(y,m,zahl))” drei Zeilen drunter genau nach “else” steht der Farbcode für den grünen Rahmen. Enjoy :)
      lg

  11. Connie sagt:

    Hallo MrKnowing,
    erstmal: Superkalender!!! Auch ich bin absoluter Neuling, was Java betrifft. Ist es machbar, dass das event schon beim mouseover angezeigt wird? Wenn ja, wie? Zumindest reagiert mein Browser erst auf Klick und zeigt das “hinterlegte” event.
    vgC.

    • MrKnowing sagt:

      Hi Conni,

      machbar ist alles :) … ich überlege mir was. Noch ein ganz persönliches Anliegen “Java ist nicht JavaScript” … siehste schon wieder was neues gelernt! ;)

    • MrKnowing sagt:

      Hello again,
      deine Änderung ist drin! Habe es als neuen Upload hinzugefügt + kurzer Widmung im Blogtext über der loadCalendar-Funktion ;). Danke für den guten Input!
      lg Danny

  12. Alex sagt:

    Hallo,
    vielen Dank für den Kalendercode – nicht so “undurchsichtig” wie viele andere im Netz.
    Aus diesem Grund habe ich bisher immer Abstand von solchen (fertigen) Dingen genommen..

    Eine Frage habe ich noch – dieser Kalender ist ja immer “fest” also komplett in der HTML Seite eingebettet und erschient somit immer komplett. Gibt es die Möglichkeit den Kalender bei Bedarf mit einem klick erscheinen zu lassen? In einem kleinen zusätzlichen Fenster?

    Ich habe nicht so viel Platz auf meiner Seite…

    Viele Grüße
    Alex

    • MrKnowing sagt:

      Hi Alex,

      ja das ist möglich. Habe das sogar so schon konkret umgesetzt … denn genau für den Fall – es soll geklickt werden und genau an der Stelle kommt der Kalender – wurde das Modul konzipiert und eingesetzt. Jetzt kommt das ABER. Das Steuerelement welches ein- und ausgeblendet wird ist ein separates. Wollte dir gerade eine schnelle Lösung programmieren aber das macht nicht wirklich sinn und wird zu kompliziert, dass noch mit in den Beitrag rein zuquetschen.

      Meine Lösung: Ich schreibe am Wochenende einen neuen Blogbeitrag über diese Box die ein- und ausgeblendet werden kann. Anschließend stelle ich auf Grundlage dieser ein Beispiel online, wo ich Kalender und Ein-Ausblendebox kombiniere. Ist das ein Vorschlag? … Die Box kannst du dann auch vielseitig einsetzen für alles mögliche … wenn du sowieso generell Platz Probleme hast.

      Ich gebe dir nach Fertigstellung auch noch mal bescheid ;)
      beste Grüße und Danke für den guten Input

  13. Chris sagt:

    Muss ich beim import irgendetwas bestimmtes beachten??
    Denn irgendwie wird der mir nicht richtig angezeigt, bzw nur teilweise und das ausgabefeld ist nicht da :/

  14. Patrick sagt:

    Hallo,

    bei mir wird nicht nur der heutige Tag markiert.
    Wenn man zwischen den Monaten wechselt, ist immer die Tabellenzelle markiert, in der der heutige Tag steht.

    Also. Heute ist der 27.08.2014. Es ist die Zelle in der 3. Spalte in der 5. Reihe markiert. Und das bei jedem Monat.

    Wie kann ich das ändern?

  15. Marco sagt:

    Hallo,

    hoffe es liest noch jemand hier meinen paar Zeilen, denn die letzte Antwort kam ja im April 2014 :-))) Erst einmal tolles Script – vielen Dank. Ich hab nur eine kleine Frage die sicherlich schnell beantwortet werden kann. Weiß jemand, wie man aus Tagen und Monaten die deutschen Formate wie 01.03.2014 ändern kann? Aktuell bekomme ich nur 1.3.2014 raus. Ich würde mit dem Script gerne eine Eventsuche (www.demo.de/suche.php?=01.03.2014) auf meiner Homepage anbieten wollen. Viele Grüße Marco

  16. Carsten sagt:

    Wow….ein sehr schöner Kalender!
    und vor allem ist dein Code sehr übersichtlich!

  17. Sven sagt:

    Hallo,
    erstmal vielen Dank für den Kalender! Ich habe den Download genutzt und den Kalender in meine HP eingebettet. Funktioniert soweit ganz gut. Leider klappt das farbliche hervorheben den aktuellen Tages, der Events und der Feiertage nicht. Da ich wie gesagt, stumpf den Download eingebettet habe und lediglich die Events geädnert habe, verstehe ich nicht warum. Hast Du da eine Idee?
    Dann würde ich mich die Anfrage von Steve noch interessieren, wie man eine mehrzeilige Ausgabe des Eventtextes hinbekommt. Wo macht man die Ausgabebox zu einer Textarea?
    Schon mal vielen Dank!
    Beste Grüße,
    Sven

  18. Hannes sagt:

    Hallo,

    vielen Dank für dieses hilfreiche Tutorial. Ich wollte eigentlich die Daten für Veranstaltungen in eine Excel-Tabelle separat abspeichern, sodass ich diese immer mal wieder ändern kann.
    Wie kann ich diese nun einbinden und auslesen?

    viele Grüße

    Hannes

  19. Toni sagt:

    Das ist echt eine geile Sache die du da gezaubert hast!!!
    könnte man iwo im quelltext noch eintragen das wenn an einem datum da ein event stattfindet, das dieser tag im kalender farbig ist ??? :o

  20. Dieter sagt:

    Oh, hier ging was schief! Ich hatte nicht bedacht, dass die “Winkel” hier nicht in HTML umgesetzt werden. Sorry …

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>