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.

👁️‍ Live-Demo anzeigen - Event-Kalender mit SQLite
Live-Demo - Event-Kalender mit SQLite

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

Bildschirmfotos

Die Bildschirmfotos können von der aktuellen Version abweichen!

[Bildschirmfoto] Der Event-Kalender im dunklen Modus.
Der Event-Kalender im dunklen Modus.

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).
Bestimmte Tage, Wochentage oder Wochen hervorheben (Beispiel, Optional).

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:

  1. In der Datei: kalender.php tragen Sie Ihre Zugangsdaten (Name und Passwort) ein.
  2. Laden Sie alle Dateien auf Ihrem Webserver hoch.
  3. Rufen Sie die Datei: demo.htm in Ihrem Browser auf.

event-kalender_sqlite.zip

Tipps

Monatsbilder anzeigen

Monatsbild (Beispiel im dunklen Modus)

  1. Öffne die Datei: kalender.php
  2. Gehe im Quelltext zum Eintrag: // Monatsbilder
  3. In der folgenden Zeile die HTML-Kommentarzeichen: <!-- und --> entfernen.
  4. 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.2022"],
td[data-tag="25.07.2022"] {
  background-color: #c6e3fd !important;
}

Woche hervorheben:

tr[data-woche="1"],
tr[data-woche="29"] {
  outline: Solid 2px #11d100;
}
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 . '&emsp;' . $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
  1. Hinterlege deine E-Mail-Adresse in der Datei: "kalender.php".
  2. Markiere beim gewünschten Event, im Formular die Checkbox "Nachricht".
  3. 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.

Legende

  = David     = Julia     = Mike

  Aufgabe A     Aufgabe B     Aufgabe C

Firma A   Firma B   Firma C   Firma D

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;
}