JS Animated. 如何使用RD日历
February 2, 2016
本教程将向您展示如何使用 RD Calendar extension in HTML网站模板.
JS Animated. 如何使用RD日历HTML Website Templates use RD Calendar 扩展实现 event 日历功能:
In order to edit RD Calendar extension, locate index.html 显示日历的文件.
To add month or event 将现有代码复制到日历中,并将日期更改为所需日期.
Basic calendar HTML 代码结构如下:
HTML结构的类映射
RD Calendar包含以下用于创建日历的结构项:
- .rdc-today_day -显示当前星期几;
- .rdc-today_date -显示当前日期的月份;
- .rdc-today_month -显示当前月份;
- .rdc-today_fullyear -显示当年;
- .rdc-panel -显示通知面板;
- .rdc-prev -显示上月切换;
- .rdc-next -显示下个月的切换;
- .rdc-month – Shows a month;
- .rdc-fullyear – Shows a year;
- .rdc-table -显示月天数表;
- .rdc-table_day -显示一周中的某一天;
- .rdc-table_date -显示一个月中的某一天;
- .rdc-table_events -显示当天的事件;
- .rdc-table_has-events -显示指定活动的日期;
- .rdc-table_events-count -显示指定日期的事件数量;
- .rdc-table_event – Shows day’s event;
- .rdc-table_today -显示今天的日期;
- .rdc-table_prev -显示上个月的日期;
- .rdc-table_next -显示下个月的日期;
天数输出配置
缺省情况下,RD日历显示日期如下:
Sun, Mon, Tue, Wed, Thu, Fri, Sat
以指定自定义日期输出格式, 您应该为目标日历使用data-days数据属性. 指定为一行天,用逗号分隔 HTML code structure:
...
月输出配置
默认情况下,RD日历显示月份如下:
January, February, March, April, May, June, July, August, September, October, November, December
以指定自定义的月份输出格式, 您应该为目标日历使用data-months数据属性. 将其指定为以逗号分隔的月份标题行 HTML code structure.
...
日历事件管理
为了分配一个 event 对于特定日期,您应该使用以下内容 event 目标日历事件列表中的代码结构.
...…
- Event 1
Please note that 数据日期= " 10/28/2015 " data attribute at .rdc-event event 项目是强制性的. It should be set in MM/DD/YYYY 格式,否则 script 忽略它,不显示这个 event in the calendar. An event 本身可以包含任何代码结构.
请随时查看下面的详细视频教程:
JS Animated. 如何使用RD日历