Kalender - Tagesansicht

[Meowsalot]

Hallo,

ich möchte gerne eine Tagesansicht für einen Kalender umsetzten. Meine Idee war erst dieses mit einer Tabelle zu realisieren, dieses finde ich jetzt keine gute Idee mehr, denn ich würde die Darstellung gerne wie folgt darstellen

Wenn ich dieses mit einer Tabelle mache, dann benötige ich eine Menge an Zeilen und wie mache ich es wenn ein Termin über mehrere Stunden geht? Da müsste ich dann Zelle verbinden, usw.. Ich denke mit diverse DIVs geht dieses einfacher? Eine Lösung habe ich leider noch nicht

Was ich auf keinen Fall möchte, ist folgende Darstellung wenn es unterschiedlich Lange Termine gibt.

Wie könnte ich dieses am besten umsetzten? Das ist nur für Intern, das heißt es kann auch Moderne Technik genommen werden wie Flex oder Grid. Ein IE und oder Edge ist nicht im Einsatz.

Dieser Fehler hat derzeit Google.

Bis bald!
Meowsalot (Bernd)

[Regina Schaukrug]

Oh je. Das wird sowie schwer. Man kann jede Darstellung "crashen". Dazu muss man nur genügend und genügend merkwürdige Termine eintragen.

Hier schon, dass es offenbar 3 Termine mit gleichem Beginn gibt. Vielleicht kommst Dir bei einer Bildersuche nach "gantt chart" eine gute Idee. Das ist was aus der Projektplanung (Da gibt es sowas ähnliches) - aber meistens "in quer".

[Meowsalot]

Hallo Regina,

danke für den Hinweis mit "gantt chart" An sich keine Schlechte Idee nur dann muss ich von links nach rechts scrollen und sollte man dieses nicht vermeiden?

Hmm, schwere Entscheidung. Wie würde hier dann ein HTML aussehen? Auch jede Menge DIVS?

Bis bald!
Meowsalot (Bernd)

[Regina Schaukrug]

nur dann muss ich von links nach rechts scrollen und sollte man dieses nicht vermeiden?

Naja. So ab 15 gleichzeitigen oder überlappenden Terminen musst Du auch bei Deiner Darstellung nach rechts scrollen…

Auch jede Menge DIVS?

Nicht zwingend. Ich bring mal Positionierung ins Spiel. Ein Termin, ein DIV.

Das wird aber wohl eine heftige Geschäftslogik. Schreib Dir genau auf, was Du tun willst...

[Meowsalot]

Hallo Regina,

hier habe ich ein Beispiel gefunden:
https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/demos/simple.html

Ist nicht schlecht gemacht, nur wie setzte ich dieses mit HTML um? Da habe ich ja wieder das Problem mit den Zusammenhängenden Zeiten? Ich kann kein DIV zerteilen?

Bis bald!
Meowsalot (Bernd)

[Gunnar Bittersmann]

@@Meowsalot

Wie könnte ich dieses am besten umsetzten?

Wer soll dir das sagen können, wenn du nicht beschreibst, was „dieses“ ist?

• Wie soll es aussehen, wenn es einen Termin gibt?

• Wie soll es aussehen, wenn es zwei Termine gibt, die sich nicht überlappen?

• Wie soll es aussehen, wenn es zwei Termine gibt, die sich überlappen?

• Wie soll es aussehen, wenn es dre Termine gibt, von denen sich zwei überlappen?

• ⋮

LLAP 🖖

[Meowsalot]

Hallo Gunnar,

das ist ganz schnell beantwortet ;) Jeder Termin wie du in meinem Screenshot nebeneinander

Bis bald!
Meowsalot (Bernd)

[Gunnar Bittersmann]

@@Meowsalot

das ist ganz schnell beantwortet ;)

Gründlich wäre besser gewesen.

Jeder Termin wie du in meinem Screenshot nebeneinander

Also Zeitspalte und soviele Spalten, wie es Termine gibt?

Auch wenn sie sich nicht überlappen, soll jeder Termin in seiner eigenen Spalte stehen?

LLAP 🖖

[Meowsalot]

Hallo Gunnar,

Also Zeitspalte und soviele Spalten, wie es Termine gibt?

genau, jeder Termin in eine Spalte und nebeneinander.

Auch wenn sie sich nicht überlappen, soll jeder Termin in seiner eigenen Spalte stehen?

genau. Zwar würde man mit überlappen Platz sparen, aber ich finde dieses sehr unübersichtlich. Daher einfach jeder Termin neben den anderen legen.

Bis bald!
Meowsalot (Bernd)

[Gunnar Bittersmann]

@@Meowsalot

Es wäre hilfreich, wenn du an dich gestellte Fragen auch beantworten würdest. Und zwar nicht schnell, sondern genau.

Also nochmal:

• Wie soll es aussehen, wenn es einen Termin gibt?

• Wie soll es aussehen, wenn es zwei Termine gibt … Was ist mit der Spaltenbreite?

Und noch eine Frage:

• Beginnen und enden Termine jeweils zur vollen oder halben Stunde oder beliebig?

LLAP 🖖

[Meowsalot]

Hallo Gunnar,

• Wie soll es aussehen, wenn es einen Termin gibt?

wenn es nur ein Termin gibt, darf dieser gerne über die komplette Breite gehen.

• Wie soll es aussehen, wenn es zwei Termine gibt … Was ist mit der Spaltenbreite?

Wenn es zwei Termine gibt, teilen die sich einfach den Platz also 50%. Bei drei Termine 33,333% bei 4 Termine 25%

Irgendwann muss man sagen, es macht kein Sinn mehr und es gibt einen Link mir alle Termine anzeigen, dann geht ein weiteres Fenster auf (so viele Termine gibt es in der Regel nicht.).

Alternativ könnte es auch so aussehen, wenn dieses einfacher in der Umsetzung ist:
https://forum.selfhtml.org/self/2018/aug/25/kalender-tagesansicht/1729974#m1729974

Und noch eine Frage:

• Beginnen und enden Termine jeweils zur vollen oder halben Stunde oder beliebig?

Schwer zu sagen. Schön wäre es wenn man es beliebig machen könnte, dann wäre dieses aber mit HTML und CSS bestimmt sehr schwer umzusetzen? Es würde auch schon 15 Minuten reichen.

Beispiel:

Beginn: 14:00 Uhr Ende: 14:45 Uhr

Termin 2

Beginn: 14:00 Uhr Ende: 16:30 Uhr

Termin 3

Beginn: 15:15 Uhr Ende: 23:45 Uhr

Bis bald!
Meowsalot (Bernd)

[Regina Schaukrug]

Du musst (für Beginn von oben und die Höhe) eigentlich "nur" den Beginn in eine Prozentzahl des Tages umrechnen und die Dauer ebenfalls. Also: Ein Termin, der um 9 beginnt und um 11 endet, beginnt bei 37.5% und hat die Länge von 8.33 Prozent. Dann sollten die Termine eine Mindesthöhe haben und eine Mindestbreite oder Du musst Dir Gedanken um den Overflow machen.

Dann musst Du (wegen der Breite und dem Beginn von links) wissen, wie viele und welche Termine sich überlappen und den wievielten davon Du gerade "zeichnen" willst. Das wird wohl am schwierigsten.

Codepen.

[Meowsalot]

Hallo Regina,

wäre es dann doch einfacher auf so eine Darstellung zu setzten?
https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/demos/simple.html

Aber auch da habe ich das Problem dass ich nicht weiß wie ich die Termin in das Raster bekomme.

Bis bald!
Meowsalot (Bernd)

[Regina Schaukrug]

Aber auch da habe ich das Problem dass ich nicht weiß wie ich die Termin in das Raster bekomme.

Laut Quelltext wird für jeden "Termin" einfach eine unique ressource (auditorium/room) festgelegt und die werden dann untereinander angezeigt.

Hint: Eine natürliche Person kann immer nur einen Termin haben. Sonst ist mindestens einer der "Termine" ein "Ereignis".

Beispiel:

• Du bist im Urlaub in Italien: Termin
• Schwiegermutter feiert gleichzeitig in Hamburg Geburtstag: Ereignis, denn das macht die (hoffentlich ohne sich aufzuregen) brav ohne Dich.

[marctrix]

Hej Meowsalot,

Aber auch da habe ich das Problem dass ich nicht weiß wie ich die Termin in das Raster bekomme.

Das englische Wort für Raster lautet grid 😉

Marc

[Gunnar Bittersmann]

@@marctrix

Aber auch da habe ich das Problem dass ich nicht weiß wie ich die Termin in das Raster bekomme.

Das englische Wort für Raster lautet grid 😉

Sag ich doch. 😉

LLAP 🖖

[marctrix]

Hej Gunnar,

Sag ich doch. 😉

Ja, habe es inzwischen selbst gesehen! 😂

Marc

[marctrix]

Hej Regina,

Kalender die ich kenne haben eine feste Höhe für jeden Tag. Egal ob Termine drin sind oder nicht.

Wenn die Höhe 24em oder ex oder ein Vielfaches davon ist, kann man die Terminhöhe sehr einfach berechnen.

Marc

[Regina Schaukrug]

Kalender die ich kenne haben eine feste Höhe für jeden Tag.

Im Browser? Kann sein, muss nicht...

[Gunnar Bittersmann]

@@Meowsalot

wenn es nur ein Termin gibt, darf dieser gerne über die komplette Breite gehen.

Wenn es zwei Termine gibt, teilen die sich einfach den Platz also 50%. Bei drei Termine 33,333% bei 4 Termine 25%

Es stellt sich heraus, dass es einfacher ist, sich die Termine automatisch anordnen zu lassen: sich nicht überlappende Termine sind untereinander, es werden nur so viele Spalten beansprucht wie nötig.

☞ Mit Grid geht das recht einfach. 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.

Es würde auch schon 15 Minuten reichen.

Ich hab’s für halbe Stunden gemacht. Es sollte ein Leichtes sein, die Gridlinien für Viertelstunden hinzuzufügen.

LLAP 🖖

[Regina Schaukrug]

☞ Mit Grid geht das recht einfach. Und das Beste an Grid ist: der Code ist selbsterklärend.

Fürwahr die beste Variante. Danke für das tolle Beispiel.

Es sollte ein Leichtes sein, die Gridlinien für Viertelstunden hinzuzufügen.

Statt "Handarbeit":

<?php
for ($i=8; $i<24; $i++) {
  for ( $k = 0; $k < 60; $k = $k + 15 )  {
	$si = sprintf("%'.02d", $i);
	$sk = sprintf("%'.02d", $k);
	print "\t" . '<div class="label" style="--start: h' . $si . $sk . '">' . $si . ':' . $sk . '</div>' . "\n";
  }
}

	<div class="label" style="--start: h0800">08:00</div>
	<div class="label" style="--start: h0815">08:15</div>
	<div class="label" style="--start: h0830">08:30</div>
	<div class="label" style="--start: h0845">08:45</div>
	<div class="label" style="--start: h0900">09:00</div>

[Meowsalot]

Hallo Regina,

Statt "Handarbeit":

<?php
for ($i=8; $i<24; $i++) {
  for ( $k = 0; $k < 60; $k = $k + 15 )  {
	$si = sprintf("%'.02d", $i);
	$sk = sprintf("%'.02d", $k);
	print "\t" . '<div class="label" style="--start: h' . $si . $sk . '">' . $si . ':' . $sk . '</div>' . "\n";
  }
}

	<div class="label" style="--start: h0800">08:00</div>
	<div class="label" style="--start: h0815">08:15</div>
	<div class="label" style="--start: h0830">08:30</div>
	<div class="label" style="--start: h0845">08:45</div>
	<div class="label" style="--start: h0900">09:00</div>

danke auch dir für deine Hilfe. Dieses erleichtert mir so einiges. Die ganzen DIVS von Hand anlegen wäre doch ein wenig arbeit vor allem wenn ich dann etwas geändert haben möchte.

Bis bald!
Meowsalot (Bernd)

[Gunnar Bittersmann]

@@Regina Schaukrug

Statt "Handarbeit":

Oder clientseitig mit JavaScript. Dann kann man auch bei der grid-template-rows-Deklaration die Handarbeit sparen.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

☞ Mit Grid geht das recht einfach.

Abwandlung davon: ☞ Labels und Termine jeweils aufgelistet, d.h. Markup aufgräumt.

In Browsern, die display: contents unterstützen.

LLAP 🖖

[beatovich]

hallo

@@Gunnar Bittersmann

☞ Mit Grid geht das recht einfach.

Abwandlung davon: ☞ Labels und Termine jeweils aufgelistet, d.h. Markup aufgräumt.

In Browsern, die display: contents unterstützen.

Sehr schön. Habe mich schon gewundert, wie man den Trick umsetzt, die Grid-Grosskinder statt Gridkinder zu platzieren.

[Gunnar Bittersmann]

@@Gunnar Bittersmann

☞ Mit Grid geht das recht einfach. 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.

Eben noch ergänzt:

.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: dass es keine Variablen, sondern properties sind, die sich genauso verhalten – mit Kaskade und Vererbung und so.

Custom properties sind mehr als bloß CSS-Variablen – ich sollte mal einen Vortrag dazu machen.

Oh, wait! Das sollte ich wirklich; nicht hier im Forum abhängen.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

(Erwähnte ich schon, dass kaputte Syntax-Highlighter kaputt sind?)

Erwähnte ich schon, dass es schön wäre, schautest du dich nach besseren um?

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

(Erwähnte ich schon, dass kaputte Syntax-Highlighter kaputt sind?)

Erwähnte ich schon, dass es schön wäre, schautest du dich nach besseren um?

Prism von Lea Verou?

Kann clientseitg laufen, aber auch serverseitig.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Das ist ja das gute an CSS-Variablen custom properties: dass es keine Variablen, sondern properties sind, die sich genauso verhalten – mit Kaskade und Vererbung und so.

Custom properties sind mehr als bloß CSS-Variablen – ich sollte mal einen Vortrag dazu machen.

Hab ich. Und dieses Beispiel hab ich in dem Vortrag mit verwurstelt.

Video gibt’s zu sehen, Folien auch.

LLAP 🖖

[Meowsalot]

Hallo Gunnar,

Es stellt sich heraus, dass es einfacher ist, sich die Termine automatisch anordnen zu lassen: sich nicht überlappende Termine sind untereinander, es werden nur so viele Spalten beansprucht wie nötig.

wow, wow, wow und vielen vielen vielen DANK! Genau so habe ich es mir vorgestellt.

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.

Ich verstehe die Technik zwar nicht, aber sie funktioniert wunderbar. Warum hast du bei style zwei -- vor start und end geschrieben? Hat dieses eine spezielle Bedeutung?

Ich hab’s für halbe Stunden gemacht. Es sollte ein Leichtes sein, die Gridlinien für Viertelstunden hinzuzufügen.

Mit dieser Technik könnte ich es sogar die Minute herunterbrechen? Würde zwar sehr viel Code erzeugen, aber wäre möglich.

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

Bis bald!
Meowsalot (Bernd)

[Gunnar Bittersmann]

@@Meowsalot

HWarum hast du bei style zwei -- vor start und end geschrieben?

Weil das die Syntax von custom properties ist. [MDN, SELFHTML-Wiki]

Mit dieser Technik könnte ich es sogar die Minute herunterbrechen? Würde zwar sehr viel Code erzeugen, aber wäre möglich.

Dann würde ich mir eine andere Technik überlegen.

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; mit repeat(auto-fit, …) war mir das nicht geglückt.

LLAP 🖖

[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 🖖

[Meowsalot]

Hallo Gunnar,

ich hätte noch eine Frage zur mobilen Darstellung. Derzeit sieht es so aus

hast du vielleicht eine Idee, wie man es dort anzeigen lassen könnte? Übereinander legen ist nicht sinnvoll, dann sehe ich nicht alle Termine. Untereinander, dann werden die Zeilen extrem auseinander gerissen.

Hmm, ich habe irgendwie keine Idee, du vielleicht?

Bis bald!
Meowsalot (Bernd)

[Rolf B]

Hallo Meowsalot,

habe mal gespielt; in dem Fall könntest Du von 1fr als Höhe weg und statt dessen 1em oder 2em nehmen (oder was anderes, so wie es passt). Den Events gibst Du noch overflow:hidden dazu.

Oder du gibst dem Grid eine max-height.

Rolf

[marctrix]

Hej Meowsalot,

Hmm, ich habe irgendwie keine Idee, du vielleicht?

Listendarstellung. Ist vielleicht sogar das klügste, eine Aufzählung für Termine an einem Tag in eine Liste zu packen…

Marc

[Gunnar Bittersmann]

@@Meowsalot

Hmm, ich habe irgendwie keine Idee, du vielleicht?

Zunächst: „Uhr“ weg. Überall. Spart schon mal etwas Breite.

Und vermindert visuelles Rauschen. Das braucht kein Mensch; dass „12:00“ eine Uhrzeit ist, dürfte allen klar sein.

Und: „12:00 – 13:30“. Dawischen gehört ein Halbgeviertstrich (Bis-Strich, in HTML auch –), kein Bindestrich!

LLAP 🖖