If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

JS Animated. How to work with RD Calendar

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

JS Animated. How to work with RD Calendar

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

JS_Animated._How_to_work_with_RD_Calendar_img1

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:

JS Animated. How to work with RD Calendar