Kalender - Tagesansicht
bearbeitet von 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.
Ausgehend von der [Variante mit `display: contents`](https://forum.selfhtml.org/self/2018/aug/25/kalender-tagesansicht/1729986#m1729986) sieht das so aus: ☞ [**Grid in Grid**](https://codepen.io/gunnarbittersmann/pen/bxEmJy).
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:
~~~HTML
<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 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
Kalender - Tagesansicht
bearbeitet von 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.
Ausgehend von der [Variante mit `display: contents`](https://forum.selfhtml.org/self/2018/aug/25/kalender-tagesansicht/1729986#m1729986) sieht das so aus: ☞ [**Grid in Grid**](https://codepen.io/gunnarbittersmann/pen/bxEmJy).
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:
~~~HTML
<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 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann