Event-Kalender

Mit dem Event-Kalender können Sie Events (Ereignisse) in einer DB-Tabelle speichern. Die Events werden übersichtlich in einem Kalender angezeigt. Die Navigation des Kalenders läuft vollständig über JavaScript (AJAX), somit ist kein Seitenwechsel notwendig.

Jetzt testen, klicken Sie auf das folgende Bildschirmfoto (Screenshot) und testen Sie die hervorragende Geschwindigkeit des "Event-Kalenders", Einträge werden sogleich angezeigt.

Live-Demo - Event-Kalender
Live-Demo - Event-Kalender

Der Kalender zeigt alle Tage eines Monats in Form einer Tabelle an. Dabei kann über Links zum Vormonat oder kommenden Monat navigiert werden, auch die Auswahl eines bestimmten Monats oder Jahres ist möglich.

Vielen Dank

Vielen Dank an alle Benutzer die bisher den Event-Kalender herunter geladen haben und Ihre Meinung dazu in den Kommentaren geschrieben haben.
Neue Ideen sind immer Willkommen, es soll hier nicht der Outlook oder Google Kalender kopiert werden, sondern eine eigenständiger Kalender mit anderen Funktionen.

Eigenschaften

Weitere Eigenschaften

Neu

Hinweise zur Installation

Voraussetzung:
Webserver (Linux) mit PHP 7.1 (oder höher), eine MySQL/MariaDB-Datenbank.

Führen Sie folgende Anweisungen nacheinander aus:

  1. In der Datei: verbindung.php tragen Sie Ihre Zugangsdaten (zur Datenbank) ein. Dort sind auch weitere Einstellungen möglich.
  2. Laden Sie alle Dateien auf Ihrem Webserver hoch.
  3. Rufen Sie die Datei: installation.php in Ihrem Browser auf.
  4. Rufen Sie die Datei: demo.htm in Ihrem Browser auf und tragen Sie Ihre ersten Event in den Kalender ein.

Herunterladen: event-kalender.zip

Viel Spaß damit!

In den Kommentaren können Sie Hinweise, Fehler und Verbesserungsvorschläge zum Event-Kalender eintragen.

Tipps

Den Event-Kalender einbinden

Der Kalender lässt sich in jede HTML-Seite einbinden, einfach den Blau hervorgehobenen Text in die Seite einfügen.

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Kalender</title>
  <link rel="stylesheet" href="kalenderstyle.css">
  <script type="text/javascript" src="kalenderscript.js"></script>
 </head>
<body>

<div id="kalender"></div>

</body>
</html>
Den Event-Kalender in ein anderes Verzeichnis einbinden

Die Relativen Pfade anpassen, ausgehend vom aktuellen Verzeichnis in dem der Verweis liegt!

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Kalender</title>
  <link rel="stylesheet" href="deinverzeichnis/event-kalender/kalenderstyle.css">
  <script type="text/javascript" src="deinverzeichnis/event-kalender/kalenderscript.js"></script>
 </head>
<body>

<div id="kalender"></div>

</body>
</html>

In der Datei: kalenderscript.js (Zeile: 18) folgendes anpassen:

var kalender = "deinverzeichnis/event-kalender/kalender.php";
Anmeldung im Event-Kalender
Anmeldung im Event-Kalender
Anmeldung im Event-Kalender (Gif-Animation, ca. 267 kb)
Ein Hintergrundbild für den Event-Kalender

Öffne die Datei: "kalenderstyle.css" und entferne die folgenden CSS-Kommentarzeichen:

/* Kalender */
div#kalender {
 box-shadow: 1px 1px 10px #CFCFCF;
 /*background-image: url(hintergrundbild.jpg);
 background-repeat: No-Repeat;
 background-size: Cover;*/
}

/* Tabelle */
table#kalender {
 font-family: Verdana, Sans-Serif;
 background-color: #F5F5F5;
 border-collapse: Collapse;
 empty-cells: Hide;
 width: 100%;
 /*opacity: 0.85;*/
 cursor: Default;
}
[Bildschirmfoto] 
Der Event-Kalender mit einem Hintergrundbild.
Der Event-Kalender mit einem Hintergrundbild.

Wenn man eine Liste der Events auch auf einer anderen Seite anzeigen möchte, dann sind die folgenden PHP-Scripte hilfreich.

Die Events des aktuellen Monats anzeigen

Dieses Script zeigt die Events des aktuellen Monats an.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// Event-Kalender
// Events des aktuellen Monats anzeigen

include "verbindung.php"// Dateipfad eventuell anpassen

$select $db->query("SELECT `start`, `event`, `beschreibung`
                      FROM `" $TABLE_PREFIX "_kalender`
                      WHERE YEAR(`start`) = YEAR(NOW()) AND
                            MONTH(`start`) = MONTH(NOW())
                      ORDER BY `start` ASC");
$events $select->fetchAll();
foreach (
$events as $event) {
 
sscanf($event["start"], "%4s-%2s-%2s %5s"$dbJahr$dbMonat$dbTag$dbUhr);
 echo 
'<p>$dbTag '.' $dbMonat '.' $dbJahr '&emsp;$dbUhr ' Uhr - ' .
 
$event["event"] . '<br>$event["beschreibung"] . '</p>';
}
?>
Aktuelle Events anzeigen

Hier können Sie selbst die Anzahl der Events bestimmen die angezeigt werden soll.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
// Event-Kalender
// Aktuelle Events anzeigen (mit Beschreibung)

include "verbindung.php"// Dateipfad eventuell anpassen

$anzahl 12// Anzahl
$select $db->query("SELECT `start`, `event`, `beschreibung`
                      FROM `" $TABLE_PREFIX "_kalender`
                      WHERE `start` >= NOW()
                      ORDER BY `start` ASC
                      LIMIT " $anzahl);
$events $select->fetchAll();
foreach (
$events as $event) {
 
sscanf($event["start"], "%4s-%2s-%2s %5s"$dbJahr$dbMonat$dbTag$dbUhr);
 echo 
'<p>$dbTag '.' $dbMonat '.' $dbJahr '&emsp;$dbUhr ' Uhr - ' .
 
$event["event"] . '<br>$event["beschreibung"] . '</p>';
}
?>
Events der nächsten 31 Tage

Immer Aktuell, die Events der nächsten 31 Tage (individuell einstellbar).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// Event-Kalender
//  Events der nächsten 31 Tage (individuell einstellbar).

include "verbindung.php"// Dateipfad eventuell anpassen

$tage 31// Tage
$select $db->query("SELECT `start`, `event`, `beschreibung`
                      FROM `" $TABLE_PREFIX "_kalender`
                      WHERE (TO_DAYS(`start`) - TO_DAYS(NOW())) >= 0 AND (TO_DAYS(`start`) - TO_DAYS(NOW())) <= " $tage "
                      ORDER BY `start` ASC");
$events $select->fetchAll();
foreach (
$events as $event) {
 
sscanf($event["start"], "%4s-%2s-%2s %5s"$dbJahr$dbMonat$dbTag$dbUhr);
 echo 
'<p>$dbTag '.' $dbMonat '.' $dbJahr '&emsp;$dbUhr ' Uhr - ' .
 
$event["event"] . '<br>$event["beschreibung"] . '</p>';
}
?>