Wir verwenden Cookies, um unsere Website und unseren Service zu optimieren.
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.
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.
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.
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
Erstmal das CSS
Folgenden Code finden wir also in einem passend positioniertem VTL-Include
<style> .CalenderContainer { padding: 0; outline: 0; text-align: left; width: 307.875px; min-width: 307.875px; max-width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; display: -ms-flexbox; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-wrap: wrap; -ms-flex-pack: justify; -webkit-justify-content: space-around; justify-content: space-around; -webkit-transform: translateZ(0); transform: translateZ(0); opacity: 1; margin: 0 auto; } .DayContainer { background: none; border: 1px solid transparent; border-radius: 150px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #ccc; font-weight: 400; width: 14.2857143%; -webkit-flex-basis: 14.2857143%; -ms-flex-preferred-size: 14.2857143%; flex-basis: 14.2857143%; max-width: 39px; height: 39px; line-height: 39px; margin: 5px 0px; display: inline-block; position: relative; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .WeekdayContainer { background: none; border: 1px solid transparent; border-radius: 150px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000; font-weight: 400; width: 14.2857143%; -webkit-flex-basis: 14.2857143%; -ms-flex-preferred-size: 14.2857143%; flex-basis: 14.2857143%; max-width: 39px; height: 20px; line-height: 39px; margin: 5px 0px; display: inline-block; position: relative; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .selected { background: #569ff7; -webkit-box-shadow: none; box-shadow: none; cursor: pointer; color: #fff; border-color: #569ff7; } .selected a { color: #fff;} </style>
Code-Sprache: HTML, XML (xml)Vieles davon habe ich aus dem Standard-Layout für die Kalenderauswahl übernommen, die sich zum Beispiel öffnet, wenn man einen Datumswert in ein Eingabefeld eingeben möchte. Das war eine für mich sehr gute Vorlage und sicherlich kann man hier und da noch ein paar Dinge verbessern, aber darum soll es hier gerade nicht gehen. Nur ganz kurz: Die Klasse CalenderContainer kommt an die ganze Kalenderansicht, WeekdayContainer ist für die einzelnen Tage der Kopfzeile, DayContainer für die Tage des Monats und selected gestaltet die Tage, für die ein Eintrag gefunden wurde. In diesem Beispiel werden sie blau. Weiter geht’s.