在实际的工作开发中利用到了日程管理，现在推荐的这一款插件便是一个不可多得的神器。

使用起来简单方便，主题还能够自定义，不管你是程序猿，还是射鸡师，都能做出令自己满意的效果。

引入插件

fullcalendar 是基于 jQuery 制作的，并且结合了 jqueryui 的主题。

所以，jQuery 是必备的，其次便是 fullcalendar 的js代码了。

那么，假设你的路径是这样的

<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>

基本的使用

HTML 中定义一个容器， ID 为 calendar

<div id='calendar'></div>

在 JavaScript 代码中使用以上定义的容器即可

$(document).ready(function() {
    // 页面初始化后加载该插件
    $('#calendar').fullCalendar({
    // 在这里写定制的 options 或者是 callback
    })
});

如何使用候选项

在插件中提供了一个 Options 项

使用时，可根据自己的需求定制，比如是否显示周末

$('#calendar').fullCalendar({
    weekends: false // 隐藏周末
});

如何使用回调函数

使用回调函数的方式非常简单，插件已经给你提供了非常强大的回调方法，例如点击 日 项时

$('#calendar').fullCalendar({
    dayClick: function() {
        alert('a day has been clicked!');
    }
});

函数

举一个十分简便的例子

$('#calendar').fullCalendar('next');

本地化

如果开发时面向不同的用户，那么此插件还可以本地化

• 方案1 – 直接修改 fullcalendar 中的代码，达到需求
• 方案2 – 使用插件中提供的接口实现本地化

当然，我选择了后者，我不想去修改原作者的神马乱七八糟的东西。

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    editable: false,
    aspectRatio: 1.5,
    monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    axisFormat: "H(:mm) 点",
    today: ["今天"],
    buttonText: {
        today: '今天',
        month: '月',
        week: '周',
        day: '日'
    }
}

这些都是一些基本的用法，详细的内容可以深挖一下作者给出的 API 文档。

其他内容请自行参阅原著

• 项目主页
• 基础用法 API