JS Animated. How to work with RD Calendar

This tutorial will show you how to work with RD Calendar extension in HTML Website Templates.

HTML Website Templates use RD Calendar extension to implement event calendar functionality:

In order to edit RD Calendar extension, locate index.html file that displays the calendar.

To add month or event into calendar, copy existing code and change dates to required ones.

Basic calendar HTML code structure is the following:

<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>

Map of classes for HTML structure

RD Calendar includes the following structural items for creating the calendar:

• .rdc-today_day – Shows current day of the week;
• .rdc-today_date – Shows current day of the month;
• .rdc-today_month -Shows current month;
• .rdc-today_fullyear – Shows current year;
• .rdc-panel – Shows informing panel;
• .rdc-prev – Shows previous month switcher;
• .rdc-next – Shows next month switcher;
• .rdc-month – Shows a month;
• .rdc-fullyear – Shows a year;
• .rdc-table – Shows month days table;
• .rdc-table_day – Shows single day of the week;
• .rdc-table_date – Shows single day of the month;
• .rdc-table_events – Shows day’s events;
• .rdc-table_has-events – Shows dates with events assigned;
• .rdc-table_events-count – Shows number of events, assigned to specific date;
• .rdc-table_event – Shows day’s event;
• .rdc-table_today – Shows today’s date;
• .rdc-table_prev – Shows previous month dates;
• .rdc-table_next – Shows next month dates;

Days output configuration

By default, RD Calendar displays days as follows:

Sun, Mon, Tue, Wed, Thu, Fri, Sat

In order to specify custom days output format, you should use data-days data attribute for target calendar. Specify it as a line of days, separated by commas in HTML code structure:

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

Months output configuration

By default RD Calendar displays months as follows:

January, February, March, April, May, June, July, August, September, October, November, December

In order to specify custom month output format, you should use data-months data attribute for target calendar. Specify it as a line of months titles, separated by commas in HTML code structure.

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

Calendar events management

In order to assign an event to specific date, you should use the following event code structure at target calendar events list.

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

Please note that data-date=”10/28/2015″ data attribute at .rdc-event event item is a mandatory one. It should be set in MM/DD/YYYY format, otherwise the script will ignore it and won’t display this event in the calendar. An event itself can have any code structure included.

Feel free to check the detailed video tutorial below: