JS Animated. 如何使用RD日历

本教程将向您展示如何使用 RD Calendar extension in HTML网站模板.

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 代码结构如下:

    

        
        
        

        

        

        

        

        

    
    

    

        
        

            

                Event 1
            
            

                Event 2
            
        
    

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 本身可以包含任何代码结构.

请随时查看下面的详细视频教程: