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.
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.
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.
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.
Wir verwenden Cookies, um unsere Website und unseren Service zu optimieren.
Funktional
Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt.Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
Aus dem Intrexx-Labor: Eine eigene Kalender-Funktion mit multiplen Einträgen und voreingestelltem Monat
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 #endCode 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.