Moin.

Ich helfe einem Verein, der einen Veranstaltungs-Kalender auf seiner Website präsentieren möchte.

1. Montag bis Sonntag
2. Die Veranstaltungen finden wiederkehrend jede Woche statt.
   Kalendertage stehen daher nicht in der Tabelle.
3. Es gibt 6 verschiedene Räume in denen Veranstaltungen stattfinden.
   Es können also gleichzeitig verschiedene Veranstaltungen stattfinden.

Idee für breiten Viewport:

Eine Darstellung, die 7 vertikale Bereiche nebeneinander anzeigt.
Überschrift für jeden der Bereich wäre der Wochentag.
Darunter eine chronologische Abfolge aller Veranstaltungen an diesem Tag.
Ein in Frage kommendes Element könnte DL sein.

Idee für schmalen Viewport:

Eine horizontale Navi aus "Mo, Di, Mi, Do, Fr, Sa, So".
Per Default wäre "Mo" ausgewählt.
Darunter wird die DL zu Montag gezeigt. In voller Breite des Viewports.
Die horizontale Navi ist fixiert.

Ein Beispiel per Codepen kann ich zu einem späteren Zeitpunkt noch erstellen.


Was denkt ihr zu den beiden Ideen?
Wie würdet ihr das Ganze, vor allem auf dem schmalen Viewport, darstellen?

__________________

hi, developer sind oft nicht die besten designer.
Ich würde mich hier einfach an bereits bestehenden Kalender orientieren: Auch an Apps, die am Handy verwendet werden. Und da etwas finden, was für die Benutzer der Website dann auch funktioniert.
Eventuell es gibt bereits einen fertigen Kalender, der für die Seite auch ausreicht in Form von einem Plugin.

@cloned
Das sehe ich genau wie Du: Idealerweise findet man eine etablierte Lösung von professionellen Designern/UX-Spezialisten und lässt sich davon inspirieren.
Bisher habe ich noch kein Interface für wiederkehrende Termine wie oben skizziert gefunden. Gibt es ganz sicher. Ich werde später weiter suchen.

__________________

für welche sprache brauchst du denn einen? geben tut es die ja wie sand am meer, nur ob sie auch den Anforderungen gerecht werden ist dann eine ganz andere Sache.
Angular? React? Php? ...?

https://fullcalendar.io/demos der hier kann zb so gut wie alles und ist der standard zur zeit.
Hier kannst du zumindest anschauen wie sie das mit responsive view gelöst haben.
Ich denke nicht, dass du dir ein plugin mittels npm auf deiner Seite installieren kannst/willst, wenn ich mich richtig erinnere möchtest du lieber eigene JS files haben die du einbindest?

@cloned
Du verstehst mein Anliegen noch miss.
Schau bitte in das Ursprungsposting, zum Beispiel Punkt 2.


Ich benötige keinen normalen Kalender mit Tagen des Jahres.
Ich benötige auch kein Plugin.
Es geht allein um statische Inhalte. Um wiederkehrende Termine je Woche.

__________________

Mir ist noch nicht klar welche Informationen in den Kalender aufgenommen werden sollen.

Ich verstehe das zur Zeit so:

- Tage von Montag bis einschließlich Sonntag

- pro Tag 6 Räume, in denen gleichzeitig unterschiedliche(?) Veranstaltungen stattfinden können, aber nicht müssen

Gehen die Veranstaltungen jeweils über den ganzen Tag oder muss auch noch in Zeiträume unterschieden werden?

Falls ja, gibt es unabhängig vom jeweiligen Raum unterschiedliche Zeiträume?

Welche Informationen zu den jeweiligen Veranstaltungen sollen angezeigt werden? Nur der Veranstaltungsname? Der Veranstalter / Vortragende? Weitere Infos zu den Veranstaltungen? Zusätzlich Bilder?

Zum Vorgehen zum Erstellen der Seite:

Ich würde ganz klassisch vorgehen. Zunächst korrekt das HTML nach den HTML5-Regeln erstellen. Dabei die Elemente verwenden, die für die jeweiligen Informationen gedacht sind. Dabei spielt das Layout überhaupt noch keine Rolle.

Damit ist gleichzeitig die grundsätzliche Zugänglichkeit (Barrierearmut, Barrierefreiheit) bereits gegeben.

Auf der Grundlage kann ich dann mit CSS3 ein für unterschiedliche Bildschirmbreiten passendes Layout erstellen. Dabei hat sich das Vorgehen nach "Mobile first" (= schmale Fensterbreiten zuerst, mit mobil hat das eigentlich überhaupt nichts zu tun) bewährt.

Genau.

Sie gehen über verschiedene Zeitspannen. Von einer Stunde bis mehrere Stunden.
In jedem Raum verschieden.


Hier ein Beispiel der linearen Abfolge der Informationen:


MONTAG

08:30–09:30
Yoga
von Julia
(Raum 1)

09:00–12:00
Sprachunterricht Mongolisch
von Guntram
(Raum 2)

11:00–12:30
Taiji
von Michelle
(Raum 1)

11:00–12:00
Kontaktimprovisation
von Elisa
(Raum 3)

15:00–16:30
Shiatsu
von Bernd
(Raum 4)

15:00–16:00
Yoga
von Julia
(Raum 1)

...


DIENSTAG
...



Weiterführende Infos zu einer Veranstaltung, wie ein kurzer Text und ein Bild sollen per seiteninternem Link erreichbar sein.

Eigentlich ruft das nach einer Datenbank, oder?

#veranstaltungs-id
wochentag
startzeit
endzeit
veranstaltungsname
veranstaltername
raum
veranstaltungsbeschreibung
bild

Weitere denkbare Felder könnten sein:

datum-erstes-stattfinden
datum-letztes-stattfinden
veranstalter-mail
veranstalter-telefonnummer






Was siehst Du bei dieser Aufgabe als passendes HTML an?

Am Rande zu einem Detail: Sehe ich es richtig, dass man das Element "time" zwar zur Angabe einer einzelnen Uhrzeit (ohne Datum) verwenden kann, nicht jedoch zur Angabe einer Zeitspanne?
Ganz klar wird mir das aus den Specs nicht.

__________________