Event-Kalender (SQLite) Eigenschaften Bildschirmfotos Herunterladen 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

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

Anmelden im KalenderEvent im Kalender eintragenEvent im Kalender bearbeiten

Event im Kalender anzeigenEvent im Kalender anzeigen (dunkler Modus)

Anzeige der Monatsbilder (dunkler Modus)

[Bildschirmfoto / Grafik]
 Bestimmte Tage (blau), Wochentage (rot) oder Wochen (grün) hervorheben (Beispiel, optional).
Bestimmte Tage (blau), Wochentage (rot) oder Wochen (grün) hervorheben (Beispiel, optional).

Voraussetzungen

Webserver mit PHP 7.4 (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


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
  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.phpAusblendenKopierenZeilen

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 AFirma BFirma CFirma D

An Bootstrap anpassen

Wenn das Framework: Bootstrap verwendet wird, sind minimale Anpassungen notwendig.

div#titelleiste {
  font-family: var(--font-family);
  font-size: 0.9rem;
  color: var(--color);
  background-color: var(--bgcolor-odd);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: Solid 0.1px rgba(155, 155, 155, 0.5);
  display: grid;
  grid-template-columns: 1.9fr 0.27fr;
  height: 30px;
  padding: 5px 0px 5px 10px;
  position: sticky;
  top: 0px;
  cursor: move;
}

div#schliessen {
  font-size: 0.9rem;
  text-align: center;
  height: 30px;
  margin-top: -5px;
}