- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
JS Animated. How to work with RD Calendar
February 2, 2016
This tutorial will show you how to work with RD Calendar extension in HTML Website Templates.
JS Animated. How to work with RD CalendarHTML 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | < 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 first" data-date = "10/28/2015" > Event 1 </ li > < li class = "rdc-event last" 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:
1 2 3 | < 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.
1 2 3 4 | < 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!-- RD Calendar --> < div class = "rd-calendar" > ... <!-- Events List Holder --> < div class = "rdc-events" > … <!-- Events List --> < ul > <!-- Create Event --> < li class = "rdc-event first last" 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