Event-Kalender (SQLite) Eigenschaften Bildschirmfotos Voraussetzungen Tipps
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.

Dieser Kalender bietet alle Grundfunktionen des großen Event-Kalenders. Eine transportable Datenbank (SQLite-Datei) und eine einfache Bedienung.
Der Kalender zeigt alle Tage eines Monats in Form einer HTML-Tabelle an. Dabei kann über Buttons zum Vormonat/Vorjahr oder kommenden Monat/Jahr navigiert werden. Die Events kann man direkt im Kalender eintragen (bearbeiten, verschieben, kopieren oder löschen).
Eigenschaften
- Transportable SQLite - Datenbank-Datei
- Passwortschutz für mehrere Benutzer
- Event eintragen, bearbeiten, verschieben, kopieren oder löschen
- Farbige Event-Hervorhebung
- Private Events (Optional)
- Festtage, Geburtstage, etc. eintragen (Optional)
- Responsive Darstellung am Monitor, Tablet und Smartphone
- Navigation mit der Tastatur STRG + ← → ↓ ↑ , A K N W X ESC …
- Benachrichtigung per E-Mail (Optional)
- Tag, Woche oder Wochentage über CSS hervorheben (Optional)
- Emojis (😁💔🤣💋🤟🌹😎👍 …) werden nativ dargestellt
- BBCode ist in der Beschreibung verwendbar
- Automatischer Hell.- und Dunkelmodus
- Individuelle Monatsbilder (Optional)
Neu
- Events über mehrere Tage eingeben
- Alle Events einer Gruppe auf einmal löschen
- Listenansicht (Optional)
- Kalender durchsuchen (Taste: S).
- Liste der Events in Wochen / Wochentagen anzeigen.
Bildschirmfotos
Die Bildschirmfotos können von der aktuellen Version abweichen!
![[Bildschirmfoto]
Der Event-Kalender im dunklen Modus. [Bildschirmfoto]
Der Event-Kalender im dunklen Modus.](img/event-kalender_sqlite_dark.png)
Anmelden im Kalender Event im Kalender eintragen Event im Kalender bearbeiten
Event im Kalender anzeigen Event im Kalender anzeigen (dunkler Modus)
Anzeige der Monatsbilder (dunkler Modus)
![[Bildschirmfoto]
Bestimmte Tage, Wochentage oder Wochen hervorheben (Beispiel, Optional). [Bildschirmfoto]
Bestimmte Tage, Wochentage oder Wochen hervorheben (Beispiel, Optional).](img/event-kalender_sqlite_wochentage_hervorheben.png)
Voraussetzungen
Webserver mit PHP 8.0 (oder höher). Einen aktuellen Browser (zum Beispiel: Microsoft Edge, Mozilla Firefox oder Google Chrome).
Führen Sie folgende Anweisungen nacheinander aus:
- In der Datei:
kalender.php
tragen Sie Ihre Zugangsdaten (Name und Passwort) ein. - Laden Sie alle Dateien auf Ihrem Webserver hoch.
- Rufen Sie die Datei:
demo.htm
in Ihrem Browser auf.
Viel Spaß damit!
➤
Mit einer externen (MySQL) Datenbank und sehr vielen Funktionen, der große Bruder
Event-Kalender

Tipps
Monatsbilder anzeigen
Monatsbild (Beispiel im dunklen Modus)
- Öffne die Datei: kalender.php
- Gehe im Quelltext zum Eintrag: // Monatsbilder
- In der folgenden Zeile die HTML-Kommentarzeichen: <!-- und --> entfernen.
- Die Datei: kalender.php speichern.
Tage im Kalender hervorheben
Öffnen Sie die Datei: style.css
und fügen Sie folgendes hinzu.
Wochentage hervorheben:
td[data-wochentag="Samstag"], td[data-wochentag="Sonntag"] { background-color: #ffcece !important; }
Tag hervorheben:
td[data-tag="05.07.2023"], td[data-tag="25.07.2023"] { background-color: #c6e3fd !important; }
Woche hervorheben:
tr[data-woche="1"], tr[data-woche="29"] { outline: Solid 2px #11d100; }
Tag mit einem Bild hervorheben:
td[data-tag="09.02.2023"] { background-image: url("img/event.png"); background-size: cover; }
Button mit einem Bild hervorheben:
td[data-tag="22.09.2023"] > button[type="button"] { background-image: url("img/event.png") !important; background-size: cover; }
Events der nächsten Tage anzeigen
Wenn man eine Liste der aktuellen Events auch auf einer anderen Seite anzeigen möchte, dann ist dieses PHP-Script hilfreich.
Quelltext: 31tage.php Ausblenden ❘ Kopieren ❘ Link ❘ Zeilen ❘
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
// Event-Kalender mit SQLite
// Events der nächsten 31 Tage (individuell einstellbar).
include "kalender.php"; // Dateipfad eventuell anpassen
$tage = 31; // Tage
$select = $db->query("SELECT `datum`, `event`, `beschreibung`
FROM `kalender`
WHERE (julianday(`datum`) - julianday('now')) >= 0 AND (julianday(`datum`) - julianday('now')) <= " . $tage . "
AND `privat` = 0
ORDER BY `datum` ASC");
$events = $select->fetchAll();
foreach ($events as $event) {
sscanf($event["datum"], "%4s-%2s-%2s %5s", $dbJahr, $dbMonat, $dbTag, $dbUhr);
echo '<p>' . $dbTag . '.' . $dbMonat . '.' . $dbJahr . ' ' . $dbUhr . ' Uhr - ' .
$event["event"] . '<br>' . $event["beschreibung"] . '</p>';
}
?>
Farbpalette anzeigen
Bei der Verwendung eines auf Chromium basierten Browsers (Chrome, Edge, Opera) wird in der Farbauswahl eine (konfigurierbare) Farbpalette angezeigt.

Benachrichtigungen automatisch per E-Mail versenden
- Hinterlege deine E-Mail-Adresse in der Datei: "kalender.php".
- Markiere beim gewünschten Event, im Formular die Checkbox "Nachricht".
- Rufe die PHP-Datei über: "
https://example.com/kalender.php?cron
" mit einer Cron 1-mal am Tag auf.
Beim Provider muss dazu ein Cronjob angelegt werden (http://de.wikipedia.org/wiki/Cron).
Eine farbige Legende hinzufügen
Den Farben im Kalender kann man verschiedene Bedeutungen zuordnen. Diese können dann unterhalb des Kalenders in einer sogenannten Legende dargestellt werden.
An Bootstrap anpassen
Wenn das Framework: Bootstrap verwendet wird, sind minimale Anpassungen notwendig.
div#titelleiste { background-color: var(--bgcolor-odd); border-bottom: Solid 0.1px rgba(155, 155, 155, 0.5); border-top-left-radius: 5px; border-top-right-radius: 5px; color: var(--color); cursor: move; display: grid; font-family: var(--font-family); font-size: 0.9rem; grid-template-columns: 1.9fr 0.27fr; height: 30px; padding: 5px 0px 5px 10px; position: sticky; top: 0px; } div#schliessen { font-size: 0.9rem; height: 30px; margin-top: -5px; text-align: center; }