FullCalendar日历控件使用小结

时间 2019-11-14

标签 fullcalendar 日历控件使用小结繁體版

原文原文链接

FullCalendar做为一个功能完善的日历插件使用很是普遍，在WEB开发过程当中很是流行。它与EXT JS中的Calendar很是相似，但考虑到EXTjs比较“复杂庞大”，因此我在开发过程当中都会优先考虑FullCalendar。jquery

FullCalendar的使用比较简单，上手很快。我这里简单向你们介绍一下它的基本用法，若是须要更加深刻的学习或者改写该日历，还须要你们线下多学习。学习

1、在网页中引用FullCalendarui

引用的第一个文件为jquery-ui样式文件，用觉得fc日历改变主题样式，第二个文件为fc日历的基础样式文件，规定了在网页上画出日历框图时的相关样式。第四个文件，是fc脚本。url

2、在网页上放置日历容器spa

3、日历初始化插件

经过以上三个步骤咱们就能够在页面上添加一个简单的日历。这个日历如今不能作多少事情，只能显示月份，星期几。咱们须要的远远不止这些。因此接下来，咱们须要对它进行完善。3d

4、对日历进行汉化blog

FC是英文版的，可是咱们在开发过程当中绝大部分都是中文环境，因此咱们须要作适当的汉化工做。事件

汉化前：开发

汉化后：

（1）firstDay指的是在日历视图中，将第几天做为开始。欧美国家周日是做为一周的开始，咱们则习惯周一做为一周的开始，因此firstDay改成1，这里的1是指dayNames中的序号。

（2）修改月份和星期，还有TODAY。

5、12小时转化为24小时使用

为了更加方便时钟显示，不采用AM和PM来对上午和下午进行标识。统一采用24小时计时。

修改前：

修改后：

六、设置日历显示格式，根据当月周数来显示对应的行数，添加日历主题样式

七、添加经常使用事件

通过上面这几步，一个功能较全的日历控件就作好了。你能够根据本身的须要在各事件中添加本身想要添加的方法。