Kalender - Tagesansicht
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> ☞ [Mit Grid geht das recht einfach.](https://codepen.io/gunnarbittersmann/pen/dqGZMq) Und das Beste an Grid ist: der Code ist selbsterklärend.
>
> Der Trick ist, dass jeder Termin seine Start- und Endzeit so zur Verfügung stellt, dass sie zur Positionierung genutzt werden kann – mit ***custom properties***{:@en}.
Eben noch ergänzt:
~~~CSS
.tagesansicht
{
--start: 1;
--end: -1;
}
~~~
(Erwähnte ich schon, dass kaputte Syntax-Highlighter kaputt sind?)
Wenn bei einem Termin kein `--start` angegeben ist, dann wird der Wert von `.tagesansicht` übernommen – er geht am Tagesanfang los.
Wenn bei einem Termin kein `--end` angegeben ist, dann wird der Wert von `.tagesansicht` übernommen – er geht bis zum Tagesende.
Das ist ja das gute an ~~CSS-Variablen~~ *custom properties*{:@en}: dass es keine Variablen, sondern *properties*{:@en} sind, die sich genauso verhalten – mit Kaskade und Vererbung und so.
***Custom properties*{:@en} sind mehr als CSS-Variablen** – ich sollte mal einen Vortrag dazu machen.
*Oh, wait!*{:@en} Das sollte ich [wirklich](https://www.webkongress.fau.de/talks/custom-properties-sind-mehr-als-bloss-css-variablen/); nicht hier im Forum abhängen.
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann