Kalender

Event Kalender SQLite

Kalender mit einer einfachen SQLite Datenbank von Werner-Zenk.de

Kalender

Tutorial

Vielen Dank für diese Anwendung an Werner.

Leider hat Werner-Zenk.de seine Webseite am 10.07.2022 eingestellt. Mit freundlicher Genehmigung von Werner stelle ich aber hier seine neueste Version zum Download bereit.

Geht zum Download der Skripte von Werner-Zenk.de auf meine Seite Download-Archiv und entpackt die ZIP-Datei:

2022-08-09-event-kalender_sqlite.zip

Ich beschreibe hier den Einbau der Kalender-Version vom 09.08.2022. Bitte lest auch die Datei lies_mich.txt oder read_me.txt mit den Anleitungen. Ihr könnt diese Anwendung ab PHP-Version 7.4 verwenden.

Öffnet die Datei:

kalender.php

mit einem Editor, wie z.B. Notepad++ oder dem Windows-Editor, sodass die Kodierung "UTF-8" beim Speichern erhalten bleibt und tragt gleich oben euren Benutzernamen und euer Passwort ein. Ihr ersetzt also "user" und "0000":

// Namen und Passwörter der Benutzer
$NAME_PASS["user"] = "0000";
// $NAME_PASS["user2"] = "0002";

// Benachrichtigung per E-Mail versenden
// Deine beim Provider registrierte E-Mail-Adresse hier ersetzen.
$EMAIL = "mail@example.com";


Ihr könnt dort auch zusätzliche Benutzer eintragen und ihnen einen eigenen Usernamen mit Passwort geben. Entfernt dazu die beiden Slash // und setzt zusätzliche Benutzer ein. Weiterhin kann hier eine E-Mail Adresse eingetragen werden, an die bei Bedarf eine Mail bei einem neuen Eintrag gesendet werden kann, wenn ein "Cronjob" beim Provider angelegt wurde. Füge also an der Variable $EMAIL deine gültige E-Mail Adresse, anstelle von meinem Beispiel mail@example.com, innerhalb der Anführungszeichen ein.

Kopiert nun sämtliche Dateien und das Verzeichnis "db" mit der SQLite-Datenbank (Textdatei) zum Testen auf den Server. Die Datei "lies_mich.txt" benötigt ihr natürlich nicht am Server, in dieser findet ihr nützliche Hinweise zum Gebrauch der Anwendung.

Bitte sichert die Datenbank hin und wieder, indem ihr diese mit einem FTP-Programm wie z.B. "FileZilla" auf den PC kopiert.

Öffnet diese Datei nicht mit einem Editor, denn so kann sie Schaden nehmen. Wenn ihr diese SQLite-Datenbank ändert wollt, dann ladet Euch z.B. diesen Browser zur Bearbeitung herunter:

https://sqlitebrowser.org/

Diese Anwendung kann man auch auf Deutsch umstellen und sie ist sehr einfach zu verstehen. Man kopiert die Datenbank auf den PC und lädt diese dann mit der Anwendung.

Nun könnt ihr das ebenso auf einer beliebigen Seite in Mobirise einbauen.

Öffnet hierfür die im Download beiliegende Datei "demo.htm" und kopiert diese beiden Verweise zur CSS und zur JavaScript Datei in die Seiteneinstellungen (am Zahnrad) in den Bereich: "Inside <head> code":

<link rel="stylesheet" href="style.css" />
<script src="javascript.js" defer></script>


Diese Zeile ruft den Kalender zur Anzeige auf eurer Seite auf:

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

Kopiert also diese Zeile im "Code Editor" in den Bereich "HTML Editor" (siehe Screenshot unten). Achtet darauf, dass kein <p> Tag das <div> Tag umschließt. Ich habe hier einen einfachen Textblock aus der Rubrik "Article" zum Einbau verwendet und damit lediglich den Beispieltext von Mobirise ersetzt. Die Anzeige kann aber ebenso in jeden beliebigen anderen Block eingebaut werden.

Meine CSS-Datei könnte etwas vom Original abweichen. Ich habe meine Änderungen mit "Tommy" gekennzeichnet, sodass ihr diese suchen könnt. Es kann passieren, dass die Bootstrap-CSS von Mobirise einige Elemente anders darstellt als in der Anwendung vorgesehen.

Smileys und Icons wurden hier über die "Windows 10" Bildschirmtastatur eingefügt. Ihr könnt auch zur Anzeige der "Windows 10" Icons die Tastenkombination "Windows-Taste + Punkt" verwenden und natürlich auch jene am Smartphone.
Emojis
Ihr könnt einen vorhandenen Eintrag auch zu einem anderen Datum kopieren, indem ihr im Editor an der Checkbox "Event kopieren" und im Feld "Datum" am Datepicker ein anderes Datum wählt.

Tag, Woche, Wochentag und Name des Wochentags können mit CSS-Anweisungen hervorgehoben werden. Beispiele findet ihr in der Datei: style.css

Um Missbrauch durch HTML-Code zu verhindern, wurde der Gebrauch im Skript unterbunden und anstelle dessen BBCode zur Gestaltung erstellt.

BBCode

Ihr könnt folgenden BBCode verwenden, der bereits in der Datei "kalender.php" erstellt ist:

[i]Kursiv[/i]
[s]Durchgestrichen[/s]
[q]Quotieren[/q]
[u]Unterstrichen[/u]
[c=#FF0000]Schrift Farbe[/c]
[bc=#FFFF00]Hintergrund Farbe[/bc]
[z]Zentriert[/z]
[g=image.jpg]optionale Beschreibung[/g]
[a=audio.mp3]optionale Beschreibung[/a]
[v=video.mp4]optionale Beschreibung[/v]

... ich habe mir zusätzlich noch einen BBCode für Schriftgrößen, ein <iframe> Tag zur Anzeige von "YouTube" Videos sowie eine Text-URL selbst erstellt.


Bei YouTube Videos tragt ihr dann lediglich diese Film ID, hier im Beispiel=YE7VzlLtp-4, welche ihr am Ende der URL von YouTube findet, ein.

[f=25]Schriftgröße zum Beispiel 25px[/f]
[youtube=YE7VzlLtp-4]optionale Beschreibung[/youtube]
[url=https://www.domain.de/]verlinkter Text[/url]


Unten diese Variablen, die ihr an den bereits vorhandenen BBCode in der Datei "kalender.php" bei "// Text formatieren" unten ran schreiben könnt: 

$text = preg_replace('/\[f=(.*)\](.*)\[\/f\]/Uism', '$2', $text); // [f=25] (Font)
$text = preg_replace('/\[youtube=(.*)\](.*)\[\/youtube\]/Uism', '<figure><iframe width="100%" height="360" src="https://www.youtube.com/embed/$1"></iframe><figcaption>$2</figcaption></figure>', $text); // [youtube]
$text = preg_replace('/\[url=(.*)\](.*)\[\/url\]/Uism', '<a href="$1" style="text-decoration: underline;" target="_blank">$2</a>', $text); // [url]

E-Mail über Cronjobs

Zum Senden einer E-Mail als Erinnerung an ein Event, muss ein "Cronjob" (zeitbasierte Ausführung) bei eurem Provider angelegt werden.

Bei meinem Provider "1&1 IONOS" sieht das wie unten bei den Screenshots aus. Hier die Anweisungen von "1&1 IONOS" zum Cronjob-Manager.

Dazu wird die PHP-Datei "kalender.php" mit der Aktion "?cron" an die URL zur Kalender-Seite gehängt und als Adresse für den Cronjob bei dem Provider unter "HTTP GET" eingetragen:

kalender.php?cron

Mit einer "Cron" werden dann alle Event-Einträge des definierten Tages über das Skript "kalender.php" in der E-Mail gesendet, also hier einen Tag zuvor. Die Anweisung dazu ist zur Zeit in der Datei "kalender.php" für Einträge am kommenden Tag voreingestellt unter:

/*
* Benachrichtigungen per E-Mail versenden
*/
WHERE DATE(`datum`) = DATE('now','+1 day')

Monatliche Bilder

Monate können optional mit einem schmalen, passenden Bild als Banner im .png Format über dem jeweiligen Monat angezeigt werden. Diese Option muss zunächst in der Datei "kalender.php" unter "Monatsbilder" aktiviert werden, indem ihr die unten rot markierten <!-- Kommentar-Zeichen --> entfernt.

Ich habe diese Option hier in Gebrauch, wie ihr an meinem Kalender oben sehen könnt. Unten ein Screenshot ohne Monatsbild.

// Monatsbilder - 12 Bilder im Dateiformat: .png mit den Dateinamen von 1-12.
$monatsbild = '<!-- <div id="monatsbild" style="background-image: url(\'img/' . $monat . '.png\');"></div> -->' . PHP_EOL;

Monatliche Bilder optional anpassen

Hier sind meine monatlichen Bilder 175px hoch. Wer diese Bilder am Smartphone zu groß findet, kann diese mit einer CSS Media-Anweisung auch ausblenden oder in der Höhe verringern. Hier meine ohnehin etwas geänderte CSS sowie die Media-Anweisung, mit der ich hier eine verringerte Höhe von 80px am Smartphone verwende.

/* Monatsbilder */
div#monatsbild {
  height: 175px;
  background-size: Cover;
  background-position: Center Center;
  /* Edit Tommy - entfernt: box-shadow: inset 0px 0px 15px 0px #fff; */
  border-left: Solid 1px #bbbbbb;
  border-right: Solid 1px #bbbbbb;
  border-radius: 20px 20px 0px 0px;
}

/* EDIT Tommy - Monatsbilder nur ab 991px Displaybreite anzeigen bzw. kleinere Höhe */
@media (max-width: 991px) {
  div#monatsbild {
   /* display: none; */
   height: 80px;
   border-radius: 10px 10px 0px 0px;
  }
}

Private und wiederkehrende Events

Man kann im Editor ein Häkchen bei Privat setzen, sodass solche Einträge nur vom Administrator, wenn dieser eingeloggt ist, gesehen werden können. Weiterhin kann man auch jährlich wiederkehrende Events, wie z.B. Geburtstage, an der Checkbox "Festtag" definieren.

Privates-Event

Ansicht ohne Monatsbild und einem privaten Event, das nur vom Administrator gesehen werden kann.
Hier kann man auch die Checkbox "Festtag" anhaken, um jährlich wiederkehrende Events einzutragen.
Weiterhin ist es möglich eine E-Mail über "Cron", durch anhaken der Checkbox "Nachricht", zu versenden.

Tastatur Belegung

Ihr könnt den Kalender am Desktop auch zusätzlich über folgende Tastenkombinationen und Tasten steuern. Hinweise erhaltet ihr auch bei Mausüber von Elementen der Navigation:

  • Alt + Umschalttaste + Unterstrichener Buchstabe
    Auswahl der Aktion
  • Strg + Pfeiltaste Links 
    Einen Monat zurück
  • Strg + Pfeiltaste Rechts 
    Einen Monat weiter
  • Strg + Pfeiltaste Ab 
    Ein Jahr zurück - an Laptops auch Strg+Fn + Pfeiltaste Ab
  • Strg + Pfeiltaste Auf
    Ein Jahr weiter - an Laptops auch Strg+Fn + Pfeiltaste Auf
  • Tab
    Events mit Tabulatortaste ansteuern
  • Esc
    Anzeige schließen
  • A
    Anmeldung / Abmeldung
  • D
    Drucken (Druckvorschau)
  • K
    Kalender Monat / Jahr wählen
  • N
    Neues Event eintragen
  • O
    Zum Kalender scrollen
  • W
    Wochennummern anzeigen
  • X
    Aktuellen Monat anzeigen
Kalender-Code

Kalender Code in einem einfachen Textblock

Admin

Ansicht vom Editor

Administration

Hier noch eine Ansicht vom Editor für den Administrator.

Bei Mausüber eines Datums erscheinen Hinweise auf den Tag, die Woche und das Quartal. Bei Mausüber von einem Event, werden bereits Details zum Event angezeigt. 

Man kann auch BBCode verwenden, der  bereits in der Anwendung definiert wurde. Einen Hinweis auf den definierten BBCode findet ihr bei Mausüber dem ? über dem Fenster der Beschreibung und könnt diesen dort auch kopieren, welches ihr auch unten rechts mit der Maus greifen und größer ziehen könnt.

Weiterhin stehen zur Bedienung auch diverse Tastatureingaben zur Verfügung, die in der Datei "lies_mich.txt" beschrieben sind. 

Man kann das Event-Fenster am Desktop oben mit der Maus greifen und verschieben.

CSS Anweisungen

Ansicht von einigen hervorgehobenen CSS Anweisungen

© Copyright Mobirise-Tutorials.com

Impressum / Datenschutz


Google Translator