FullCalendar 六:FullCalendar应用——拖动与实时保存

我们可以使用FullCalendar建立一个非常强大的日历程序,用户可以轻松的在FullCalendar操作日程安排,诸如新建、修改、删除等操作以及本文将要讲解的拖动、缩放日程事件。

 

HTML

我们将日程页面命名为drag.html,首先是要载入jQuery库,jQuery ui以及fullcalendar插件。

<script src='js/jquery-1.9.1.min.js'></script> 
<script src='js/jquery-ui-1.10.3.custom.min.js'></script> 
<script src='js/fullcalendar.min.js'></script> 

 

然后在body中,建立日历容器div#calendar。

<div id="calendar"></div> 

 

jQuery

FullCalendar提供了可拖动日程事件的方法,但必须依赖jquery ui的draggable插件。当拖动完毕后,eventDrop回调函数中,我们使用post方式向后台php发送ajax请求,请求的参数包括id: 当前拖动事件的id唯一标识,daydiff:拖动前后的天数变更(天数偏移量),minudiff:拖动前后分钟变更(分钟偏移量),allday:是 否为全天事件。然后接收后台php处理的结果,如果返回的不是1(拖动处理失败),就弹出提示信息,并且将日程事件恢复到拖动前的状态,请看代码:

$(function() { 
    events: 'json.php', //事件数据源 
    editable: true, //允许拖动 
    dragOpacity: {//设置拖动时事件的透明度 
        agenda: .5, 
        '':.6 
    }, 
    //拖动事件 
    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) { 
        $.post("do.php?action=drag",{id:event.id,daydiff:dayDelta, 
        minudiff:minuteDelta,allday:allDay},function(msg){ 
            if(msg!=1){ 
                alert(msg); 
                revertFunc(); //恢复原状 
            } 
        }); 
    } 
}); 

 

PHP

当拖动结束时,FullCalendar向后台do.php发送了ajax请求。和增删改操作一样,do.php接收action动作参数,首先处 理post过来的内容,然后查询数据表中对应的日程事件项,根据是否为全天事件以及是否有结束时间两个条件来构造不同的SQL语句,最后更新数据表,并返 回处理结果,请看代码:

... 
}elseif($action=="drag"){//拖动 
    $id = $_POST['id']; 
    $daydiff = (int)$_POST['daydiff']*24*60*60; 
    $minudiff = (int)$_POST['minudiff']*60; 
    $allday = $_POST['allday']; 
    $query  = mysql_query("select * from `calendar` where id='$id'"); 
    $row = mysql_fetch_array($query); 
     
    if($allday=="true"){//如果是全天事件 
        if($row['endtime']==0){ 
            $sql = "update `calendar` set starttime=starttime+'$daydiff' where id='$id'"; 
        }else{ 
            $sql = "update `calendar` set starttime=starttime+'$daydiff',endtime=endtime 
+'$daydiff' where id='$id'"; 
        } 
         
    }else{ 
        $difftime = $daydiff + $minudiff; 
        if($row['endtime']==0){ 
            $sql = "update `calendar` set starttime=starttime+'$difftime' where id='$id'"; 
        }else{ 
            $sql = "update `calendar` set starttime=starttime+'$difftime',endtime=endtime 
+'$difftime' where id='$id'"; 
        } 
    } 
    $result = mysql_query($sql); 
    if(mysql_affected_rows()==1){ 
        echo '1'; 
    }else{ 
        echo '出错了!';     
    } 
} 

 

以上代码关键在于处理日程事件的开始时间和结束事件,这样,就实现了可以任意拖动日程事件项并实时保存,看下demo,是不是很酷哦。

 

总结

 

关于日程事件的缩放

所谓缩放,其实就是用户可以直接在日历视图中将日程事件拉长和缩短,比如事件为一天的变成两天,10:00结束的会议变成9:30,只需在日历视图 中将对应的日程事件项向右(月视图)或向下(周视图和日视图)拉长或缩短。使用FullCalendar提供的eventResize方法轻松搞定。

eventResize: function(event,dayDelta,minuteDelta,revertFunc) { 
    $.post("do.php?action=resize",{id:event.id,daydiff:dayDelta,minudiff:minuteDelta},function(msg){ 
        if(msg!=1){ 
            alert(msg); 
            revertFunc(); 
        } 
    }); 
} 

 

关于选取多天

FullCalendar提供了select方法,用户可以在新建多天日程的时候,一次性选择连贯的日期,然后弹出的新建日程中会自动补全开始日期和结束日期,这个操作只需按住开始日期,然后拖动鼠标到结束日期,松开左键即可,快去demo中操作下吧。

selectable: true, //允许用户拖动 
select: function( startDate, endDate, allDay, jsEvent, view ){ 
    var start =$.fullCalendar.formatDate(startDate,'yyyy-MM-dd'); 
    var end =$.fullCalendar.formatDate(endDate,'yyyy-MM-dd'); 
    $.fancybox({ 
        'type':'ajax', 
        'href':'event.php?action=add&date='+start+'&end='+end 
    }); 
} 

 

关于多用户共享

要将FullCalendar应用到项目中去,一般是针对多用户使用的,如CRM系统中会有多个用户共享日程,上级可查看下级的日程安排及工作进度,同级用户不能查看对方的日程,这些需求是在项目设计的时候就得定好,当然数据库的设计是至关重要的,这里不再多描述。

 

不足

唯一遗憾的是日历中没有中国农历历法,哪位大神能将中国农历历法移植到FullCalendar中,将会对FullCalendar在中国的应用做出卓越的贡献。

 

结束

FullCalendar系列文章讲述了FullCalendar的基本应用,API文档,读取数据库,新建、修改和删除操作,以及拖动、缩放和选 取,足以满足大型项目应用场景的需求,至此关于FullCalendar的文章本站就此收官,如有FullCalendar相关问题欢迎大家留言讨 论,Helloweba感谢您的关注。

 

来源于helloweba.comFullCalendar应用——拖动与实时保存

你可能感兴趣的:(fullCalendar)