FullCalendar日历控件使用小结

摘要:
FullCalendar作为一个功能完善的日历插件使用非常广泛,在WEB开发过程中非常流行。它与EXTJS中的Calendar非常类似,但考虑到EXTjs比较“复杂庞大”,所以我在开发过程中都会优先考虑FullCalendar。FullCalendar的使用比较简单,上手很快。统一采用24小时计时。

FullCalendar作为一个功能完善的日历插件使用非常广泛,在WEB开发过程中非常流行。它与EXT JS中的Calendar非常类似,但考虑到EXTjs比较“复杂庞大”,所以我在开发过程中都会优先考虑FullCalendar。

FullCalendar的使用比较简单,上手很快。我这里简单向大家介绍一下它的基本用法,如果需要更加深入的学习或者改写该日历,还需要大家线下多学习。

一、在网页中引用FullCalendar

FullCalendar日历控件使用小结第1张

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

二、在网页上放置日历容器

FullCalendar日历控件使用小结第2张

三、日历初始化

FullCalendar日历控件使用小结第3张

通过以上三个步骤我们就可以在页面上添加一个简单的日历。这个日历现在不能做多少事情,只能显示月份,星期几。我们需要的远远不止这些。所以接下来,我们需要对它进行完善。

四、对日历进行汉化

FC是英文版的,但是我们在开发过程中绝大部分都是中文环境,所以我们需要做适当的汉化工作。

汉化前:

FullCalendar日历控件使用小结第4张

汉化后:

FullCalendar日历控件使用小结第5张

(1)firstDay指的是在日历视图中,将第几天作为开始。欧美国家周日是作为一周的开始,我们则习惯周一作为一周的开始,所以firstDay改为1,这里的1是指dayNames中的序号。

(2)修改月份和星期,还有TODAY。

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

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

修改前:

FullCalendar日历控件使用小结第6张

修改后:

FullCalendar日历控件使用小结第7张

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

FullCalendar日历控件使用小结第8张

7、添加常用事件

FullCalendar日历控件使用小结第9张

经过上面这几步,一个功能较全的日历控件就做好了。你可以根据自己的需要在各事件中添加自己想要添加的方法。

源代码:http://files.cnblogs.com/allon6318/fcstudy1.rar

FC官网:http://arshaw.com/fullcalendar/

免责声明:文章转载自《FullCalendar日历控件使用小结》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Lua 公历转农历算法Win10上启动UICrawler自动遍历时报 "org.openqa.selenium.WebDriverException: An unknown server-side error occur red while processing the command. Original error: Could not sign with default certifi cate."下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

FullCalendar日历插件说明文档

FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档,以供参阅。当前版本1.6.4。 普通显示设置 属性 描述 默认值 header 设置日历头部信息。如果设置为false,则不显示头部信息。包...

jquery日历插件FullCalendar使用技巧

原文链接:http://blog.csdn.net/u013493957/article/details/44920341 FullCalendar是一款基于jquery的日历控件,它有着很强大的功能,下面我来给大家介绍一下FullCalendar使用技巧吧,希望此方法对各位有帮助呀。 简介 官方网站:http://arshaw.com/fullcale...

fullcalendar日历控件知识点集合

1、基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码。当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性、方法、托付(函数回调)作为成员变量。通过为这些成员变量赋值,就可以实例化出一个符合自己需求的fullcalendar实例出来,即终于在浏览器里渲染出的日历。换...

FullCalendar应用——整合农历节气和节日

FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性。 HTML 首先是要载入jQuery库和fullcalendar插件。 <scriptsrc='js/jquery-1.9.1.min.js'&g...