Kalender mit Flexbox?

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


  • 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.

  • 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

  • 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