JS Animated. Wie man mit der Erweiterung RD Kalender arbeitet

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

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

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:

    

        
        
        

        

        

        

        

        

    
    

    

        
        

            

                Event 1
            
            

                Event 2
            
        
    

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:

    ...

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:

    ...

Ereignisverwaltung im Kalender

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

    ...
    
    

        …
        
        

            
            

                Event 1
            
        
    

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: