Kalender mit Flexbox?

  • Guten Abend,


    vielleicht kennt sich jemand mit Flexbox aus. Ist es möglich so einen Kalender mit CSS Flexbox umzusetzten?


    [Blockierte Grafik: http://www.bilder-upload.eu/upload/e5f22a-1478625526.jpg]


    Zwei Felder sind hier nur zur Vorschau. Später können es 6 sein. Wichtig ist mir, dass ich irgendwie ein Tag Kennzeichen kann, wenn er z.B. nur ein paar Stunden belegt ist. Ich bin für jeden Tipp Dankbar.

  • Hallo


    Flexbox dient der Anordnung der einzelnen Elemente. Damit ist es für die Darstellung sehr gut geeignet.


    Die Hintergrundfarben haben nichts mit Flexbox zu tun. Die können aber mit CSS (linear-gradient) oder svg erzeugt werden.


    Gruss


    MrMurphy

  • Wenn Flexbox, dann würde das HTML so aussehen?


  • Hallo


    Das ist möglich. Ob das HTML sinnvoll ist hängt aber auch von dem gewünschten Verhalten bei den unterschiedlichen Fensterbreiten ab, Stichwort: Responisve Design mit Media Queries. Davon wissen wir ja nichts.


    Gruss


    MrMurphy

  • Ist nicht ganz so wichtig, da diese Seite nur Intern auf meinem PC aufgerufen wird. Sollte aber nicht weiter schwer sein, wenn der Platz für drei zu klein wird, brechen die einfach um bis nur noch einer in eine Reihe passt.

  • Hallo


    Wenn die Bilder im Eröffnungsbeitrag das endgültige Layout darstellen würde ich für jeden Monat nur einen Container wählen, den Monat als Überschrift und den Rest als p-Element. Die Gestaltung dann per CSS.


    Gruss


    MrMurphy

  • Also so?


  • Hallo


    Im Prinzip ja. Die h1 will aber je noch Seitenaufbau eher eine h3 oder h4 sein. Außerdem sollten die leeren p-Elemente entfallen. Außerdem sollte jedes article-Element eine Klasse (class) bekommen.


    Leere HTML-Elemente sollten so weit möglich vermieden werden.


    Da die Größe der einzelnen Monate (article-Elemente) feststeht kann ja alles per CSS gestaltet werden.


    Gruss


    MrMurphy

  • Hallo


    Es kommt darauf an ob es dir gefällt. Ich weiß ja überhaupt nicht in welchem Zusammenhang der Kalender angezeigt wird und wofür er wichtig ist.


    Wenn du mit der Darstellung zufrieden bist ist alles ok.


    Gruss


    MrMurphy

  • Naja schön sieht er nicht aus, kein Vergleich zu meinem Bild. Muss ich mal schauen wie ich das mit CSS noch irgendwie hin bekomme.

  • Auch wenn es mit Flexbox geht, würde ich für einen Kalender eine normale Tabelle(table) nehmen. Und wenn der Kalender dynamisch erzeugt wird, sind leere Elemente nicht zu vermeiden.
    So, nun gebe ich auch noch einen dazu.

  • Hallo, wow vielen Dank für dein Beispiel. Dein Kalender sieht wirklich top aus. Und du hast recht, wenn ich diesen dynamisch erzeugen will, dann kann ich es gar nicht umgehen, leere Elemente zu haben. Ich finde auch gar nicht schlimm, wenn hier ein paar leere <b> vorhanden sind?

  • Hallo


    Ich habe mein Beispiel mal etwas überarbeitet. Im Endeffekt soll das CSS besser nachvollziehbar und damit (auch spätere) Anpassungen leichter sein.


    Die Wochentage habe ich in h4 Elemente gepackt. So sind sie und die Datums über :nth-of-type besser nachvollziehbar anzusprechen. Das ist meiner Ansicht nach auch sachlich korrekt, da die Wochentage jeweils eine Art Unterüberschrift darstellen.


    In das CSS habe ich ein paar erklärende Kommentare eingebaut.


    Zitat

    Wichtig ist mir, dass ich irgendwie ein Tag Kennzeichen kann, wenn er z.B. nur ein paar Stunden belegt ist.


    Gleichzeitig habe ich dafür (im März) vier Möglichkeiten eingebaut. Welche du davon verwenden willst oder mit welcher du am Besten zurecht kommst kannst du dann selbst auswählen.


    Gruss


    MrMurphy