Tutorial aktuelle Events aus einem Kalender monatlich anzeigen mit TinyScrollbar

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:

  • tinyscrollbar-master

öffnet das Verzeichnis:

  • examples\simple

und startet dort zunächst die Datei “index.html” um die Beispielseite zu betrachten.

 

Aus dem Verzeichnis:

  • examples\simple
    benötigt Ihr die CSS-Datei und das Verzeichnis mit den 3 Grafiken für die Scrollbar:
     
    • tinyscrollbar.css - hier könnt Ihr u.a. auch die Größe des Fensters zur Anzeige des Inhaltes einstellen
    • images

Aus dem Verzeichnis:

  • lib
    benötigt Ihr die JavaScript-Datei:
    • jquery.tinyscrollbar.js

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

  • verbindung.php

entsprechend an. Bei mir liegt der eigentlich Kalender im Verzeichnis:

  • Kalender-Neu-2017-01/

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>&emsp;' . $dbUhr . ' Uhr - ' .
                         $event["event"] . '<br>' . $event["beschreibung"] . '</p>';
                        }
                        ?>
                     </div>
                </div>
            </div>

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik