Schmidt: Wochenkalender mit HTML+CSS

SELF-Forum

Wochenkalender mit HTML+CSS

Schmidt
– Informationen zu den Bewertungsregeln

Hallo ihr Lieben,

ich möchte einen Wochenkalender in HTML+CSS realisieren. Der Inhalt wird dynamisch mit PHP erzeugt.

ZIEL:
Im Prinzip sollte der Kalender ähnlich dem Sunbird-Wochenkalender aussehen. Sprich: Die Spalten entsprechen den Wochentagen und die Zeilen entsprechen den Tagesstunden. Termine werden als Blöcke angezeigt. Position und Höhe der Blöcke entsprechen dem Startzeitpunkt und der Dauer des Termins.

Zur Veranschaulichung hier ein Bild des Sunbird-Wochenkalenders:
Sunbird-Wochenkalender

REALISIERUNG:
Nun habe ich fast alles soweit umsetzen können. (Siehe Quelltext)
Jedoch

  1. Wie kann ich die Spaltenbreiten und Zeilenhöhen erzwingen?

  2. Welche Maßeinheit zur Festlegung der Zeilenhöhe empfiehlt ihr? em,px,%,...? Ich möchte ja, dass der Kalender möglichst von jedem Gerät gut dargestellt wird.

  3. Habe ich irgendwelche grundlegenden Ansätze falsch gewählt?

  4. Habt ihr Verbesserungsvorschläge

Schönen Gruß
Schmidt

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
	<head>  
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">  
		<title>Kalender</title>  
		<style type="text/css">  
		<!--  
			tr {  
				height: 3em;  
				padding: 0px;       /*Innenabstand*/  
				margin: 0px;        /*Außenabstand*/  
				}  
			td {  
				height:3em;  
		                width: 15em;/*???*/  
				padding:0px;         /*Innenabstand*/  
				margin:0px;          /*Außenabstand*/  
				border:1px solid black;  
				}  
				  
			table {  
				background-color: #E0E0E0;  
				border-collapse: collapse;  
				empty-cells: show;  
				  
				}  
				  
			#zelle {  
				height: 3em;  
		                width: 15em;/*???*/  
				padding:0px;         /*Innenabstand*/  
				margin:0px;          /*Außenabstand*/  
				}  
				  
			#termin {  
				width: 50%;  
				position: relative;  
				top: 2.25em;  
				height: 4.5em;  
				background-color: red;  
				overflow: hidden;  
				padding:3px;         /*Innenabstand*/  
				margin:0px;          /*Außenabstand*/  
				-moz-border-radius: 3px;  
				-webkit-border-radius: 3px;  
				-ms-border-radius: 3px;  
				-o-border-radius: 3px;  
				-khtml-border-radius: 3px;  
				border-radius: 3px;  
				}  
			#termin:focus { /*Für Elemente, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulator-Taste (CSS 2.0)*/  
				overflow:visible;  
				height: auto;  
				}  
			#termin:hover { /* für Elemente, während der Anwender mit der Maus darüber fährt (CSS 2.0)*/  
				overflow:visible;  
				height: auto;  
				}  
			#termin:active { /*für gerade angeklickte Elemente*/  
				overflow:visible;  
				height: auto;  
				}  
		-->  
		</style>  
	</head>  
	<body>  
		<table>  
			<tr>  
				<td></td>  
				<td>Mo</td>  
				<td>Di</td>  
				<td>Mi</td>  
				<td>Do</td>  
				<td>Fr</td>  
				<td>Sa</td>  
				<td>So</td>  
			</tr>  
			<tr>  
				<td>7:00</td>  
				<td><div id="zelle"><div id="termin">7:45 - 9:15<br>Die heiße Zypernsonne quälte Max und Victoria ja böse auf dem Weg bis zur Küste. Xaver schreibt für Wikipedia zum Spaß quälend lang über Yoga, Soja und Öko.</div></div></td>  
				<td><div id="zelle"></div></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
			</tr>  
			<tr>  
				<td>8:00</td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
			</tr>  
			<tr>  
				<td>9:00</td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
			</tr>  
			<tr>  
				<td>10:00</td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
				<td></td>  
			</tr>  
			<!-- ... -->  
		</table>  
	</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Wochenkalender mit HTML+CSS

    bleicher
    – Informationen zu den Bewertungsregeln

    Spätestens bei parallel ablaufenden Ereignissen wird es schlimm - ich habe das Problem mal für selbstgebastelte KalenderApp gelöst aber es war umständlich und unangenehm - kannst die hier holen:
    http://widgets.opera.com/widget/17121/
    einfach entpacken (wgt ist eine umbenantne ZIP-Datei) und such nach CSS-Dateien und JS, ich glaueb es ist sogar kommentiert.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Wochenkalender mit HTML+CSS

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    @@Schmidt:

    nuqneH

      <style type="text/css">  
  <!--

    BTW, die HTML-Auskommentierung von CSS-Code (und JavaScript-Code) ist völlig überflüssig; u.U. auch völlig falsch.

      		padding: 0px;       /\*Innenabstand\*/  
  		margin: 0px;        /\*Außenabstand\*/

    Dass padding Innenabstand ist und margin Außenabstand, sollte man sich merken. Und wenn dich, dann an anderer Stelle aufschreiben, nicht als Kommentar im Stylesheet.

    Die Funktion der Pseudoklassen :focus, :hover und :active auch.

      <table>  
  	<tr>  
  		<td></td>  
  		<td>Mo</td>  
  		<td>Di</td>  
  		<td>Mi</td>  
  		<td>Do</td>  
  		<td>Fr</td>  
  		<td>Sa</td>  
  		<td>So</td>  
  	</tr>

    Das wäre gern der http://de.selfhtml.org/html/tabellen/aufbau.htm#kopf_koerper_fuss@title=thead; die restlichen Tabellenzeile der tbody.

      		<td><div id="zelle"><div id="termin">7:45 - 9:15<br>Die heiße Zypernsonne quälte Max und Victoria ja böse auf dem Weg bis zur Küste. Xaver schreibt für Wikipedia zum Spaß quälend lang über Yoga, Soja und Öko.</div></div></td>  
  		<td><div id="zelle"></div></td>

    Nei-en! IDs müssen dokumentweit eindeutig sein, d.h. du darfst dieselbe ID nicht mehrfach vergeben.

    Du möchtest Klassen verwenden?

    Schau dir mal diese Tabelle an!

    Bei dir wird’s allerdings schwieriger:

    1. Wie kann ich die Spaltenbreiten und Zeilenhöhen erzwingen?

    Spaltenbreiten: table-layout: fixed; Zeilenhöhen: nicht (die Höhe wird erweitert, wenn der Inhalt es erfordert).

    Termine können nicht nur zu vollen Stunden beginnen. Außerdem möchtest du bei gleichzeitig stattfindenden Terminen diese nur halb (ein Drittel, …) so breit darstellen. Das macht die Realisierung mit HTML-Tabelle sehr schwer.

    Vermutlich ist es besser, das Grid zu erstellen (Grafik oder Tabelle) und die Termine absolut positioniert darauf zu setzen.

    Qapla'

    --
    „Perfektion ist nicht dann erreicht, wenn es nichts mehr hinzuzufügen gibt, sondern wenn man nichts mehr weglassen kann.“ (Antoine de Saint-Exupéry)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln