We are ready to provide you with a new hack. It will show you how to work with RD Calendar in HTML templates. You can use RD Calendar extension for implementing calendar functionality to your site.
To edit existing calendar to your needs, please open .html file that displays a calendar in any code editor on your computer. Locate basic calendar HTML structure:
Also, you can use that code for adding a calendar to your site pages.
Basic RD Calendar settings
Let’s go through this code and learn how to manage basic calendar settings. To create a calendar you will need structural items:
.rdc-today_day — displays the current day of the week;
.rdc-today_date — displays the current day of the month;
.rdc-today_month — displays the current month;
.rdc-today_fullyea — displays the current year;
.rdc-panel — displays the info panel;
.rdc-prev — displays the previous month switcher;
.rdc-next — displays the next month switcher;
.rdc-month — displays the calendar month;
.rdc-fullyear — displays the calendar year;
.rdc-table — displays the days of the month table;
.rdc-table_day — displays the day of the week in the calendar;
.rdc-table_date — displays the day of the month in the calendar;
.rdc-table_events — displays events of the day of the month in the calendar;
.rdc-table_has-events — displays a calendar day that contains events;
.rdc-table_events-count — displays the amount of events in a calendar day;
.rdc-table_event — displays an event in a day of a month in the calendar;
.rdc-table_today — displays the current day of a month in the calendar;
.rdc-table_prev — displays the days of the previous month of the calendar;
.rdc-table_next — displays the days of the next month of the calendar.
Months and days set up
RD Calendar extension allows you to set up months and days format. By default, days of the week are displayed in the following way in RD Calendar:
Sun, Mon, Tue, Wed, Thu, Fri, Sat.
Also, you have following month’s order:
January, February, March, April, May, June, July, August, September, October, November, December.
But you can easily set up custom display format. To do that use data-months and data-days attributes. The value should be represented as a line of the days or months, separated by commas. Here is an example of the code you will get after adding those attributes:
You may also noticed data-first-day-monday attribute in the code above. This attribute is used to start RD-Calendar week from Monday. It has true and false options. By default RD-Calendar starts on Sunday. Set data-first-day-monday to true to enable calendar display from Monday.
Please, note! RD Calendar display format can take any format. You can use some custom content or translate days and months to your language. Your text has to be separated by commas.
Managing events in the calendar
To add events to your calendar, please, use following HTML code:
Pay special attention to the code that comes after <!-- Create Event --> comment. data-date attribute should have MM/DD/YYYY format (where MM is a month, DD – day and YYYY is a year). Otherwise, the script will ignore it and won’t display this event in the calendar.
You can add any content you wish to an event body.
You know how to work with RD Calendar now. New tutorials are coming soon.
