Einfachen PHP-Kalender für Webseite programmieren

6 | 17 Kommentare | 17611 Aufrufe

Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Einfachen PHP-Kalender für Webseite programmieren" mit Ihrem Wissen!

Inhaltsverzeichnis

Grundlage
1. Aller Anfang ist schwer
2. Funktion getCalender()
3. Der Aufruf
4. Die Datei als ganzes
Beispiel

Anzeige Hier werben

Im folgenden Tutorial beschreibe ich euch wie Ihr einen einfach PHP Kalender für eure Webseite bauen könnt.

Grundlage

Als erstes lege ich fest welche Funktionen der Kalender haben soll.

Jahr zurück
Monat zurück
Anzeige des aktuell ausgewählten Monats + Jahr in Deutsch
Monat vor
Jahr vor
Ausgabe aller Tage eines Monats mit gekürztem Wochentag
PHP Kalender mit Timestamps steuern

1. Aller Anfang ist schwer

Um den ganzen Kalender zu steuern, egal in welche Richtung der Kalender gesteuert wird ( vor oder zurück in der Zeit ) bietet sich ein Timestamp an.

Kurz zur Erklärung. Ein Timestamp gibt das Datum und die Zeit in Sekunden seit dem 1.Januar 1970 00:00 Uhr zurück.

Sprich das Datum: 10.September 2008 00:00:00 entspricht 1220997600. Das heißt seit dem 1. Januar 1970 00:00:00 Uhr sind 1220997600 Sekunden bis zum 10.September 2008 00:00:00 vergangen.

Dadurch ergeben Sie eine Vielzahl von Möglichkeiten in PHP mit einem Timestamp zu arbeiten, auf die ich später noch genauer eingehe.

Als erstes brauchen wir das aktuelle Datum als Timestamp. Dafür benutze ich die in PHP integrierte Funktion time(). time() generiert einen Timestamp bis zur Sekunde in der ich das PHP Skript aufrufe.

PHP

<?php
$date = time();
echo $date;
?>

Nun gibt es ein Problem. Da nun immer das aktuelle Datum als Standardzeit genutzt wird, bereite ich das Skript auf die Übergabe der Datumsangabe über die URL vor. Dazu benötigen wir die von PHP definierte Variable $_GET. Mit $_GET['timestamp'] bekommen wir immer alle Zeichen die in der URL in der Variable "timestamp" stehen.

In der URL steht z.B. www.google.de/index.php?timestamp=123456789. Mit echo $_GET['timestamp'] würde PHP "123456789" ausgeben..

PHP

<?php
if( isset($_GET['timestamp']) && !empty($_GET['timestamp'])){
    $date = time();
} else {
    $date = $_GET['timestamp'];
}

echo $date;
?>

Kurz zur Erklärung. Wenn die URL wie folgend aussieht index.php?timestamp=1220997600, so prüft nun das PHP Skript ob in der URL die Variable timestamp gesetzt ist und ob die übergebene Variable einen Wert enthält. Wenn die Variable nicht gesetzt ist so wird der aktuelle Timestamp in die Variable $date geschrieben ansonsten wird der Wert aus der Variable Timestamp übernommen.

isset() = Prüft ob die angegebene Variable gesetzt ist.
empty() = Prüft ob die angegebene Variable leer ist
!empty() = Prüft ob die angegebene Variable nicht leer ist

Ich habe nun vier Funktionen angelegt, welche mir anhand der in $date abgelegten Timestamps den jeweiligen gesuchten Timestamp zurückliefert.

PHP

function monthBack( $timestamp ){
    return mktime(0,0,0, date("m",$timestamp)-1,date("d",$timestamp),date("Y",$timestamp) );
}
function yearBack( $timestamp ){
    return mktime(0,0,0, date("m",$timestamp),date("d",$timestamp),date("Y",$timestamp)-1 );
}
function monthForward( $timestamp ){
    return mktime(0,0,0, date("m",$timestamp)+1,date("d",$timestamp),date("Y",$timestamp) );
}
function yearForward( $timestamp ){
    return mktime(0,0,0, date("m",$timestamp),date("d",$timestamp),date("Y",$timestamp)+1 );
}

Ich erkläre das an der Funktion monthBack().
Innerhalb der Funktion wandle ich den übergebenen Timestamp mit der in PHP implementierten Funktion date() in die gesuchte Form um.

Date("d",$timestamp) = Tag des Timestamps; Rückgabe: z.B.: 7
Date("m",$timestamp) = Monat des Timestamps; Rückgabe: z.B.: 9
Date("Y",$timestamp) = Jahr des Timestamps; Rückgabe: z.B.: 2008

Mit der Funktion mktime() wandel ich nun aus den einzelnen Datums Werten einen Timestamp.
Hierbei ist zu beachten das mktime() wie folgend die Werte erwartet:

mktime(Stunden,Minuten,Sekunden,Monat,Tag,Jahr);

2. Funktion getCalender()

Die Funktion getCalender() erwartet 2 Parameter wobei der zweite nicht Pflicht ist. Der erste Parameter ist das aktuelle Datum welches unter Punkt eins dieses Tutorials in die Variable $date geschrieben wird. Der zweite Parameter ist ein Array mit den Texten für die einzelnen Tagesüberschriften.

Parameter 1 muss einen Timestamp beinhalten

Parameter 2 muss ein Array sein. Z.B. array('Mon','Die','Mit','Don','Fre','Sam','Son'); Ist es nicht gesetzt wird Automatisch auf folgendes Array zurückgegriffen array('Mo','Di','Mi','Do','Fr','Sa','So'

Die Funktion ist ansich sehr einfach gehalten. Als erstes wird die Anzahl der Tages des aktuellen Monats ermittelt. Dies kann ganz einfach für die PHP Funktion date() gemacht werden. Dafür wird der Parameter "t" als String und der aktuelle Timestamp an date() übergeben.

$sum_days = date('t',$date);

Als nächstes speichert man zusätzlich die Anzahl der Tage des letzten Monats. Dies wird so ähnlich wie zuvor gemacht, nur dieses mal wird ein neu generierter Timestamp an die date() Funktion übergeben. Diesem Timestamp wurde einfach ein Monat abgezogen.

$LastMonthSum = date('t',mktime(0,0,0,(date('m',$date)-1),0,date('Y',$date)));

Nun werden einfach die übergebenen Überschriften durch eine ForEach Schleife dargestellt.

foreach( $headline as $key => $value ) { echo "<div class=\"day headline\">".$value."</div>\n"; }

Nun soll der Kalender mit dem richtigen Wochentag beginnen. Dafür benötigen wir eine for Schleife, die so oft ausgeführt, wird wie die Summe der Tage des aktuellen Datums sind. Z.B. 31 mal.

/z.B.*/ for( $i = 1; $i <= $sum_days; $i++ ) {...

Für den weiteren Verlauf der Schleife brauchen wir eine Variable die den aktuellen Tagnamen beinhaltet. Diese Variable heißt $day_name und beinhaltet durch date('D',$timestamp) den aktuellen Tagnamen auf Englisch.

Es werden jetzt die Tage vor dem aktuellen Monat berechnet. Da der Kalender nicht mit dem ersten des Monats anfängt, sondern mit dem Tag Montag. Deshalb müssen wir errechnen wie viele Tage vor dem 1 des Monats ausgegeben werden müssen. Dies wird mit der erste IF Abfrage gemacht. Wenn der Counter $i gleich 1 ist, wird wieder eine Schleife duchlaufen, welche mittels array_search() die Anzahl der Tage ausgibt. array_search() gibt den Key des gefunden Array-Values zurück. In unserem fall wäre es ein Zahl, da es sich bei unserem Array um ein Nummerisches Array handelt.

Arrays bieten die Möglichkeit in einer Variable mehrere Werte zu speichern. Dabei wird jeder Wert einem Schlüssel, auch key genannt, zugewiesen. Wenn die Schlüssel aus Zahlen bestehen, die üblicherweise bei 0 Anfangen zu zählen, bezeichnet man ein solches Array als Nummerisches Array.

$num_array = array('a','b','c'); Ergebniss: array( 0 => a, 1 => b, 2 => c);
Oder
$num_array = array(0 => 'a', 1 => 'b', 2 => 'c'); Ergebniss: array( 0 => a, 1 => b, 2 => c);

Nun kommt mit Abstand der einfachste Teil des Kalenders. Die folgende IF Abfrage gibt dem erstellten div Container nun die CSS Klasse "current" oder "normal". Es wird einfach geprüft ob date('d',$date) gleich $i ist.

Als letztes müssen nur noch die Tage nach dem aktuellen Monat berechnet werden. Dazu werden 6 Tage von dem gefundenen ArrayValue abgezogen. Diese Zahl lassen wir wieder durch die FOR Schleife laufen und geben dem Div Container noch die Klasse "after".

Warum 6? Weil ein Nummerisches Array mit 0 beginnt.

PHP

function getCalender($date,$headline = array('Mo','Di','Mi','Do','Fr','Sa','So')) {
    $sum_days = date('t',$date);
    $LastMonthSum = date('t',mktime(0,0,0,(date('m',$date)-1),0,date('Y',$date)));
    
    foreach( $headline as $key => $value ) {
        echo "<div class=\"day headline\">".$value."</div>\n";
    }
    
    for( $i = 1; $i <= $sum_days; $i++ ) {
        $day_name = date('D',mktime(0,0,0,date('m',$date),$i,date('Y',$date)));
        $day_number = date('w',mktime(0,0,0,date('m',$date),$i,date('Y',$date)));
        
        if( $i == 1) {
            $s = array_search($day_name,array('Mon','Tue','Wed','Thu','Fri','Sat','Sun'));
            for( $b = $s; $b > 0; $b-- ) {
                $x = $LastMonthSum-$b;
                echo "<div class=\"day before\">".sprintf("%02d",$x)."</div>\n";
            }
        } 
        
        if( $i == date('d',$date)) {
            echo "<div class=\"day current\">".sprintf("%02d",$i)."</div>\n";
        } else {
            echo "<div class=\"day normal\">".sprintf("%02d",$i)."</div>\n";
        }
        
        if( $i == $sum_days) {
            $next_sum = (6 - array_search($day_name,array('Mon','Tue','Wed','Thu','Fri','Sat','Sun')));
            for( $c = 1; $c <=$next_sum; $c++) {
                echo "<div class=\"day after\"> ".sprintf("%02d",$c)." </div>\n"; 
            }
        }
    }
}

Damit der Kalender noch einigermaßen brauchbar aussieht, vergeben wir noch ein paar CSS-Styles, die wie folgend aussehen könnten.

css

body {
    font-family:verdana;
    font-size:12px;
}
a {
    color:black;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    background: #eaeaea;
}
.calender {
    width:280px;
    border:1px solid black;
}
* html .calender,
* + html .calender {
    width:282px;
}
.calender div.after,
.calender div.before{
    color:silver;
}
.day {
    float:left;
    width:40px;
    height:40px;
    line-height: 40px;
    text-align: center;
}
.day.headline {
    background:silver;
}
.day.current {
    font-weight:bold;
}
.clear {
    clear:left;
}
.pagination {
    text-align: center;
    height:20px;
    line-height:20px;
    font-weight: bold;
}
.pagination a {
    width:20px;
    height:20px;
}

* + html .day = Dieser Style wird nur vom IE 7 interpretiert
* html .day = Dieser Style wird nur vom IE 6 interpretiert

3. Der Aufruf

Nun kommen wir zum Aufruf des Kalenders. Wie oben schon beschrieben muss $date immer gesetzt sein.
Des weiteren brauchen wir noch ein Array mit deutschen Monatsnamen, da PHP diese standardmäßig auf Englisch wiedergibt. Damit wir in unserem Template auch den deutschen Monatsnamen ausgegeben bekommen wird das Array wie folgend genutzt:

$arrMonth[date('F',$date)];

date('F') gibt den ausgeschriebenen Monatsnamen auf Englisch zurück.

Um noch ein wenig flexibilität in den Kalender zu bringen, kann noch ein Array mit alternativen Überschriften übergeben werden.

PHP

<?php

if( isset($_REQUEST['timestamp'])) $date = $_REQUEST['timestamp'];
else $date = time();

$arrMonth = array(
    "January" => "Januar",
    "February" => "Februar",
    "March" => "M&auml;rz",
    "April" => "April",
    "May" => "Mai",
    "June" => "Juni",
    "July" => "Juli",
    "August" => "August",
    "September" => "September",
    "October" => "Oktober",
    "November" => "November",
    "December" => "Dezember"
);
    
$headline = array('Mon','Die','Mit','Don','Fri','Sam','Son');

?>

Nun bauen wir die oben beschriebenen Funktionen und Variablen in unser HTML/PHP Gerüst ein.
Um einen Monat zurück zu schalten wird die Funktion monthBack() wie folgt benutzt:

<a href="?timestamp=<?php echo monthBack($date); ?>" class="last">«</a>

Das gleiche kann nun noch für die anderen Funktion gemacht werden.

Als letztes wird nur noch die Funktion getCalender() aufgerufen. Diese bekommt das aktuelle Datum und die alternativen Überschriften übergeben. Es wird bewußt kein echo für die Funktion genutzt, da in der Funktion statt einem retrun Wert eine Ausgabe durch echo macht.

PHP

<div class="calender">
    <div class="pagination">
        <a href="?timestamp=<?php echo yearBack($date); ?>" class="last">|&laquo;</a> 
        <a href="?timestamp=<?php echo monthBack($date); ?>" class="last">&laquo;</a> 
        <span><?php echo $arrMonth[date('F',$date)];?> <?php echo date('Y',$date); ?></span>
        <a href="?timestamp=<?php echo monthForward($date); ?>" class="next">&raquo;</a>
        <a href="?timestamp=<?php echo yearForward($date); ?>" class="next">&raquo;|</a>  
    </div>
    <?php getCalender($date,$headline); ?>
    <div class="clear"></div>
</div>

Et voilá! Unser Kalender ist fertig. Hoffe das diese Artikel dem ein oder anderen Anfänger hilft.

4. Die Datei als ganzes

Hier noch einmal die gesamte Datei.

PHP

<?php
function monthBack( $timestamp ){
    return mktime(0,0,0, date("m",$timestamp)-1,date("d",$timestamp),date("Y",$timestamp) );
}
function yearBack( $timestamp ){
    return mktime(0,0,0, date("m",$timestamp),date("d",$timestamp),date("Y",$timestamp)-1 );
}
function monthForward( $timestamp ){
    return mktime(0,0,0, date("m",$timestamp)+1,date("d",$timestamp),date("Y",$timestamp) );
}
function yearForward( $timestamp ){
    return mktime(0,0,0, date("m",$timestamp),date("d",$timestamp),date("Y",$timestamp)+1 );
}

function getCalender($date,$headline = array('Mo','Di','Mi','Do','Fr','Sa','So')) {
    $sum_days = date('t',$date);
    $LastMonthSum = date('t',mktime(0,0,0,(date('m',$date)-1),0,date('Y',$date)));
    
    foreach( $headline as $key => $value ) {
        echo "<div class=\"day headline\">".$value."</div>\n";
    }
    
    for( $i = 1; $i <= $sum_days; $i++ ) {
        $day_name = date('D',mktime(0,0,0,date('m',$date),$i,date('Y',$date)));
        $day_number = date('w',mktime(0,0,0,date('m',$date),$i,date('Y',$date)));
        
        if( $i == 1) {
            $s = array_search($day_name,array('Mon','Tue','Wed','Thu','Fri','Sat','Sun'));
            for( $b = $s; $b > 0; $b-- ) {
                $x = $LastMonthSum-$b;
                echo "<div class=\"day before\">".sprintf("%02d",$x)."</div>\n";
            }
        } 
        
        if( $i == date('d',$date)) {
            echo "<div class=\"day current\">".sprintf("%02d",$i)."</div>\n";
        } else {
            echo "<div class=\"day normal\">".sprintf("%02d",$i)."</div>\n";
        }
        
        if( $i == $sum_days) {
            $next_sum = (6 - array_search($day_name,array('Mon','Tue','Wed','Thu','Fri','Sat','Sun')));
            for( $c = 1; $c <=$next_sum; $c++) {
                echo "<div class=\"day after\"> ".sprintf("%02d",$c)." </div>\n"; 
            }
        }
    }
}
?>
<html>
<head>
<style type="text/css">
body {
    font-family:verdana;
    font-size:12px;
}
a {
    color:black;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
    background: #eaeaea;
}
.calender {
    width:280px;
    border:1px solid black;
}
* html .calender,
* + html .calender {
    width:282px;
}
.calender div.after,
.calender div.before{
    color:silver;
}
.day {
    float:left;
    width:40px;
    height:40px;
    line-height: 40px;
    text-align: center;
}
.day.headline {
    background:silver;
}
.day.current {
    font-weight:bold;
}
.clear {
    clear:left;
}
.pagination {
    text-align: center;
    height:20px;
    line-height:20px;
    font-weight: bold;
}
.pagination a {
    width:20px;
    height:20px;
}
</style>
</head>
<body>
<?php

if( isset($_REQUEST['timestamp'])) $date = $_REQUEST['timestamp'];
else $date = time();

$arrMonth = array(
    "January" => "Januar",
    "February" => "Februar",
    "March" => "M&auml;rz",
    "April" => "April",
    "May" => "Mai",
    "June" => "Juni",
    "July" => "Juli",
    "August" => "August",
    "September" => "September",
    "October" => "Oktober",
    "November" => "November",
    "December" => "Dezember"
);
    
$headline = array('Mon','Die','Mit','Don','Fri','Sam','Son');

?>

<div class="calender">
    <div class="pagination">
        <a href="?timestamp=<?php echo yearBack($date); ?>" class="last">|&laquo;</a> 
        <a href="?timestamp=<?php echo monthBack($date); ?>" class="last">&laquo;</a> 
        <span><?php echo $arrMonth[date('F',$date)];?> <?php echo date('Y',$date); ?></span>
        <a href="?timestamp=<?php echo monthForward($date); ?>" class="next">&raquo;</a>
        <a href="?timestamp=<?php echo yearForward($date); ?>" class="next">&raquo;|</a>  
    </div>
    <?php getCalender($date,$headline); ?>
    <div class="clear"></div>
</div>
</body>
</html>

Beispiel

Hier ein funktionsfähiges Beispiel!

Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "Einfachen PHP-Kalender für Webseite programmieren" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Einfachen PHP-Kalender für Webseite programmieren" hier bearbeiten.

Mitarbeiter

Marcel Domke
Ich arbeite als Webentwickler bei der REGIOCAST GmbH & Co KG, seit Aprill 2008. Dort bin ich zuständig für die Seiten des Radiozentrum Kiel's.
Moritz Kern
graphic, motion & web design - kernreaktor - staportal - mukitu
Fabian Ziegler
Meine Schwerpunkte liegen im Bereich Grafikdesign, SEO und Management. Seit sieben Jahren bin ich als Geschäftsführer der Team23 GbR tätig, die Webdesign in Augsburg anbietet, sowie Webmasterpro.de betreut.
Wolfgang Schneider
Student für Interfacedesign auf Diplom im 7 Semester an der Merz-Akademie Stuttgart. Portfolio: Webdesign und Webentwicklung in Stuttgart, Böblingen und Sindelfingen

Webdesign, Tutorials und mehr - Webmasterpro.de

Clientseitig

Serverseitig

Über Webmasterpro.de

Unsere Sponsoren