关于fullCalendar的一些简单介绍

最近参与一个任务分配的项目，开发其中的日历模块，选用了fullCalendar这个日历控件，在此记录一下在项目中的用到该控件的地方，方便以后使用时查阅。

---

一、下载地址

https://fullcalendar.io/download，下载解压后复制进项目中直接就可使用。

---

二、fullCalendar的使用

由于我使用的前端框架时easyui，所以每个前端页面包含了一个js和一个jsp文件。在jsp文件里非常简单，导入相应的js和css文件即可。

js文件里是fullcalendar的各项使用配置，如下所示。

//日历控件配置初始化
$('#calendar').fullCalendar({
        //设置头部信息
        header:{
            left:'prev,next today',
            center:'title',
            right:'agendaDay,agendaWeek,month,listMonth'
        },
        //设置头部按钮显示文字
        buttonText:{
            today:'今天',
            month:'月',
            week:'周',
            day:'日',
            list:'事件列表'
        },
        //设置头部title显示格式
        views:{
            month:{
                titleFormat:'YYYY年 MM月'
            },
            week:{
                titleFormat:'YYYY年 MM月 DD日'
            },
            day:{
                titleFormat:'YYYY年 MM月 DD日'
            }
        },
        monthNames:['1','2','3','4','5','6','7','8','9','10','11','12'],        //设置月份显示内容
        monthNamesShort:['1','2','3','4','5','6','7','8','9','10','11','12'],   //设置月份显示内容
        dayNames:['周日','周一','周二','周三','周四','周五','周六'],                //设置周显示内容
        dayNamesShort:['周日','周一','周二','周三','周四','周五','周六'],           //设置周显示内容
        defaultDate:nowDate,                                                    //设置日历初始日期
        slotLabelFormat:'H:mm',                                                 //设置日历Y轴时间显示格式
        allDaySlot:false,                                                       //设置全天事件取消
        navLinks:false,                                                         //设置不能通过点击事件跳转到日视图
        businessHours:true,                                                     //设置强调时间段
        editable:false,                                                         //设置事件不能被编辑
        overlap:false,                                                          //设置事件不可拖动
        firstDay:1,                                                             //设置日历每行开始为周几
        timeFormat:'H:mm',                                                      //设置事件显示日期格式
         
        //鼠标悬停事件，显示悬浮框
        eventMouseover:function(event,jsEvent,view){
            var str = "任务名称：" + event.title + "\n开始时间：" + timestampToNewTime(event.start_time) + "\n结束时间：" +    timestampToNewTime(event.end_time) + "\n任务描述：" + event.task_desc + "\n发起人：" + event.create_name + "\n处理人：" + event.do_name;
            $(this).attr('title',str);
            $(this).css('font-weight','normal');
        },
 
        //事件点击，触发弹出层
        eventClick:function(event,jsEvent,view){
            //...此处省略事件点击后的处理代码
            //event是点击的事件对象
            //jsEvent是点击事件的坐标信息
            //view是当前的视图对象
        }
    });
 
 
    //设置按钮点击事件:prev
    //其他按钮也可以该方式进行设置，且点击按钮不会覆盖原有的操作（依旧会切换视图并执行下列操作）
    $('#calendar').find('.fc-prev-button').click(function(){
        //清除日历上所有事件（事件源还存在，只是在日历上不显示）
        $('#calendar').fullCalendar('removeEvents');
        clearAllEvents();
         
        //获取日历当前的日期（很方便的一个功能，进行视图转换等操作后直接可获取日历当前的日期）
        var moment = $('#calendar').fullCalendar('getDate');
        var date = moment.format().split("T")[0];
         
        //当前日历日期和视图名称
        var dd = strToDate(date);
        var view = $('#calendar').fullCalendar('getView');
         
        var range_start_date;
        var range_end_date;
         
        //根据不同视图确定日期范围
        if (view.name == 'month'){
            //...此处省略事件点击后的处理代码
        }
        if (view.name == 'agendaWeek'){
            //...此处省略事件点击后的处理代码
        }
        if (view.name == 'listMonth'){
            //...此处省略事件点击后的处理代码
        }
        if (view.name == 'agendaDay'){
            //...此处省略事件点击后的处理代码
        }
         
        getEventData(query_task_url,range_start_date,range_end_date);
        
        //生成一个事件,其中title和start是必须属性
        //fullCalendar中的event必须带有title和start属性,还有一些属性可选填如color是设置事件显示背景颜色
        //除了自带的一些属性,还可以向event中加入一些自定义的属性,fullcalendar不会覆盖这些属性，读取事件时也可以获得这些属性
        var event={
            id:id,
            title:title,
            start:start,
            end:end,
            //...
            color:'blue'
        }

        //fullcalendar中的事件主要是以事件源为主，事件源可以是数组、文件或是函数
        var events=[];
        events.push(event);
        //向日历中添加事件源，使事件源中所有对象在日历中显示
        $('#calendar').fullCalendar('addEventSource',events);
    });

---

以上简单的介绍了一下fullCalendar的使用配置，如果有对该组件感兴趣的朋友，可以去https://www.helloweba.net/javascript/445.html中学习一下，这里面对于该组件的介绍还是比较全面的。