Endlich wird der Kalender erzeugt

<div class="CalenderContainer">
<span class="WeekdayContainer">Mo.</span>
<span class="WeekdayContainer">Di.</span>
<span class="WeekdayContainer">Mi.</span>
<span class="WeekdayContainer">Do.</span>
<span class="WeekdayContainer">Fr.</span>
<span class="WeekdayContainer">Sa.</span>
<span class="WeekdayContainer">So.</span>Code language: JavaScript (javascript)

Wir öffnen ein Div für den Kalender und schreiben dort in Spans erstmal die Wochentage rein. Wegen der Klassen: siehe oben.

#if($intBefore == 0) #set($intBefore = 7) #end
#if($intBefore != 1)
	#foreach($i in [2..$intBefore])
		<span class="DayContainer"></span>
	#end
#endCode language: HTML, XML (xml)

Hier fülle ich das erste mal den Kalender mit “leeren Tagen” auf. Das sind quasi Tage, die in den Vormonat gehören, hier aber nicht betrachtet werden. Die Darstellung beginnt ja mit einem Montag, der Monat kann aber durchaus mit einem Dienstag beginnen, daher muss der Montag eben leer sein.

In Zeile 1 gehe ich auch direkt das Problem an, das meine Woche in der Darstellung mit Montag beginnen soll, sie bei Velocity aber mit Sonntag beginnt. Wenn der Tag vor dem betrachteten Monat bzw. dessen ersten Tag ein Sonntag ist, also die Nummer 0 hat, dann mache ich da einfach eine 7 draus. Der Rest ist dann eine einfache Iteration beginnend bei 2 bis zum Monatsanfang. Warum geht es bei 2 los und warum wird die Anweisung ignoriert, wenn es eine 1 ist?
Der Montag ist ja die 1 und unser Kalender beginnt bei Montag, also 1, also müssen da keine leeren Tage angelegt werden und die Schleife wird in jedem Fall mindestens einmal durchlaufen, weil das hier weniger als Zählschleife betrachtet wird, sondern als “Führe alles so oft aus, wie es in der Range vorkommt”. You get it.

#foreach($i in $range)
	#if ($array.contains($DtUtil.date($intYear, $intMonth, $i, $User.getTimeZone())))
		#set($hexYear = $Codec.hexEncodeString($intYear.toString(), "UTF-8"))
		#set($hexMonth = $Codec.hexEncodeString($intMonth.toString(), "UTF-8"))
		#set($hexDay = $Codec.hexEncodeString($i.toString(), "UTF-8"))
		#set($hexSTRID = $Codec.hexEncodeString($strid, "UTF-8"))
		<span class="DayContainer selected">$i
</span>
	#else
		<span class="DayContainer">$i</span>
	#end
#end
Code language: HTML, XML (xml)

Kommen wir endlich zum Sweet Spot. Hier wird nämlich der eigentlich betrachtete Monat dargestellt, hinterlegte Termine werden markiert und am Ende verlinken wir das alles auch noch – aber da müsst ihr mal selbst schauen, wie ihr das anstellen wollt. Dazu aber später mehr.
Zunächst müssen wir natürlich unsere zuvor erstellte Range (erster bis letzter Tag des betrachteten Monats) mit der Laufvariablen $i durchiterieren.
Aus $i für den Tag, dem Jahr und dem Monat erzeuge ich abermals mit $DtUtil ein Datum und schaue nach, ob es sich in dem Array befindet, das ich ja zuvor mit den relevanten Datumswerten füllte. Ist es darin enthalten, werden erstmal alle Werte gehext – auch die STRID – damit wir uns daraus dann in Zeile 7 einen schnieken Link basteln könnten (bitte hier die ganz oben definierte CSS-Klasse selected betrachten). Wie das mit den Tooltipp-Links usw. funktioniert, könnte ihr dann allerdings an entsprechender Stelle in der Doku herausfinden.

Ist der Wert jedenfalls nicht enthalten, wird einfach nur ein normaler Tag mit der Zählvariablen $i dargestellt. Das sollte klar sein.

#if($intAfter != 0)
	#foreach($i in [$intAfter..6])
		<span class="DayContainer"></span>
	#end
#end
</div>
Code language: HTML, XML (xml)

Am Ende müssen wir natürlich nochmal, sofern nötig, leere Tage auffüllen, damit das alles ordentlich eingerückt wird und gut aussieht. Das schließende Div gehört zur kompletten Kalenderanzeige und muss natürlich auch sein.

Ich hoffe, wer auch immer das hier findet, fand auch ein bisschen Hilfe und Inspiration. Das alles ist sehr updatesicher und vermutlich kann man auch noch einiges verbessern – gerade im CSS-Teil des Skripts, wenn man beispielsweise auf Farben des eingestellten Layouts zurückgreifen oder direkt irgendwie auf das Design der Kalender-Tooltip-Kontrolle zurück greifen wollte. Aber darum darf sich gern jemand anderes kümmern.

Schreiben Sie einen Kommentar

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

Hallo! Mein Name ist Marco Friedersdorf und bin Freelancer im Bereich der Software-Entwicklung und IT-Beratung. Mit Artikeln wie diesem möchte ich einen kleinen Einblick in meine Arbeit geben und über die Dinge sprechen, die mich als Informatiker beschäftigen.
tripadvisor flickr americanexpress bandcamp basecamp behance bigcartel bitbucket blogger codepen compropago digg dribbble dropbox ello etsy eventbrite evernote facebook feedly github gitlab goodreads googleplus instagram kickstarter lastfm line linkedin mailchimp mastercard medium meetup messenger mixcloud paypal periscope pinterest quora reddit rss runkeeper shopify signal sinaweibo skype slack snapchat soundcloud sourceforge spotify stackoverflow stripe stumbleupon trello tumblr twitch twitter uber vimeo vine visa vsco wechat whatsapp wheniwork wordpress xero xing yelp youtube zerply zillow px aboutme airbnb amazon pencil envelope bubble magnifier cross menu arrow-up arrow-down arrow-left arrow-right envelope-o caret-down caret-up caret-left caret-right