Dieses Skript kann hilfreich sein, wenn man den Event-Kalender von Werner-Zenk.de bereits eingebaut hat, jedoch zusätzlich auf weiteren Seite nur die selbst eingetragenen Ereignisse anzeigen möchte.
In diesem Beispiel werden die aktuellen Ereignisse in der Zukunft angezeigt, die bereits im Kalender eingetragen wurden. So spart man sich viel Zeit die gleichen Ereignisse vielleicht doppelt eingeben zu müssen.
Beschreibung für NOF 2015 (Update 1) mit einer validen jQuery-Datei:
Für die TinyScrollbar müsst Ihr Euch, zum bessern Verständnis, die Skripte hier downloaden: github.com/wieringen/tinyscrollbar.
Entpackt die ZIP-Datei und öffnet das Verzeichnis:
öffnet das Verzeichnis:
und startet dort zunächst die Datei “index.html” um die Beispielseite zu betrachten.
Aus dem Verzeichnis:
Aus dem Verzeichnis:
Kopiert diese Dateien und das Verzeichnis “images” in das Verzeichnis Eures Projektes, indem die Seite liegt auf der Ihr das alles einbaut. Fügt die Verlinkungen zu diesen Dateien und das JavaScript “Zwischen Head Tags” Eurer Layout-HTML ein.
<!-- Tiny Scrollbar -->
<link rel="stylesheet" href="tinyscrollbar.css" type="text/css" media="screen"/>
<script type="text/javascript" src="jquery.tinyscrollbar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
Für den Einbau in NOF stellt Ihr diese Seite auf die Dateierweiterung .php und kopiert lediglich dieses Skript in den HTML-Code Editor eines Textfeldes und passt den relativen Pfad zu der Datei
entsprechend an. Bei mir liegt der eigentlich Kalender im Verzeichnis:
Unten das Skript, das alle noch ausstehenden Events inklusive Beschreibung darstellt. Passt wieder den relativen Pfad zur Datei verbindung.php an, hier aus einem Unterverzeichnis dieses Projektes und tragt die maximal anzuzeigenden Events unter LIMIT ein (hier 20).
Setzt nun diese DIVs für die “TinyScrollbar” um das PHP-Skript herum.
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
<?php
// extra Anzeige von Tommy
date_default_timezone_set("Europe/Berlin");
echo 'Die nächsten 20 Events ab dem' . ' ' . date("d.m.Y") . '<br><br>';
// Event Kalender
// Aktuelle Events anzeigen (mit Beschreibung)
include "../../Kalender-Neu-2017-01/verbindung.php"; // Dateipfad eventuell anpassen
$select = $db->query("SELECT `datum`, `event`, `beschreibung`
FROM `" . $TABLE_PREFIX . "_kalender`
WHERE `datum` >= NOW()
ORDER BY `datum` ASC
LIMIT 20"); // LIMIT 20 eventuell anpassen
$events = $select->fetchAll(PDO::FETCH_ASSOC);
foreach ($events as $event) {
sscanf($event["datum"], "%4s-%2s-%2s %5s", $dbJahr, $dbMonat, $dbTag, $dbUhr);
echo '<p><b>' . $dbTag . '.' . $dbMonat . '.' . $dbJahr . '</b> ' . $dbUhr . ' Uhr - ' .
$event["event"] . '<br>' . $event["beschreibung"] . '</p>';
}
?>
</div>
</div>
</div>
Viel Spaß!