ThinkPHP中Full Calendar的使用_PHP_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > PHP > ThinkPHP中Full Calendar的使用

ThinkPHP中Full Calendar的使用

 2016/5/21 5:35:10  Fire.  程序员俱乐部  我要评论(0)
  • 摘要:size=x-large]这次所做的项目涉及到使用日历插件的问题,在朋友的推荐下使用了fullcalendar这个插件,网上的各种评价fullcalendar都还不错,但是具体的使用就有点迷茫,经过了一个多月的摸索,终于摸清了一些fullcalendar的功能,下面给大家介绍一下,有不对的地方还请多多指教。1、文件准备我是在网上下的组件shamcey。下载好的shamcey文件,只需要calendar.html和它的一系列js文件和css文件(所包含的css文件:style.default
  • 标签:PHP 使用
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里面进行的操作
2、调整页面
因为fullcalendar是外国人研发的,而老总需要的是中文的日期显示,所以一开始是改日期显示,改变日期显示是修改fullcalendar.min.js里面的
class="java">
 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][/size][/color][/size][/size]
  • fullcalendar的使用.zip (121.2 KB)
  • 下载次数: 1
发表评论
用户名: 匿名