Kalender mit Flexbox?

Mia

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.

MrMurphy

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

Mia

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

HTML

<article>
	<div class="wochentage">
		<span>Mo</span>
		<span>Di</span>
		<span>Mi</span>
		<span>Do</span>
		<span>Fr</span>
		<span>Sa</span>
		<span>So</span>
	</div>
	<div class="kalendertage">
		<span>1</span>
		<span>2</span>
		<span>3</span>
		<span>4</span>
		<span>5</span>
		<span>6</span>
		<span>7</span>
		<span>8</span>
		<span>9</span>
		<span>10</span>
		<span>11</span>
		<span>12</span>
		<span>13</span>
		<span>14</span>
		<span>15</span>
		<span>16</span>
		<span>17</span>
		<span>18</span>
		<span>19</span>
		<span>20</span>
		<span>21</span>
		<span>22</span>
		<span>23</span>
		<span>24</span>
		<span>25</span>
		<span>26</span>
		<span>27</span>
		<span>28</span>
		<span>29</span>
		<span>30</span>
		<span>31</span>
	</div>
</article>

Alles anzeigen

MrMurphy

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

Mia

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.

MrMurphy

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

Mia

Also so?

HTML

<article>
	<h1>Februar 2017</h1>
	<p>Mo</p>
	<p>Di</p>
	<p>Mi</p>
	<p>Do</p>
	<p>Fr</p>
	<p>Sa</p>
	<p>So</p>




	<p></p>
	<p></p>
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>

	<p>6</p>
	<p>7</p>
	<p>8</p>
	<p>9</p>
	<p>10</p>
	<p>11</p>
	<p>12</p>

	<p>13</p>
	<p>14</p>
	<p>15</p>
	<p>16</p>
	<p>17</p>
	<p>18</p>
	<p>19</p>

	<p>20</p>
	<p>21</p>
	<p>22</p>
	<p>23</p>
	<p>24</p>
	<p>25</p>
	<p>26</p>

	<p>27</p>
	<p>28</p>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
	<p></p>
</article>

Alles anzeigen

MrMurphy

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

Mia

Ich habe mal bisschen CSS hinzugefügt: http://codepen.io/anon/pen/vyOqxb was sagst du dazu?

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

Mia

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.

MrMurphy

Hallo

Ich erstelle mal ein Beispiel nach meinen Vorstellungen. Das braucht aber ein paar Minuten.

Gruss

MrMurphy

Mia

Hallo,

das ist echt nett von dir. Ich habe mein Beispiel noch ein bisschen bearbeit: http://codepen.io/anon/pen/vyOqxb

Grüße
Mia

djheke

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.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flexboxkalender</title>
<style>




body {
 counter-reset: b; 
}




section {
 display:flex;
}




.kalender {
 margin:10px;
 width:33.334%;
 display:flex;
 flex-wrap:wrap;
 border-top:1px solid #000;
 border-right:1px solid #000;
}







.kalender h3 {
 margin:0;
 padding:5px;
 flex-basis:100%;
 border-left:1px solid #000;
 border-bottom:1px solid #000;
 background:#0c9;
}




.kalender b {
 flex-basis:14.28%;
 box-sizing:border-box; 
 padding:5px;
 text-align:right;
 border-left:1px solid #000;
 border-bottom:1px solid #000;




}




.kalender b:nth-child(1n+1) {
 background:#eee;
}
.kalender b:nth-child(1n+9) {
 font-weight:normal;
 background:#fff;
}
.kalender b:nth-child(7n+8) {
 color:red;
}




.kalender b:before {
 content:"";
 padding:5px;
}







/* Dynamik simulieren*/
.kalender:nth-of-type(1) b:nth-child(1n+14):before {
 counter-increment: b;                 
 content:counter(b); 
}
.kalender:nth-of-type(1) b:nth-child(1n+45):before {
 content:"";
}







.kalender:nth-of-type(2) b:nth-child(1n+10):before {
 counter-increment: b;                 
 content:counter(b); 
}
.kalender:nth-of-type(2) b:nth-child(1n+40):before {
 content:"";
}







.kalender:nth-of-type(3) b:nth-child(1n+12):before {
 counter-increment: b;                 
 content:counter(b); 
}
.kalender:nth-of-type(3) b:nth-child(1n+43):before {
 content:"";
}







.reset {
 counter-reset: b;
}
</style> 
</head>
<body>
<section>
<div class="kalender">
<h3>Oktober 2016</h3>
<b>Mo</b><b>Di</b><b>Mi</b><b>Do</b><b>Fr</b><b>Sa</b><b>So</b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
</div>




<div class="kalender reset">
<h3>November 2016</h3>
<b>Mo</b><b>Di</b><b>Mi</b><b>Do</b><b>Fr</b><b>Sa</b><b>So</b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
</div>




<div class="kalender reset">
<h3>Dezember 2016</h3>
<b>Mo</b><b>Di</b><b>Mi</b><b>Do</b><b>Fr</b><b>Sa</b><b>So</b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
<b></b><b></b><b></b><b></b><b></b><b></b><b></b>
</div>
</section>
</body>
</html>

Alles anzeigen

Mia

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?

djheke

Da fällt mir ein, dass es mit einem Float/Margin-Layout gehen könnte, die leeren Elemente zu umgehen. Werde es mal probieren.

MrMurphy

Hallo

Hier wie versprochen mein Beispiel, welches sich möglichst nah an deinen Bildern als Vorlage orientiert:

Kalender Beispiel

Gruss

MrMurphy

Mia

Wow MrMurphy vielen Dank für dein Beispiel, das sieht ja wirklich klasse aus. Ich schau mir gleich mal den Code etwas genauer an.

MrMurphy

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

Jetzt mitmachen!