Event-Kalender

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.

Dieser Kalender zeigt alle Tage eines Monats in Form einer Tabelle an. Dabei kann über Buttons zum Vormonat/Vorjahr oder kommenden Monat/Jahr navigiert werden, auch die Auswahl eines bestimmten Wochentags, der Woche, Monats oder Jahres ist möglich.

Der Eingetragene Event, der Tag oder das Kalenderblatt können direkt ausgewählt werden. Ein Journal zeigt alle Events im Kalenderjahr an. Flexible Größe - Der Kalender passt sich automatisch der Breite der Seite an.

Die Events können direkt im Kalender eintragen oder bearbeitet werden. Vielfältige Sortier-. und Suchfunktionen machen das auffinden der Events zu einem Kinderspiel.

Eigenschaften

Events direkt im Kalender eintragen oder bearbeiten.
Flexible Größe - Der Kalender passt sich automatisch der Breite der Seite an.
Passwort-Schutz (auch für mehrere Benutzer).
Anzeige von Feiertagen (Optional).
Jährliche Wiederholung eines Events (für Geburtstage, Feiertage etc.).

Weitere Eigenschaften

Jeder Benutzer kann nur seinen eigenen Event bearbeiten (der Admin. alle)!
Einfaches ändern der Farben des Kalenders durch eine externe CSS-Datei.
Eine schnelle Suchfunktion im Kalender.
Ein Kalenderblatt für jeden Kalendertag.
Prioritäten (farbige Markierungen) für Events setzen.

Unterstützung für BB-Code.
HTML-Tags können in der Beschreibung verwendet werden.
URLs werden in der Beschreibung des Events autom. umgewandelt.
Die (Kalender-)Dateien sind mit dem Zeichensatz UTF-8 kodiert.
Anzeige einer Liste der aktuellen Events 🏲.

Ein Event als iCal (ics-Datei) exportieren.
Die Wochentage (Mo-So) sind anklickbar, diese zeigen dann alle Events des Wochentags im Monat oder im Jahr an.
Der Tag zeigt alle Events des gewählten Tages an.
Smileys und Symbole (Emojis 😁🌼🍓🎁🐉 …) werden nativ dargestellt.
Schnelle Auswahl von bestimmten Monaten oder Jahren.

In den Suchoptionen ⌕ kann man eine bestimmte Priorität auswählen.
Der Tag, das Kalenderblatt (und andere) haben eine Navigation ◄ ►, mit dieser kann vor- oder zurück gesprungen werden.
Ein Doppelklick im Kalender auf einem Kalendertag, zeigt die Woche an.
Das Event-Eingabefeld und das Eingabefeld für die Suche haben eine Combobox, mit dieser können bereits eingetragene Events ausgewählt werden.
PHP 7 Unterstützung.
Serienevents eintragen - Events in den Kalender eintragen die über mehrere Tage gehen.

Anzeige der Weltzeit (eine Auswahlliste im heutigen Kalenderblatt).
Ein Journal R für alle Events (komplette Übersicht) im Kalenderjahr.
Gruppenoptionen: Der Admin. kann mehrere Events (gleichzeitig!) bearbeiten, drucken, exportieren oder löschen.
Das Datumsformat ist anpassbar.
Vorschau-Funktion beim eintragen oder aktualisieren eines Events (Optional).

Mit der Suche kann nach mehreren Begriffen gesucht werden.
Der Tag ist in Stunden aufgeteilt. Beim aktuellen Tag wird die Uhrzeit hervorgehoben.
ICS-Dateien importieren und (Optional) alle Events in den Kalender einfügen.
Autom. E-Mail Benachrichtigung - Events können per E-Mail versendet werden (Beta!).
Private Events - Diese werden erst nach der Anmeldung angezeigt.

Jedem angemeldeten Benutzer nur seine Events anzeigen (Optional).
Events können in Kategorien sortiert werden.

Neu

Tastaturbefehle - Steuerung des Kalenders über die Tastatur - F2 = Tastaturbelegung.
Einen Tag direkt über die Tastatur anwählen 0 … 9 (Ziffernblock).
Eine Woche über die Tastatur anwählen STRG + 0 … 9 (Ziffernblock).
Neuen Event eintragen STRG + 🖰 Linke Maustaste, auf einen Tag im Kalender klicken.
Event bearbeiten UMSCHALT + 🖰 Linke Maustaste, auf einen Event im Kalender klicken.
Events über Ziehen und Ablegen (Drag & Drop) verschieben.

Video

Hinweise zur Installation

Voraussetzung:
Webserver (Linux) mit PHP 7.2 (oder höher), eine MySQL/MariaDB-Datenbank. Es werden alle aktuellen Browser unterstützt, mit Ausnahme des Microsoft Internet Explorer 11 und ältere Versionen.

Führen Sie folgende Anweisungen nacheinander aus:

In der Datei: verbindung.php tragen Sie Ihre Zugangsdaten (zur Datenbank) ein. Dort sind auch weitere Einstellungen möglich.
Laden Sie alle Dateien auf Ihrem Webserver hoch.
Rufen Sie die Datei: installation.php in Ihrem Browser auf.
Rufen Sie die Datei: demo.htm in Ihrem Browser auf und tragen Sie Ihre ersten Event in den Kalender ein.

Herunterladen: event-kalender.zip

Viel Spaß damit!

➥ Hinweise, Fehler und Vorschläge, bitte hier in den Kommentaren eintragen.

Hilfe und Tipps

Den Event-Kalender einbinden

Der Kalender lässt sich in jede HTML-Seite einbinden, einfach den Blau hervorgehobenen Text in die Seite einfügen.

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Kalender</title>
  <link rel="stylesheet" href="kalenderstyle.css">
  <script type="text/javascript" src="kalenderscript.js"></script>
 </head>
<body>

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

</body>
</html>

Den Event-Kalender in ein anderes Verzeichnis einbinden

Die Relativen Pfade anpassen, ausgehend vom aktuellen Verzeichnis in dem der Verweis liegt!

<!DOCTYPE html>
<html lang="de">
 <head>
  <meta charset="UTF-8">
  <title>Kalender</title>
  <link rel="stylesheet" href="deinverzeichnis/event-kalender/kalenderstyle.css">
  <script type="text/javascript" src="deinverzeichnis/event-kalender/kalenderscript.js"></script>
 </head>
<body>

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

</body>
</html>

In der Datei: kalenderscript.js (Zeile: 18) folgendes anpassen:

const verzeichnis = "deinverzeichnis/event-kalender/";

Die Anmeldung im Event-Kalender

Einfach auf der Tastatur L drücken um sich anzumelden oder abzumelden.
Oder so wie auf der folgenden Animation zu sehen ist.

Ein Hintergrundbild für den Event-Kalender

Öffne die Datei: "kalenderstyle.css" und entferne die folgenden CSS-Kommentarzeichen:

/* Kalender */
div#kalender {
 box-shadow: 1px 1px 10px #CFCFCF;
 /*background-image: url(hintergrundbild.jpg);
 background-repeat: No-Repeat;
 background-size: Cover;*/
}

/* Tabelle */
table#kalender {
 font-family: Verdana, Sans-Serif;
 background-color: #F5F5F5;
 border-collapse: Collapse;
 empty-cells: Hide;
 width: 100%;
 /*opacity: 0.85;*/
 cursor: Default;
}box-shadow: 1px 1px 0px 0px #c3c3c3;

[Bildschirmfoto]
Der Event-Kalender mit einem Hintergrundbild. — Der Event-Kalender mit einem Hintergrundbild.

Wenn man eine Liste der Events auch auf einer anderen Seite anzeigen möchte, dann sind die folgenden PHP-Scripte hilfreich.

Die Events des aktuellen Monats anzeigen

Dieses Script zeigt die Events des aktuellen Monats an.


<?php

// Event-Kalender

// Events des aktuellen Monats anzeigen



include "verbindung.php"; // Dateipfad eventuell anpassen



$select = $db->query("SELECT `start`, `event`, `beschreibung`

                      FROM `" . $TABLE_PREFIX . "_kalender`

                      WHERE YEAR(`start`) = YEAR(NOW()) AND

                            MONTH(`start`) = MONTH(NOW())

                      ORDER BY `start` ASC");

$events = $select->fetchAll();

foreach ($events as $event) {

 sscanf($event["start"], "%4s-%2s-%2s %5s", $dbJahr, $dbMonat, $dbTag, $dbUhr);

 echo '<p>' . $dbTag . '.' . $dbMonat . '.' . $dbJahr . '&emsp;' . $dbUhr . ' Uhr - ' .

 $event["event"] . '<br>' . $event["beschreibung"] . '</p>';

}

?>

Aktuelle Events anzeigen

Hier können Sie selbst die Anzahl der Events bestimmen die angezeigt werden soll.


<?php

// Event-Kalender

// Aktuelle Events anzeigen (mit Beschreibung)



include "verbindung.php"; // Dateipfad eventuell anpassen



$anzahl = 12; // Anzahl

$select = $db->query("SELECT `start`, `event`, `beschreibung`

                      FROM `" . $TABLE_PREFIX . "_kalender`

                      WHERE `start` >= NOW()

                      ORDER BY `start` ASC

                      LIMIT " . $anzahl);

$events = $select->fetchAll();

foreach ($events as $event) {

 sscanf($event["start"], "%4s-%2s-%2s %5s", $dbJahr, $dbMonat, $dbTag, $dbUhr);

 echo '<p>' . $dbTag . '.' . $dbMonat . '.' . $dbJahr . '&emsp;' . $dbUhr . ' Uhr - ' .

 $event["event"] . '<br>' . $event["beschreibung"] . '</p>';

}

?>

Events der nächsten 31 Tage

Immer Aktuell, die Events der nächsten 31 Tage (individuell einstellbar).


<?php

// Event-Kalender

//  Events der nächsten 31 Tage (individuell einstellbar).



include "verbindung.php"; // Dateipfad eventuell anpassen



$tage = 31; // Tage

$select = $db->query("SELECT `start`, `event`, `beschreibung`

                      FROM `" . $TABLE_PREFIX . "_kalender`

                      WHERE (TO_DAYS(`start`) - TO_DAYS(NOW())) >= 0 AND (TO_DAYS(`start`) - TO_DAYS(NOW())) <= " . $tage . "

                      ORDER BY `start` ASC");

$events = $select->fetchAll();

foreach ($events as $event) {

 sscanf($event["start"], "%4s-%2s-%2s %5s", $dbJahr, $dbMonat, $dbTag, $dbUhr);

 echo '<p>' . $dbTag . '.' . $dbMonat . '.' . $dbJahr . '&emsp;' . $dbUhr . ' Uhr - ' .

 $event["event"] . '<br>' . $event["beschreibung"] . '</p>';

}

?>

Event-Kalender als APP installieren

Voraussetzung: Windows 10 und Microsoft Edge (Chromium).

Die Datei: "demo.htm" mit CSS anpassen.

<style>
body {
 margin:  0 0 850px 0;
}

div#kalender {
 box-shadow: unset;
}
</style>

Ein Icon für die App erstellen - Favicon erstellen
<link rel="SHORTCUT ICON" href="icon.ico" type="image/x-icon"> zwischen <head> und </head> einfügen.
Datei speichern.
Browser: Microsoft Edge (Chromium) öffnen und die Datei in der Adresszeile aufrufen.
Im Menü folgendes auswählen:
Fertig

Einen Wochentag im Kalender farbig hervorheben

Die folgende CSS-Anweisung, in der Datei: kalenderstyle.css, hebt die Wochentage Samstag und Sonntag hervor:

.Samstag,
.Sonntag {
 background-color: #FF9595 !important;
}

Einen Wochentag im Kalender farbig hervorheben

Oder, zum Beispiel für den Donnerstag:

td:nth-child(4) {
 background-color: #FF9595 !important;
}

Um den 10 Monatstag hervorzuheben genügt folgende Anweisung:

#n10 {
 background-color: #FF9595 !important;
}

Steuerung des Kalenders über die Tastatur deaktivieren

Manchmal ist es notwendig, die Tastaturbefehle die der Kalender verwendet zu deaktivieren.
Öffnen Sie die Datei: "kalenderscript.js", suchen Sie nach folgendem Eintrag:

const tastaturnavigation = true;

Ersetzen Sie: true durch: false

Audio-Ausgabe des Kalenders deaktivieren

Öffnen Sie die Datei: "kalenderscript.js", suchen Sie nach folgendem Eintrag:

const audioausgabe = true;

Ersetzen Sie: true durch: false

Events über "Ziehen und Ablegen" verschieben

Events über Ziehen und Ablegen (Drag and Drop) verschieben.

Die Wochennummern ein.- und ausblenden

Die Wochennummern per Ziehen ein.- und ausblenden oder Taste # drücken.

Einen Tag direkt über die Tastatur anwählen

• Einen Tag direkt über die Tastatur (Ziffernblock 0 … 9) anwählen.
• Eine Woche mit STRG + Ziffernblock 0 … 9 anwählen.
• Einen Monat mit ALT + Ziffernblock 0 … 9 anwählen.

Events exportieren


<?php



/*

* Event-Kalender - Events exportieren - kalender2srvics.php (utf-8)



* origin: - » »  werner-zenk.de

* modify: RaHa    



* Scriptname z.B.: /var/www/vhosts/domain.tld/kalender/kalender2srvics.php

* domain.tld ist durch den eigenen Domainnamen zusetzen!

*/



session_start();



// Verbindungsdaten zur Datenbank

require_once("dbinfo.inc.php");



// ersetzen mit eigener Domain

$StrDomain="myDomain";



// ersetzen mit gültigem Path

$StrPath="/var/www/vhosts/".$StrDomain."/ics/";



// Standarddateiname der ICS-Datei, ggf. ändern

$StrFileName=$TABLE_PREFIX;



/*

* Aufruf unter Plesk - Geplante Aufgaben oder crontab (stündlich oder anders): 

* $StrPath.kalender2srvics.php"

* oder $StrPath.kalender2srvics.php?pass=XXX"



* Kalenderdatei wird gespeichert unter $StrPath.$abfragename.ics

* mit Smartphone wird diese als Kalenderabo abonniert: $StrDomain/ics/$abfragename.ics

* Alarm: 1 Tag und 1 Stunde vor dem Event, wird nur gesetzt wenn das Eventdatum nach dem aktuellen Datum liegt

* Prioritäten >15 werden hier nicht gespeichert

* getestet mit iPhone, iPad, Mac OS X, iCal, Thunderbird Mac/Win 

*/



/*

* Events als ICS exportieren

*/



$abfragename="";

// Parameter via URL-Aufruf

if (isset($_REQUEST['pass'])) { $abfragename=$_REQUEST['pass']; }



// Parameter via Scriptaufruf

if (isset($argv[1])) { $abfragename=$argv[1]; }



mb_internal_encoding("UTF-8");



// Verbindung zur Datenbank aufbauen

$db_link = mysqli_connect ($DB_HOST, $DB_BENUTZER, $DB_PASSWORT, $DB_NAME);

mysqli_query($db_link, "SET NAMES 'utf8'");



$sql = "SELECT * FROM ".$TABLE_PREFIX."_kalender ORDER BY start";



$db_erg = mysqli_query( $db_link, $sql );

if ( ! $db_erg )

{

die('Ungültige Abfrage: ' . mysqli_error());

}



$str_suche=chr(13).chr(10);

$str_ersatz='\n';

$eol = '\n';



$cal_timestamp = time();



$cal_ics_content = "BEGIN:VCALENDAR" . $eol . "METHOD:PUBLISH" . $eol . "VERSION:2.0" . $eol. "CALSCALE:GREGORIAN". $eol . "PROID:domain.tld" . $eol;



while ($event = mysqli_fetch_array($db_erg))

{

if ($event["prioritaet"] <16) {



sscanf($event["start"], "%4s-%2s-%2s %2s:%2s", $dbJahr, $dbMonat, $dbTag, $dbStunde, $dbMinute);

sscanf($event["ende"], "%4s-%2s-%2s %2s:%2s", $dbJahr2, $dbMonat2, $dbTag2, $dbStunde2, $dbMinute2);

$cal_start = $dbJahr . $dbMonat . $dbTag . 'T' . $dbStunde . $dbMinute . '00';

$cal_end = $dbJahr2 . $dbMonat2 . $dbTag2 . 'T' . $dbStunde2 . $dbMinute2 . '00';

$cal_current_time = date("Ymd") . 'T' . date("His");

$cal_title=$event["event"];

$cal_location = $event["ort"];

$cal_description = strip_tags($event["beschreibung"]);

$cal_description = preg_replace('/\[.*?\](.*)\[\/.*?\]/isU', '', $cal_description);

$cal_description = str_replace($str_suche, $str_ersatz, $cal_description);



$cal_url = "";



$alarm = "ALARM";

$cal_alarm_datecreate = date_create($dbJahr.'-'.$dbMonat.'-'.$dbTag.' '.$dbStunde.':'.$dbMinute.':00');

$cal_alarm_timestamp = date_timestamp_get($cal_alarm_datecreate);



// wenn aktuelle Zeit vor Event, dann keinen Alarm auslösen

if ($cal_alarm_timestamp<$cal_timestamp){ $alarm = "NOALARM"; }



// wenn in Beschreibung NOALARM als Textzeile vorhanden, dann keinen Alarm auslösen

if (strpos($cal_description, "NOALARM")){ $alarm = "NOALARM"; }    



// z.B.: wenn Priorität = 3, dann wenn Event-Name=Abfragename, dann keinen Alarm auslösen

if ($event["prioritaet"]=3){if ($event["name"] !== $abfragename ){$alarm = "NOALARM";} }





$cal_ics_content .= 'BEGIN:VEVENT'.$eol.

'UID:' .$cal_start.$event["id"].$eol.

'DTSTART:'.$cal_start.$eol.

'DTEND:'.$cal_end.$eol.

'LOCATION:'.$cal_location.$eol.

'DTSTAMP:'.$cal_current_time.$eol.

'SUMMARY:'.$cal_title.$eol.

'URL;VALUE=URI:'.$cal_url.$eol.

'DESCRIPTION:'.$cal_description.$eol;



if ($alarm!=="NOALARM"){

// obige Zeile vor $cal_ics_content .= 'BEGIN:VEVENT'.$eol. verschieben, wenn das gesamte Event nicht gespeichert werden soll

$cal_ics_content .= 'BEGIN:VALARM'.$eol.

'TRIGGER:-PT1H'.$eol.

'ATTACH;VALUE=URI:Basso'.$eol.

'ACTION:AUDIO'.$eol.

'DESCRIPTION:'.$cal_title.$eol.

'END:VALARM'.$eol.

'BEGIN:VALARM'.$eol.

'TRIGGER:-P1D'.$eol.

'ATTACH;VALUE=URI:Basso'.$eol.

'ACTION:AUDIO'.$eol.

'DESCRIPTION:'.$cal_title.$eol.

'END:VALARM'.$eol;

}



$cal_ics_content .= 'END:VEVENT'.$eol;

}    

}



$cal_ics_content .= 'END:VCALENDAR';



// ics-file begin

if ($abfragename !== "" ) { $StrFileName=$abfragename; }

$StrFileName=$StrPath.$StrFileName.".ics";

$IntFileOpenHandle = fopen($StrFileName, "wb");

fwrite($IntFileOpenHandle, $cal_ics_content);

fclose($IntFileOpenHandle);

// ics-file end



?>