Categories

Ausgewählte Vorlagen

JS Animated. Wie man mit der Erweiterung RD Kalender arbeitet

Vicki Hayes Februar 2, 2016
Rating: 5.0/5. From 3 votes.
Please wait...

Von diesem Tutorial erfahren Sie, wie man mit der Erweiterung RD Kalender in HTML Homepage-Vorlagen arbeitet.

JS Animated. Wie man mit der Erweiterung RD Kalender arbeitet

In den HTML Homepage-Vorlage wird die Erweiterung RD Kalender benutzt. Sie ermöglicht es Ihnen, die Funktionalität des Ereigniskalenders zu realisieren:

JS_Animated._How_to_work_with_RD_Calendar_img1

Um die Änderungen an der Erweiterung RD Kalender vorzunehmen, finden Sie die Datei index.html, die den Kalender darstellt.

Um einen Monat oder ein Ereignis zum Kalender hinzuzufügen, kopieren Sie den folgenden Code und ersetzen Sie die Daten durch die gewünschten.

Die ursprüngliche HTML Codestruktur sieht so aus:

<div class="rd-calendar">
    <div class="rdc-panel">
        <a class="rdc-next"></a>
        <a class="rdc-prev"></a>
        <div class="rdc-today_day"></div>
        <div class="rdc-today_date"></div>
        <div class="rdc-today_month"></div>
        <div class="rdc-today_fullyear"></div>
        <div class="rdc-month"></div>
        <div class="rdc-fullyear"></div>
    </div>
    <div class="rdc-table"></div>
    <div class="rdc-events">
        <a class="rdc-events_close"></a>
        <ul>
            <li class="rdc-event" data-date="10/28/2015">
                Event 1
            </li>
            <li class="rdc-event" data-date="10/31/2015">
                Event 2
            </li>
        </ul>
    </div>
</div>

Karte der Klassen für die HTML Struktur

Der RD Kalender enthält die folgenden Strukturelemente, die es Ihnen ermöglichen, einen Kalender zu erstellen:

  • .rdc-today_day – zeigt den aktuellen Wochentag an;
  • .rdc-today_date – zeigt den aktuellen Tag des Monats an;
  • .rdc-today_month – zeigt den aktuellen Monat an;
  • .rdc-today_fullyear – zeigt das aktuelle Jahr an;
  • .rdc-panel – zeigt das Informationspanel an;
  • .rdc-prev – zeigt das Verwaltungselement «Vorheriger Monat» an;
  • .rdc-next – zeigt das Verwaltungselement «Nächster Monat» an;
  • .rdc-month – zeigt einen Monat an;
  • .rdc-fullyear – zeigt ein Jahr an;
  • .rdc-table – zeigt die Tabelle der Monatstage an;
  • .rdc-table_day – zeigt einen Wochentag an;
  • .rdc-table_date – zeigt einen Monatstag an;
  • .rdc-table_events – zeigt Ereignisse des Tages an;
  • .rdc-table_has-events – zeigt Tage an, zu denen Ereignisse hinzugefügt wurden;
  • .rdc-table_events-count – zeigt die Anzahl der Ereignisse an, die mit einem bestimmten Tag verbunden wurden;
  • .rdc-table_event – zeigt Ereignisse des Tages an;
  • .rdc-table_today – zeigt das aktuelle Datum an;
  • .rdc-table_prev – zeigt Tage des vorherigen Monats an;
  • .rdc-table_next – zeigt Tage des nächsten Monats an;

Anzeigeoption der Tage

Standardmäßig wird der RD Kalender Tage wie folgt dargestellt:

So, Mo, Di, Mi, Do, Fr, Sa

Um ein benutzerdefiniertes Datumsanzeigeformat festzulegen, verwenden Sie das Attribut data-days für den Kalender. Legen Sie die Reihenfolge der Tage fest, indem Sie jeden von ihnen mit einem Komma in der HTML Codestruktur trennen:

<div class="rd-calendar" data-days="Sn, Mn, Te, Wd, Th, Fr, St">
    ...
</div>

Anzeigeoption der Monate

Standardmäßig wird der RD Kalender Monate wie folgt dargestellt:

Januar, Februar, März, April, Mai, Juni, Juli, August, September, Oktober, November, Dezember

Um eine benutzerdefinierte Anzeige der Monate festzulegen, verwenden Sie das Attribut data-months für den Kalender. Legen Sie die Reihenfolge der Monate fest, indem Sie jeden von ihnen mit einem Komma in der HTML Codestruktur trennen:

<div class="rd-calendar" data-months="Jan, Feb, Mar, Apr, May,
        Jun, Jul, Aug, Sep, Oct, Nov, Dec">
    ...
</div>

Ereignisverwaltung im Kalender

Um das Ereignis mit einem Datum zu verbinden, nutzen Sie di folgende Codestruktur des Ereignisses in der Ereignisliste des Kalenders.


<div class="rd-calendar">
    ...
    
    <div class="rdc-events">
        …
        
        <ul>
            
            <li class="rdc-event" data-date="10/28/2015">
                Event 1
            </li>
        </ul>
    </div>
</div>

Achten Sie: das Datumsattribut data-date=”10/28/2015″ im Ereignis .rdc-event obligatorisch ist. Der Wert des Attributs muss im Format MM/DD/YYYY festgelegt werden, sonst wird das Ereignis in der Ereignisliste im Kalender nicht angezeigt. Das Ereignis kann jede Codestruktur haben.

Sie können auch das ausführliche Video-Tutorial nutzen:

JS Animated. Wie man mit der Erweiterung RD Kalender arbeitet
Dieser Eintrag wurde um JS Animated Tutorials geschrieben und Calendar, HTML, RD markiert. Bookmarken Sie den permalink.

Submit a ticket

Sollte Ihre Frage durch die Tutorials nicht ausreichend beantwortet worden sein, benutzen Sie bitte den folgenden Link, um sich an unser Beratungsteam (Support) zu wenden. Wir bieten Ihnen unsere Hilfe und Unterstutzung an. 24 Stunden am Tag, 7 Tage die Woche!
Ticket Einrichten