Kalender

Event Kalender SQLite

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

Kalender

Tutorial

Vielen Dank für diese Anwendung an Werner.

Ich beschreibe hier den Einbau der Kalender-Version vom 26.01.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.

Bitte den Kalender nicht testen, wenn ihr den Google-Translator zur Übersetzung dieser Seite verwendet, denn dann funktioniert dieser eventuell nicht ganz korrekt.

Geht zum Download der Skripte von Werner-Zenk.de und entpackt die ZIP-Datei.

Öffnet die Datei mit einem Editor, wie z.B. Notepad++ oder dem Windows-Editor, sodass die Kodierung "UTF-8" beim Speichern erhalten bleibt:

kalender.php

und tragt gleich oben euren Benutzernamen und euer Passwort ein. Ihr ersetzt also "user" und "0000":

// Name (Administrator)
$NAME = "user"; // user

// Passwort (Administrator) - Bitte das Standard-Passwort ändern!
$NAME_PASS[$NAME] = "0000"; // 0000


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 eurem FTP-Programm 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"></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.

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

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

[b]Bold[/b]
[i]Kursiv[/i]
[s]Durchgestrichen[/s]
[q]Quotieren[/q]
[u]Unterstrichen[/u]
[c=#FF0000]Schrift Farbe[/c]
[bc=#FFFF00]Hintergrund Farbe[/bc]
[img=image.jpg]optionale Beschreibung[/img]
[video=film.mp4]optionale Beschreibung[/video]

... ich habe mir zusätzlich noch einen BBCode für ein <iframe> Tag zur Anzeige von "YouTube" Videos sowie eine Text-URL und ein "center", um den Inhalt zu Zentrieren, 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.

[youtube=YE7VzlLtp-4]optionale Beschreibung[/youtube]
[url=https://www.domain.de/]verlinkter Text[/url]
[center]zentrierter Text und Inhalt[/center]

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

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


Um diese Variablen aus dem Titel Attribut bei Mausüber zu entfernen, könnt ihr den Code unten bei "// BBCode Auszeichnungen entfernen" hinzufügen:

$txt = preg_replace('/\[youtube=(.*)\](.*)\[\/youtube\]/Uism', '$2', $txt); // [youtube]
$txt = preg_replace('/\[url=(.*)\](.*)\[\/url\]/Uism', '$2', $txt); // [url]
$txt = preg_replace('/\[center\](.*)\[\/center\]/Uism', '$1', $txt); // [center]

Monate können optional mit einem schmalen, passenden Bild als Banner ü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 nicht in Gebrauch. Unten ein Screenshot, wie das aussehen kann.

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

Monatsbild

Ansicht mit einem Monatsbild, das jeden Monat anders sein kann

Tastaturbelegung

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:

  • 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
  • Esc
    Anzeige schließen
  • A
    Anmeldung / Abmeldung
  • K
    Kalender Monat / Jahr wählen
  • N
    Neues Event eintragen - wenn angemeldet
  • 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, 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 Pop-Up 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