fullcalendar使用心得

做项目的时候要实现一个手动设置节假日的功能，于是就用了fullcalendar，功能也比较简单，点一下那个日期就设置为假日，再点一下设置为节日，再点一下就又变成工作日，类似于扫雷那种。数据都能传递到后台，并保存在数据库里面。

<link href='${ctxStatic}/fullcalendar-3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='${ctxStatic}/fullcalendar-3.9.0/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='${ctxStatic}/fullcalendar-3.9.0/lib/moment.min.js'></script>
<script src='${ctxStatic}/fullcalendar-3.9.0/fullcalendar.min.js'></script>

这是引用，我这里没有jquery的引用，因为这个项目的底层已经引用过了。

接下来是js代码

<script type="text/javascript">
    $(function() {

        $('#calendar').fullCalendar({
          height: 600,
          header: {
            left: '',
            center: 'title',
            right: 'prev,next today'
          },
          monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
          monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
          dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
          dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
          today: ["今天"],
          buttonText: {
            today: '今天',
          },
          defaultDate: '${date}',
          navLinks: true, // can click day/week names to navigate views
          selectable: true,
          selectHelper: true,
          /* select: function(start, end) {
            var title = prompt('Event Title:');
            console.log(start);
            console.log(end);
            var eventData;
            if (title) {
              eventData = {
                title: title,
                start: start,
                end: end
              };
              $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
            }
            $('#calendar').fullCalendar('unselect');

          }, */
          editable: true,
          eventLimit: true, // allow "more" link when too many events
          events: function(start, end, timezone, callback) {
              $.ajax({
                    url : "${ctx}/base/holidayMaintain/view.jhtml",
                    type : "POST",
                    data : {"date":$("#date").val(), "compCode":$("#compCodeSId").val()},
                    dataType : "json",
                    success : function(data) {
                        console.log(data);
                        var events = [];
                        $.each(data,function (key,value) {
                            if (value.title == '1') {
                                events.push({
                                    title: "假日",
                                    start: new Date(Date.parse(value.start)),
                                    end: new Date(Date.parse(value.start)),
                                    color: '#1b6aaa'
                                });
                            } else if (value.title == '2') {
                                events.push({
                                    title: "节日",
                                    start: new Date(Date.parse(value.start)),
                                    end: new Date(Date.parse(value.start)),
                                    color: '#1b6aaa'
                                });
                            }

                            /* var eventData;
                            console.log(value.start);
                            eventData = {
                                title: value.title,
                                start: value.start,
                                end: value.end
                            };
                            $('#calendar').fullCalendar('renderEvent', eventData, true); */
                        });
                        callback(events);
                    },
                    error:function(){

                    }
              });
          },
          dayClick: function(date, jsEvent, view) {

              var compCode = $("#compCodeSId").val();
              if (compCode == '') {
                  alertx('警告','请选选择公司!');
                  return;
              }
              window.location.href="${ctx}/base/holidayMaintain/add.jhtml?date="+date.format()+"&compCode="+compCode;

          }
        });


      });
    </script>

因为功能确实比较简单，所以代码也很少，就说几个值得注意的问题。
1、我在一开始设置了height: 600，高度只有600px，其实默认情况下高度要更高，会有底下一部分日期格需要下滑才能看见，那些一开始被挡住的日期格居然点了没反应，至今没有找到问题的症结，所以只能调小它的高度，让页面也开始就能加载整个表格。

2、

events.push({
        title: "节日",
        start: new Date(Date.parse(value.start)),
        end: new Date(Date.parse(value.start)),
        color: '#1b6aaa'
    });

在把后台数据设置到event中去的时候，要注意日期的格式，必须是fullcalendar认可的格式。

3、我用的这个3.9.0版本，events: function(start, end, timezone, callback)里面应该有四个参数，比一些低版本多出了timezone。

文档连接
中文文档