Event-Kalender

Verfasst von Alice am 05.09.2009 - wurde schon 33193 mal gelesen

Kategorie: PHP/MySQL

Bewertung:

15x bewertet

Schwierigkeit: mittel
Kommentare: [ 22 ]

Tag - Schlagwort Ajax PHP Kalender Date Script

Event-Kalender - Tutorial

Im Wishbook wurde der Wunsch nach einem Event-Kalender Script, welches mit Ajax arbeitet, geaeussert,
nun denn here we go ...

Was wird benoetigt?

- PHP / MySql Grundkenntnisse
- 1 MySql Datenbank
- Webspace der PHP unterstuetzt

Wie schauts aus?

- Kalender Darstellung

Administrations-Ansicht
- Uebersicht
- Event Eintragen
- Event Bearbeiten

Step 1 - Datenbank

Als erstes erstellen wir uns eine neue Tabelle, in die wir spaeter die Events eintraegen, in der Datenbank(mit PHPMyAdmin)

CREATE TABLE IF NOT EXISTS `grafixx_events` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `date` date NOT NULL,
  `event` text  NOT NULL,
  PRIMARY KEY (`id`)
);

Step 2 - DatenbankVerbindung | config.inc.php

Config.inc.php heisst unsere Datei mit der wir eine Verbindung zur Datenbank herstellen, ohne die geht gar nichts!
Die config.inc.php wird spaeter ueberall eingebunden, wo eine Verbindung zur DB benoetigt wird.

<?php // config.inc.php

//---------------------------
$host = "localhost";   // Adresse des Datenbankservers, fast immer localhost
$user = "";            // Dein MySQL Benutzername
$pass = "";            // Dein MySQL Passwort
$dbase = "";           // Name der Datenbank
//---------------------------

$connection = mysql_connect($host, $user, $pass) OR DIE ("Keine Verbindung zu der Datenbank moeglich.");
$db = mysql_select_db($dbase, $connection) OR DIE ("Auswahl der Datenbank nicht moeglich."); 

?>

Hier bitte nicht vergessen den MySQL Benutzernamen, das dazugehoerige Passwort und den Namen eurer Datenbank einzutragen!

Step 3 - events.php

Die Datei events.php ist fuer das Erstellen, Bearbeiten und Loeschen der Events zustaendig.
Hier muss bei $grafixx_name und $grafixx_pass der gewuenschte Username und das dazugehoerige Passwort angegeben werden, damit nicht jeder wahrlos Events eintragen kann!

<?php // events.php

session_start(); // startet die Session 

include('config.inc.php'); // Config.inc.php einbinden

$pfad = $_SERVER['SCRIPT_NAME'];				// aktueller Pfad zur Datei

//---------------------- Logindaten --------------------------------- //

$grafixx_name = "USERNAME";					// Loginname angeben
$grafixx_pass = "PASSWORT";					// Loginpasswort angeben

//------------------------------------------------------------------ //

// Funktion um die DB-Eintraege zu pruefen => SQL Injektions
function clean_it($dirty){ 
    
     // Auswirkungen von magic_quotes_gpc zuruecksetzen, wenn ON
    if (get_magic_quotes_gpc()) {
        $clean = mysql_real_escape_string(stripslashes(htmlspecialchars($dirty)));
    }else{
        $clean = mysql_real_escape_string(htmlspecialchars($dirty));
    }

    return $clean;
}

ob_start();	// startet den Ausgabepuffer

?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
	<title>Grafixx LayoutManager</title>
	
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta http-equiv="Content-Language" content="de" />

	<link rel="stylesheet" href="style.css" type="text/css" />
	
</head>
<body>

<div id="ram">
	
	<div id="header">
			<h1>Grafixx EventKalender</h1>
	</div>
	
		
	<div id="content">
<?php

if(!isset($_SESSION['login'])) { // wenn keine Session vorhanden

    if(isset($_POST['submit_login'])) { // wenn supbit gedrueckt

        $login_name = strip_tags($_POST['log_user']); // Variable definieren
        $login_pass = strip_tags($_POST['log_pass']); // Variable definieren

        if(empty($login_name) OR empty($login_pass)) { // Pruefen ob Username angegeben wurde
            $message .= 'Bitte geben Sie ihren Usernamen und das Passwort ein ... <br />'; $error = "1";
         }     
     
         if($login_name != $grafixx_name OR $login_pass != $grafixx_pass){  // Angaben auf Korrektheit pruefen
            $message .= 'Zugriff verweigert ... <br />'; $error = "1";
         }
    
        if($error != "1"){ // Wenn kein Fehler war
        
            // session handle-----------------------------
            $_SESSION['login'] = $_SERVER['REMOTE_ADDR']; // Session setzen

            header("Location: $pfad"); // Weiterleiten
        }
    
        if($error == "1"){  // Fehlermeldung ausgeben wenn vorhanden
            echo "<div class=\"error\"><h2>Error ...</h2>\n <p>$message</p></div>\n";
        }

    }
?>

<form action="" method="post">
	<fieldset>
	<legend><span class="color">Grafixx</span> Login</legend>
		<label>Name</label>
		<input type="text" name="log_user" /><br /> 

		<label>Passwort</label>
		<input type="password" name="log_pass" />
		<br /><br />

		<input type="submit" value="Login" name="submit_login" class="button"/>
	</fieldset>
</form>


<?php    
} // close isset Session login
// ----------------------------------------------- Ende Login ------------------------------------- //

if(isset($_SESSION['login'])){              // Sofern Session vorhanden ... 

$action = clean_it($_GET['action']); 		// Variable definieren

// ----------------------------------------------------------------------
// LOGOUT
// ----------------------------------------------------------------------
if($action == 'logout'){ 
	session_unset();			// Sessionvariable loeschen	
	session_destroy();			// Session zerstoeren

	header("Location: $pfad");	// Weiterleitung => Login
}

// ----------------------------------------------------------------------
// Event Eintragen/Editieren
// ----------------------------------------------------------------------
if($action == 'new' OR $action == 'edit'){

	$id = clean_it($_GET['id']);		// Variable definieren

	if(isset($_GET['id'])){ // Sofern ID uebergeben wurde
		// DB Abfragen
		$abfrage = mysql_query("SELECT event, DATE_FORMAT(date, '%d') AS tag,  
												  DATE_FORMAT(date, '%m') AS monat,  
												  DATE_FORMAT(date, '%Y') AS jahr
								FROM grafixx_events WHERE id = '$id'");
		$row = mysql_fetch_array($abfrage);
		extract($row);
	}

	if (isset($_POST['submit'])) {
	
		$tag = clean_it($_POST['tag']); 
		$monat = clean_it($_POST['monat']); 
		$jahr = clean_it($_POST['jahr']); 
	
		$event = clean_it($_POST['event']);

		if(empty($tag) || empty($monat) || empty($jahr) ||  empty($event)){ // Pruefen ob alles angegeben
			echo "<div class=\"error\"><h2>Error...</h2><p>Bitte danke alles Felder ausfuellen!</p></div>\n";
	
		}else{ // Sofern alles angegeben wurde
			
			// Zeichen zaehlen => Datum
			if(strlen($tag) != 2 OR strlen($monat) != 2 OR strlen($jahr) != 4){
				echo "<div class=\"error\"><h2>Error...</h2><p>Bitte danke das Datum im richtigen Format angeben!</p></div>\n";
			}else{
			
				$datum = $jahr."-".$monat."-".$tag; // Datum zusammenwuefeln
				
				if(($_GET['action']) == 'edit'){ // Wenn action == edit
					$eintragen = mysql_query("UPDATE grafixx_events SET event = '$event', date = '$datum' WHERE id ='$id' ");
		
				}else{ // Neuer Eintrag
					$eintragen = mysql_query("INSERT INTO grafixx_events (event, date) VALUES ('$event','$datum')");
				}
								
				if($eintragen){ // Sofern Eintrag geklappt hat
			
					header("Location: $pfad");	// Weiterleitung
				
				}else{ // Wenn Eintrag nicht geklappt hat => Fehlermeldung
					echo "<div class=\"error\"><h2>Error ...</h2>\n";
					echo "<p>Der Eintrag war leider nicht erfolgreich! ".mysql_error()."</p>\n</div>\n";
				}

			} // close Datum korrekt
		} // close alles angegeben
	
	}// close submit

?>

<form name="form" action="" method="post" enctype="multipart/form-data">
<fieldset>

<legend><?php if($action=='new'){ echo "Event eintragen"; }else{ echo "Event bearbeiten"; } ?></legend>

<label>Datum <small>(TT MM JJJJ)</small></label>
Tag <input type="text" name="tag" class="small" value="<?php echo $tag; ?>" />
Monat <input type="text" name="monat" class="small" value="<?php echo $monat; ?>" />
Jahr <input type="text" name="jahr" class="small" value="<?php echo $jahr; ?>" />
<br /><br />

<label>Event</label>
<textarea name="event" rows="5" cols="75"><?php echo $event; ?></textarea>
<br /><br />

<input type="submit" name="submit" value="Event eintragen" class="button" /> 

</fieldset>
</form>
<?php
} // close action=new/edit

// ----------------------------------------------------------------------
// Event Loeschen
// ----------------------------------------------------------------------
if($action == 'loeschen'){

	$id = clean_it($_GET['id']);		// Variable definieren
	$mode = clean_it($_GET['mode']);	// Variable definieren
	
  if(!isset($_GET['mode'])){ // Zur Sicherheit lieber noch mal nachfragen
  
  	echo "<div class=\"error\"><h2>Wirklich ...</h2>\n";
  	echo "<p>Bist du sicher dass du den Event loeschen moechtest?</p> \n";
	echo "<p><a href=\"".$pfad."?action=loeschen&amp;mode=del&id=$id\" class=\"button\">&nbsp;&nbsp;Ja&nbsp;&nbsp;</a>";
	echo "&nbsp;&nbsp;<a href=\"".$pfad."\" class=\"button\">&nbsp;&nbsp;Nein&nbsp;&nbsp;</a></p>\n </div>";

  }else{	  
  
		// Event loeschen
		$delete = mysql_query("DELETE FROM events WHERE id='$id'");
		
		if($delete){ // Wenn Loeschung nicht erfolgt
		
			header("Location: $pfad");	// Weiterleitung 
			
		}else{ // Wenn Eintrag nicht geloescht wurde => Fehlermeldung
				echo "<div class=\"error\"><h2>Error ...</h2>\n";
				echo "<p>Der Eintrag konnte leider nicht geloescht werden! ".mysql_error()."</p>\n</div>\n";
		}
		
  } // close mode
  
} // close action = loeschen

// ----------------------------------------------------------------------
// Event auflisten
// ----------------------------------------------------------------------
if(!isset($_GET['action'])){ // Sofern keine Aktion => Events Anzeigen

	echo "<h2>Events</h2>\n";

	// DB-Abfrage => Events 
	$abfrage = mysql_query("SELECT id, event, DATE_FORMAT(date, '%d.%m.%Y') AS datum FROM grafixx_events ORDER BY id DESC");
	$total = mysql_num_rows($abfrage); // Anzahl Events
	
	// Events ausgeben
	echo "<ul class=\"list\">\n";
		
	if($total > 1){ // Pruefen ob events vorhanden sind
		while($row = mysql_fetch_object($abfrage)){ 
			echo "<li><div class=\"right\">\n
					<a href=\"".$pfad."?action=edit&amp;id=".$row->id."\">Bearbeiten</a>\n  
					<a href=\"".$pfad."?action=loeschen&amp;id=".$row->id."\">[x]</a>\n</div>\n";
			echo "<strong>".$row->id.".</strong> ".$row->event."<br />\n <small>".$row->datum."</small></li>\n";
		}
	}else{ // Keine Events vorhanden
		echo "<li>Derzeit sind keine Events vorhanden ...</li>";
	}// close events vorhanden
	
	echo "</ul>\n";
} // close events anzeigen	
?>
	</div>

<div id="sidebar">
<h2>Welcome <?php echo $grafixx_name; ?>
<small><a href="?action=logout">Logout</a></small></h2>

<p><a href="events.php" class="the_button">Events</a>
<a href="events.php?action=new" class="the_button">Event eintragen</a></p>

</div>


<?php 

} // close login

ob_end_flush(); // leert/beendet den Ausgabepuffer

?>	

	<div id="footer">
		<p class="right">  Valid <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText 

Markup Language">
		XHTML</abbr></a> | Valid <a href="http://jigsaw.w3.org/css-validator/check/referer" title="CSS ist valide!"><abbr title="Cascading Style 

Sheets">CSS</abbr></a>&nbsp;&nbsp;
		</p>
				
		<p><a href="http://unnecessary.de">Grafixx EventKalender</a>  <a href="http://alice-grafixx.de">Alice-Grafixx.de</a></p>
	</div>	
</div>
	
</body>
</html>

Step 4 - kalender.php

Die Datei kalender.php enthaelt 3 Funktionen:
- naechsterMonat() blaettert im Kalender einen Monat vor
- vorherigerMonat blaettert im Kalender einen Monat zurueck
- show_calender() gibt den Kalender aus

<?php // kalender.php

 include('config.inc.php'); 	// DB-Verbindung einbinden

function naechsterMonat(){ // Naechster Monat bestimmen
    $calendar       = explode(',',$_GET['go']);
    $cali['monat']   = $calendar['0'];
    $cali['jahr']    = $calendar['1'];
 
    if ($cali['monat'] == '12') {
        $nextCal    = '1,' . ($cali['jahr'] + 1);
    }
    else {
        $nextCal    = ($cali['monat'] + 1) . ',' . $cali['jahr'];
    }
 
    return $nextCal;
}
 
function vorherigerMonat(){ // Monat davor bestimmen
    $calendar       = explode(',',$_GET['go']);
    $cali['monat']   = $calendar['0'];
    $cali['jahr']    = $calendar['1'];
 
    if ($cali['monat'] == '1') {
        $lastCal    = '12,' . ($cali['jahr'] - 1);
    }
    else {
        $lastCal    = ($cali['monat'] - 1) . ',' . $cali['jahr'];
    }
    return $lastCal;
}

function show_calender(){

	if (isset($_GET['go'])) {
	    $calendar       = explode(',', $_GET['go']);
	    $monat          = $calendar['0'];
	    $jahr           = $calendar['1'];
	    
	    if ($_GET['go'] == date('n') . ',' . date('Y')) {
	        $heute      = date('d');
	    }
	}else{
	    $monat          = date('n');				// ermitteln des Jahres
	    $jahr           = date('Y');				// ermitteln des Monats
	    $heute          = date('d');				// ermitteln des aktuellen Tages
	    $_GET['go']   	= $monat . ',' . $jahr;		
	}
	
	$first = date("w", mktime(0, 0, 0, $monat, 1, $jahr));   // ermitteln des Wochentages fr den ersten Tages des Monats
	$last = date("t", mktime(0 ,0 , 0, $monat, 1, $jahr));     // ermitteln des letzten Tages des Monats
	
	//Monate und Wochentage
	$monate = Array("", "Januar", "Februar", "M&auml;rz","April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
	$wochentage = Array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa", "So");
	
	if($first == 0){ 
		$first = 7;                // Korrektur fr den Sonntag
	}
	
	echo "<table border=\"0\">\n";
	// Monat zurueck blaettern
	echo "<caption><a href=\"javascript:get_Content('kalender','?go=".vorherigerMonat()."');\" class=\"back\">&laquo;</a>\n ";
	
	// aktuelles Jahr und Monat ausgeben
	echo $monate[$monat]." ".$jahr;
	
	// Monat vor blaettern
	echo " <a href=\"javascript:get_Content('kalender','?go=".naechsterMonat()."');\" class=\"vor\">&raquo;</a>\n";
	echo "</caption>\n";
	
	// Wochen Tage ausgeben
	echo "<tr>\n"; 
		echo "<th abbr=\"Montag\" title=\"Montag\">Mo</th>\n"; 
		echo "<th abbr=\"Dienstag\" title=\"Dienstag\">Di</th>\n"; 
		echo "<th abbr=\"Mittwoch\" title=\"Mittwoch\">Mi</th>\n"; 
		echo "<th abbr=\"Donnerstag\" title=\"Donnerstag\">Do</th>\n"; 
		echo "<th abbr=\"Freitag\" title=\"Freitag\">Fr</th>\n"; 
		echo "<th abbr=\"Samstag\" title=\"Samstag\">Sa</th>\n"; 
		echo "<th abbr=\"Sonntag\" title=\"Sonntag\">So</th>\n"; 
	echo "</tr>\n<tr>\n"; 

	// Leere Zellen ausgeben, bis zum ersten Tag des Monats
	for ($j=1; $j < $first; $j++){ 
		echo "<td>\n "; 
	}
	
	if(strlen($monat) == 1){ // Null vorran stellen fuer Monat 1-9
		$sql_m = "0".$monat;
	}else{
		$sql_m = $monat;
	}
	
	// DB-Abfrage => Events des aktuellen Monats
	$abfrage = mysql_query("SELECT id, event, DATE_FORMAT(date, '%d.%m.%Y') AS datum FROM grafixx_events WHERE date BETWEEN '".$jahr."-".$sql_m."-1' AND '".$jahr."-".$sql_m."-31'");
	$total = mysql_num_rows($abfrage); // Anzahl Events
	
	if($total >= 1){ // Pruefen ob events vorhanden sind
		while($row = mysql_fetch_object($abfrage)){ 
			$events["$row->datum"] = "$row->event"; // Array mit Eventdaten fuettern
		}
		
	}// close events vorhanden
	
	for ($i=1; $i <= $last; $i++){ // Tage ausgeben
		
		$x = $wochentage[date("w", mktime(0 , 0, 0, $monat, $i, $jahr))];    // ermitteln des Wochentages
		
		if($total >= 1){ // Pruefen ob Events vorhanden sind
	
			if(strlen($i) == 1){ // Null vorran stellen fuer TAG 1-9
				$sql_i = "0".$i;
			}else{
				$sql_i = $i;
			}
	
			$event_date = $sql_i.".".$sql_m.".".$jahr; 		// aktuelles Datum in Schleife bestimmen 
		
			if(array_key_exists($event_date, $events)){ // Pruefen ob event bei $i vorhanden
				
				$show_event = "<a href=\"#\" class=\"tool\">".$i."<span>".$events["$event_date"]."</span></a>\n";
					
				if ($i == $heute){ // Aktueller Tag kennzeichnen
					echo "<td class=\"today\">".$show_event."</td>\n";
				}else{
					echo "<td>".$show_event."</td>\n";
				}	
			}else{
				if ($i == $heute){ // Aktueller Tag kennzeichnen
					echo "<td class=\"today\">".$i."</td>\n";
				}else{
					echo "<td>".$i."</td>\n";
				}		
			}// close event vorhanden
	
		}else{ // Wenn keine Events sind
				if ($i == $heute){ // Aktueller Tag kennzeichnen
					echo "<td class=\"today\">".$i."</td>\n";
				}else{
					echo "<td>".$i."</td>\n";
				}	
		} // close check events
			
	 	if($x == "So"){ // Am Sonntag endet die jeweilige Zeile
			echo "</tr>\n<tr>\n ";  
	  	}
	} //close Tage ausgeben
	
	echo "</tr>\n";
	echo "</table>\n";
	
} // close function show_calender
?>

Step 5 - request.php

Die Datei request.php ist die Datei, welche ueber den Ajax-Request aufgerufen wird, wenn im Kalender einen Monat vor bzw. zurueck geblaettert werden soll.

<?php // request.php

 include('kalender.php'); 		// Funktion einbinden

 show_calender(); // Kalender ausgeben
 
?>

Wir haben also nun folgende Dateien

- config.inc.php Stellt die Verbindung zur Datenbank her
- events.php ist fuer Eintraegen, Loeschen und Bearbeiten der Events zustaendig
- kalender.php enthaelt mehrere Fuktionen die fuer die Darstellung des Kalenders zustaendig sind
- request.php wird jedesmal beim Ajax-Request aufgerufen, um den Kalender ohne erneutes Laden der kompletten Seite darzustellen

Den Kalender in die eigene Seite einbinden

Um den Kalender nun in die eigene Website einbinden zu koennen, muss in der Datei(es MUSS sich um eine PHP-Datei handeln), folgendes Javascript in den Head-Bereich der Seite, also irgendwo zwischen <head> und </head>, gesteckt werden:

Und an der Stelle wo der Kalender ausgegeben werden soll, folgender Code positioniert werden:

<?php 
 include('kalender.php');
 show_calender(); // Kalender ausgeben 
?>

Wichtig!

Hierbei bitte darauf achten, dass die Dateien kalender.php, request.php sowie die config.inc.php sich im selben Ordner befinden muessen, wie die

Datei in welcher der Kalender dargestellt werden soll.
Ansonst muessen saemtlich Pfadangaben in diesen 3 Dateien angepasst werden!

Beispiel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
	<title>Grafixx LayoutManager</title>
	
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta http-equiv="Content-Language" content="de" />

	<link rel="stylesheet" href="style.css" type="text/css" />
	
<script type="text/javascript">
function get_Content(wo, was){

	var url = "request.php"+was; // Datei die aufgerufen werden soll
	
    var xmlHttp = null;
    // Mozilla, Opera, Safari sowie Internet Explorer 7
    if (typeof XMLHttpRequest != 'undefined') {
        xmlHttp = new XMLHttpRequest();
    }
    if (!xmlHttp) {
        // Internet Explorer 6 und lter
        try {
            xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                xmlHttp  = null;
            }
        }
    }
    if (xmlHttp) {
        xmlHttp.open('GET', url, true);

        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4) {
                myContent = xmlHttp.responseText;
                document.getElementById(wo).innerHTML = myContent;
            }
        };
        xmlHttp.send(null);
    }
}
</script>	
</head>
<body>

<?php
 include('kalender.php'); 		// Funktion fuer Kalender einbinden
?>

<div id="ram">
	
	<div id="header">
			<h1>Grafixx EventKalender</h1>
	</div>
	
		
	<div id="content">
		
		<div id="kalender"><?php show_calender(); ?></div>

	</div>

	<div id="footer">
		<p class="right">  Valid <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText 

Markup Language">
		XHTML</abbr></a> | Valid <a href="http://jigsaw.w3.org/css-validator/check/referer" title="CSS ist valide!"><abbr title="Cascading Style Sheets">
		CSS</abbr></a>&nbsp;&nbsp;
		</p>
				
		<p><a href="http://unnecessary.de">Grafixx EventKalender</a>  <a href="http://alice-grafixx.de">
		Alice-Grafixx.de</a></p>
	</div>	
</div>
		
	
</body>
</html>

Das war dann auch schon alles :)

Ach nee, fehlt ja noch die CSS-Angaben fuer den Kalender...

a.tool{ /* for tooltip */
position: relative;
z-index: 24;
}

a.tool:hover{ z-index:25; }

a.tool span{ display: none }

a.tool:hover span{
border: 2px solid #444;
background: #F7F7F7;
display: block;
color: #446FA6;
position: absolute;
top: 2em;
left: 2em;
width: 13em;
padding: 5px;
text-align: center;
}

.vor, .back{
border: 1px solid #ccc;
padding: 0px 5px;
}

.vor{ float: right; }

.back{ float: left; }

#kalender table{
border: 1px solid #ccc;
background: #fff;
text-align: right;
width: 200px;
padding: 5px;
}

#kalender caption{ /* Jahr / Monat */
border: 1px solid #ccc;
background: #F7F8F9;
font-weight: bold;
text-align: center;
padding: 5px;
}
#kalender caption a{
background: #fff;
}

#kalender td{
border: 1px solid #fff;
padding: 0 2px;
}

#kalender th{ /* Wochentage */
color: #446FA6;
}

#kalender .today{ /* aktueller Tag */
border: 1px solid #FE8989;
}

#kalender a{
font-weight: bold;
}

Tutorialdateien herunterladen

Hinweis: Das Tutorial wurde am 12.09.2009 ueberarbeitet, danke Lydia

Kommentar schreibenHinterlasse einen Kommentar

Du musst angemeldet sein, um einen Kommentar zu hinterlassen...

Du bist noch kein Mitglied von Alice-Grafixx.de?
Dann kannst du dich hier kostenlos registrieren ...