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

Neu

Bildschirmfotos

Die Bildschirmfotos können von der aktuellen Version abweichen!

[Bildschirmfoto] Bestimmte Tage, Wochentage oder Wochen hervorheben (Beispiel, Optional).
Bestimmte Tage, Wochentage oder Wochen hervorheben (Beispiel, Optional).

Anmelden im Kalender  Event im Kalender eintragen  Event im Kalender bearbeiten

Event im Kalender anzeigen  Event im Kalender anzeigen (dunkler Modus)

[Bildschirmfoto] Der Event-Kalender im dunklen Modus.
Der Event-Kalender im dunklen Modus.
[Bildschirmfoto] Anzeige der Monatsbilder im dunklen Modus.
Anzeige der Monatsbilder im dunklen Modus.

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

Viel Spaß damit!

➤ Mit einer externen (MySQL) Datenbank und sehr vielen Funktionen, der große Bruder Event-Kalender

Event-Kalender

Tipps

Monatsbilder anzeigen

Monatsbild (Beispiel im dunklen Modus)

  1. Öffne die Datei: kalender.php
  2. Gehe im Quelltext zum Eintrag: // Monatsbilder anzeigen
  3. In der folgenden Zeile die HTML-Kommentarzeichen: <!-- und --> entfernen.
  4. Die Datei: kalender.php speichern.
Quelltext - Datei: kalender.php
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.2024"],
td[data-tag="25.07.2024"] {
  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.2024"] {
  background-image: url("img/event.png");
  background-size: cover;
}

Button mit einem Bild hervorheben:

td[data-tag="22.09.2024"] > button[type="button"] {
  background-image: url("img/event.png") !important;
  background-size: cover;
}

Eine bestimmte Event-Farbe, mit einem Farbrand an der rechten Seite hervorheben:

[data-farbe^="#08bf08"] {
  box-shadow: inset -15px 0px #ffff00 !important;
}

14:30 Beispiel 
👉 Hervorhebungen sind in der Datei: style.css bereits vordefiniert und müssen nur angepasst werden.
Event-Kalender (SQLite) - Mit CSS die Woche hervorheben
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 modernen Browsers wird in der Farbauswahl eine konfigurierbare Farbpalette (Datei: kalender.php) angezeigt.

Chrome, Edge, Opera etc. unter Windows 11
Mozilla Firefox unter Windows 11
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;
}