ThinkPHP中Full Calendar的使用

[size=x-large]   这次所做的项目涉及到使用日历插件的问题，在朋友的推荐下使用了fullcalendar这个插件，网上的各种评价fullcalendar都还不错，但是具体的使用就有点迷茫，经过了一个多月的摸索，终于摸清了一些fullcalendar的功能，下面给大家介绍一下，有不对的地方还请多多指教。

• 1、文件准备

我是在网上下的组件shamcey。下载好的shamcey文件，只需要calendar.html和它的一系列js文件和css文件（所包含的css文件：style.default.css。Js文件：jquery-1.9.1.min.js/jquery-migrate-1.1.1.min.js/jquery-ui-1.9.2.min.js/modernizr.min.js/bootstrap.min.js/fullcalendar.min.js/jquery.cookie.js/custom.js）我使用的是thinkPHP3.1的框架，把这些文件加入到thinkphp3.1的框架中
在calendar.html里面进行的操作,引用的文件

  <link rel="stylesheet" href="Css/style.default.css" type="text/css" />
    <script type="text/javascript" src="Js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="Js/jquery-migrate-1.1.1.min.js"></script>
    <script type="text/javascript" src="Js/jquery-ui-1.9.2.min.js"></script>
    <script type="text/javascript" src="Js/modernizr.min.js"></script>
    <script type="text/javascript" src="Js/bootstrap.min.js"></script>
    <script type="text/javascript" src="Js/fullcalendar.min.js"></script>
    <script type="text/javascript" src="Js/jquery.cookie.js"></script>
    <script type="text/javascript" src="Js/custom.js"></script>
    <script type="text/javascript" src="Js/moment.min.js"></script>

• 2、调整页面

因为fullcalendar是外国人研发的，而老总需要的是中文的日期显示，所以一开始是改日期显示，改变日期显示是修改fullcalendar.min.js里面的

 monthNames: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
        monthNamesShort: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
        dayNames: ["日", "一", "二", "三", "四", "五", "六"],
        dayNamesShort: ["日", "一", "二", "三", "四", "五", "六

按照我们的习惯一月-十二月改成）01-12，星期从Mon-Sun改成一-日；

• 3、添加我们想要的数据

使用Fullcalendar时主要要用的几个操作：select、eventClick、dayClick
Select：
首先是选中某一天的函数select：callback，被选中的函数回调

select: function(start, end, allDay) {
    var n1 = start.setSeconds(start.getSeconds()+1);
    var myDate1 = new Date(n1);
    var today = moment(start).format('YYYY-MM-DD');
    var nmounth = moment(start).format('YYYY-MM');//2016-04
    jQuery.ajax({
        type:"POST",
        url:"{Lanrain::U('Zhiban/checkIfHaveZb')}",
        data:"nowDate="+today+"&nmonth="+nmounth,
        success:function(data){
            alert(data);
        }
    });
    jQuery("#month").val(nmounth);
    calendar.fullCalendar('unselect');},

Start 必须，事件的开始时间。  End可选，结束时间。 allDay可选，true or false，是否是全天事件。
Start获取到选中日期的时间，这里获取到的时间是Unix时间戳，但是我们一般会转换成我们想要的时间2016-05-17这样的格式，用moment(start).format('YYYY-MM-DD')来转换，这里需要再引入一个moment.js文件，因为之前的fullcalendar不支持这样的转换了；
选中某个日期添加自己的数据，选中的时候弹出一个表单，录入自己要存储的信息。
在点击的时候就把时间赋值给这个文本框（不过还是最好存Unix时间戳，显示的时候是按照Unix时间戳来显示的）表单提交，然后在后台接收数据。
我的三个文本框的东西要生成三条数据，所以采用了数组提交的方式，循环获取添加。
表单数据：

<input type="text" name="watch[]" id="daDui"/>
<input type="text" name="watch[]" id="daDui1"/>
<input type="text" name="watch[]" id="daDui2"/>

Php接收数据并添加，存入数据库：框架的action里面建一个方法接收数据

public function newInfo(){
    $zherInfo = $_POST['watch'];
    if($zherInfo[0] == ''&& $zherInfo[1] == '' && $zherInfo[2] == ''){
        $this->error('请至少填写一个值班人',U('Qyapp/Zhiban/index'));
    }else {
        $zherInfo = $_POST['watch'];
        $zhiTime = $_POST['ZhiTime'];
        for ($i = 0; $i < count($zherInfo); $i++) {
            $UUID = new UUID();
            $addcond['id'] = $UUID->create_uuid("");
            $addcond['watch'] = $zherInfo[$i];
            $addcond['type'] = $_POST['sType'];
            $addcond['duty_time'] = $zhiTime[$i];
            $addcond['showTime'] = $_POST['showTime'];
            $info = M('wx_oa_schedule')->add($addcond);
        }
        if ($info) {
            $this->redirect("index", array('mid' => $_GET['mid']));
        } else {
            $this->redirect("index", array('mid' => $_GET['mid']));
        }

    }}

• 4、在日历上显示我们添加的数据

events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				},
				{
					title: 'Meeting',
					start: new Date(y, m, d, 10, 30),
					allDay: false
				},
				{
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: false
				}
			]

这是在js里面固定的写数据在日历上显示，采用json格式的数据来显示的，有两个必须的参数就是title和start，title是在日历上面显示的文字内容，start是时间。
在数据库中提取数据在页面显示，就必须把数据转换成json格式，然后再events那里引入方法名。
在action里面建一个方法来查询显示页面上需要的数据。

public function JSONOO(){
    $Model = new Model();
    $data = $Model->query("SELECT * FROM tp_wx_oa_schedule;");
    foreach ($data as $da=>$val) {
        $duInfo[] = array(
            'id' => $val['id'],
            'title' => $val['watch'],//事件标题
            'start' => $val['duty_time'],//事件开始时间
        );
    }
    echo json_encode($duInfo);
}

这是在php的方法中查询数据转换成json格式。
在页面上我们就只需要在events那里引入这个方法名
calendar.html的js里面加入

events:"{Lanrain::U('Zhiban/JSONOO')}",

注意：这里的时间显示是Unix时间戳，存的时候要存一个Unix时间戳

• 5、获取已经添加的事件  eventClick

当点击日历中的某一日程（事件）时，触发此操作，用法：

eventClick: function(calEvent, jsEvent, view) {
    var n1 = calEvent.start.setSeconds(calEvent.start.getSeconds()+1);
    var myDate1 = new Date(n1);
    var neee = moment(calEvent.start).format('YYYY-MM-DD');
    jQuery("#test").val(neww);
    jQuery.ajax({
        type:"POST",
        url:"{Lanrain::U('Zhiban/checkIfLessToday')}", 
        data:"nowDate="+neee,
        success:function(data){
            if(data) {
                jQuery("#insideShow").html(data);
            }
        }
    });
},

calEvent是日程（事件）对象，jsEvent是个javascript事件，view是当前视图对象。
我这里是点击的时候获取到calEvent.start事件开始的时间，根据时间从数据库查询存入的数据。

注：我这里都用的是jQuery的ajax传值获取值。

• 6、点击某个日期时背景颜色变化

当单击日历中的某一天时，触发callback，用法：

dayClick: function(date, allDay, jsEvent, view) {
    var nmounth = moment(date).format('YYYY-MM');
    var today = moment(date).format('MM-DD');
    jQuery("#nmonth").val(nmounth);
    var str = date.toString();
    var neww = str.substr(0,10);
    jQuery.ajax({
        type:"POST",
        url:"{Lanrain::U('Zhiban/showInfo')}",
        data:"sToday="+neww+"&today="+today,
        success:function(data){
            jQuery("#hidInfo").show();
            jQuery("#hidInfo").html(data);
        }
    });
    calendar.fullCalendar('unselect');
    $(this).css('backgroundColor', 'pink');
},

date是点击的day的时间(如果在agenda view, 还包含时间)，在月view下点击一天时，allDay是true，在agenda模式下，点击all-day的窄条时，allDay是true，点击其 他的agenda view下的day则为false，jsEvent就是一个普通的javascript事件，包含的是click事件的基础信息。

$(this).css('backgroundColor', 'pink');

这里是点击某一个日期时背景颜色变化。

我所运用的fullcalendar就这么多了，刚开始接触到他的时候我真的是抓狂的，到处问人查文档，慢慢的自己摸出了这些功能。他的功能可不止这么简单，大家有需要的就多多去探索吧。[/size]