FullCalendar 的学习笔记（一）

前一段时间，一个老项目需要新增一个小功能，日程表~

于是网上找了下，发现FullCalendar这个控件还不错于是就拿来用了下，下面简单介绍下我的学习笔记。

首先就是了解下FullCalendar的API

比较详细的我推荐的是

http://www.cnblogs.com/yuanxianlai/archive/2012/03/31/2427117.html

然后自己先把日历控件加载出来

记得先引用如下

<script type="text/javascript" src='fullcalendar/lib/jquery-1.3.2.min.js'></script>
<script type="text/javascript" src='fullcalendar/lib/jquery.min.js'></script>
<script type="text/javascript" src='fullcalendar/lib/jquery-ui.custom.min.js'></script>
<script type="text/javascript" src='fullcalendar/fullcalendar.min.js'></script>
<script type="text/javascript" src='calendar.js'></script>
<link href="fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />

PS：我发布到具体的IIS服务器时，出现了加载jquery-1.3.2.min.js为定义的错误，此时可替换jquery-1.10.2.min.js 即可

$(function() {
           var date = new Date();
           var d = date.getDate();
           var m = date.getMonth();
           var y = date.getFullYear();

            $('#fullCalendarDemo').fullCalendar({                                  //初始化日历
                    header: { 　　　　　　　　　　　　　　　　　　　　//日历最上面表示头部
                        left: 'prev,next today', 　　　　　　　　　//左边是 前一月/周/日，后一月/周/日  以及  回到今天按钮
                        center: 'prevYear,title,nextYear', 　　　//中间是  去年的本月/周/日  当前试图的时间   明年的本月/周/日
                        right: 'month,agendaWeek,agendaDay' 　　//切换日历显示月/周/日视图
                    },
                    monthNames: ["一月", "二月", "三月", "四月", 　//设置月份名称，中英文均可
                        "五月", "六月", "七月", "八月", "九月",
                        "十月", "十一月", "十二月"
                    ],
//                    monthNamesShort: ["一月", "二月", "三月", 　　//设置月份的简称
//                        "四月", "五月", "六月", "七月", "八月",
//                        "九月", "十月", "十一月", "十二月"
//                    ],
//                    dayNames: ["周日", "周一", "周二", "周三", 　　//设置星期名称
//                        "周四", "周五", "周六"
//                    ],
                    dayNamesShort: ["周日", "周一", "周二", 　　　　//设置星期简称
                        "周三", "周四", "周五", "周六"
                    ],
                    today: ["今天"], 　　　　　　　　　　　　　　　　//today 按钮的显示名称
                    firstDay: 0, 　　　　　　　　　　　　　　　　　　//设置每星期的第一天是星期几，0 是星期日
                    buttonText: { 　　　　　　　　　　　　　　　　　//设置按钮文本
                        today: '今天',
                        month: '月',
                        week: '周',
                        day: '日',
                        prev: '上一月',
                        next: '下一月'
                    },
//                   height: windowHeigth, 　　　　　　　　　　　　//设置日历高度，宽度是自适应的，不好改，windowHeight 是我计算的值
                    currentTimezone: 'Asia/Beijing', 　　　　　　//设置时区
//                   theme: true, 　　　　　　　　　　　　　　　　　//true 时日历主题可随 jQuery ui 的主题变化
                    selectable: true, 　　　　　　　　　　　　　　//元素是否可以被选中
                    selectHelper: true, 　　　　　　　　　　　　　//选中元素时是否显示相关信息
                    select: function(startDate, endDate, 　　　//选中某元素的方法，startDate 事项的起始时间，endDate 事项的结束时间
                        allDay, jsEvent, view) { 　　　　　　　　// allDay 事项是否为全天事项，jsEvent 控件的内置对象，view 当前视图
                        var startD = $.fullCalendar
                            .formatDate(startDate,
                                'yyyy-MM-dd HH:mm:ss'); 　　　　//formatDate 是格式化时间的方法
                        var endD = $.fullCalendar
                            .formatDate(endDate,
                                'yyyy-MM-dd HH:mm:ss');
                        //TODO      添加选中某元素时需要进行操作的方法，比如：添加会议、备注等事项
                        alert("1");
                    },
                    eventClick: function(event) { 　　　　　　　　//点击事项的方法
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                'yyyy-MM-dd HH:mm:ss');
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                'yyyy-MM-dd HH:mm:ss');
                        //TODO      添加点击某事项时需要进行操作的方法，比如：修改会议、备注等事项
                        alert("2");
                    },
                    editable: true, 　　　　　　　　　　　　　　　　//事项是否可编辑，改变大小、拖拽等
                    eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
　　　　　　　　　　　　//事项大小改变后的方法，往往修改事项的起止时间，event 改变的事项，dayDelta 变化的天数，minuteDelta 变化的分钟数，revertFunc 回调函数
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                'yyyy-MM-dd HH:mm:ss');
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                'yyyy-MM-dd HH:mm:ss');

                        //TODO      添加改变某事项大小时需要进行操作的方法，比如：修改会议、备注等事项
                        alert("3");

                        if (!confirm("is this okay?")) {
                            revertFunc();        　　　　　　　　//如果不要改变，则将事项还原
                        }

                    },
                    eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {    //拖拽事项之后的方法，allDay 是否全天事项，其他参数同上
                        var startD = $.fullCalendar
                            .formatDate(event.start,
                                'yyyy-MM-dd HH:mm:ss');
                        var endD = $.fullCalendar
                            .formatDate(event.end,
                                'yyyy-MM-dd HH:mm:ss');

                        //TODO      添加拖拽某事项之后需要进行操作的方法，比如：修改会议、备注等事项
                        alert("4");

                        if (!confirm("is this okay?")) {
                            revertFunc();
                        }

                    },
                    events: //function(start, end, callback) { }//获取事项的数据，这里是用的 function ，可以是 array ，也可以是 json
                    [{
                    title: '张丽值班',
                    start: new Date(y, m, 1)
                    },
                    {
                    title: '小吴值班',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                    }

                    ]
                });
        });