Kalender - Tagesansicht

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Hätte noch eine Frage, die Striche von den Uhrzeiten kann man zur vollen Stunde nicht komplett durchziehen?

Mit fest vorgegebenen Spalten wäre das durchaus möglich

Grid-Zellen können sich nämlich überdecken.

mit repeat(auto-fit, …) war mir das nicht geglückt.

Was aber geht: die Termine als Grid im Grid.

Das äußere Grid .tagesansicht hat zwei Spalten: die Labels erstrecken sich über beide. Darüber liegt in der rechten Spalte die Zelle .events, die sich über alle Zeilen erstreckt und selbst ein Grid ist – dieses mit variabler Spaltenanzahl.

Damit das passt, muss die grid-template-rows-Deklaration für .tagesansicht und .events gleich sein und die Höhe der Grid-Zeilen fest sein.

Ausgehend von der Variante mit display: contents sieht das so aus: ☞ Grid in Grid.

Hier hat .labels { display: contents }; .events aber nicht mehr.

Ohne display: contents (was von Edge noch nicht unterstützt wird) müsste man das Markup so schreiben, dass die Labels wie gehabt Kinder von div.tagesansicht sind; die Termine aber nochmals gruppiert sind:

<div class="tagesansicht">
	<div style="--start: h0800">08:00</div>
	⋮
	<div style="--start: h2300">23:00</div>
	<ul class="events">
		<li style="--start: h0930; --end: h1130">Frühstück</li>
		⋮

LLAP 🖖