zoukankan      html  css  js  c++  java
  • FullCalendar日历控件使用小结

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

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

    一、在网页中引用FullCalendar

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

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

    三、日历初始化

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

    四、对日历进行汉化

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

    汉化前:

    汉化后:

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

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

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

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

    修改前:

    修改后:

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

    7、添加常用事件

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

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

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

  • 相关阅读:
    lhgdialog的传值问题
    jquery中lhgdialog插件(一)
    有关eclipse的内存溢出问题
    oracle数据库cmd导出数据和导入数据
    java replace方法
    jaspersoft中分组打印
    Android开发小技巧之根据position判断ListView是否在显示
    Android开发中Chronometer的用法
    [转][darkbaby]任天堂传——失落的泰坦王朝(下)
    [转][darkbaby]任天堂传——失落的泰坦王朝(中)
  • 原文地址:https://www.cnblogs.com/allon6318/p/3421205.html
Copyright © 2011-2022 走看看