头像

PHP+Mysql日历拖动与数据保存

2017-07-18 10:54:06 收藏    来源:PHP代码   浏览()   评论 ( 0 )   

PHP+Mysql日历拖动与数据保存
FullCalendar是一个非常强大的日历插件,我们可以轻松的操作日程安排,诸如新建、修改、删除等操作以及本文将要讲解的拖动、缩放日程事件。
查看演示 下载资源:0

手机扫码访问:

下载资源 下载积分:60

  HTML

  首先是载入jQuery库,jQuery ui,ullcalendar及弹出层fancybox。

    <script src='js/jquery.js'></script>  
    <script src=js/jquery-ui.js'></script>  
    <script src='js/fullcalendar.min.js'></script>  
    <script src='js/jquery.fancybox-1.3.1.pack.js'></script>

  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("ajax.php?action=drag",{id:event.id,daydiff:dayDelta,  
            minudiff:minuteDelta,allday:allDay},function(msg){  
                if(msg!=1){  
                    alert(msg);  
                    revertFunc(); //恢复原状  
                }  
            });  
        }  
    });

  最后附上calendar表结构:

    CREATE TABLE `calendar` ( 
      `id` int(11) NOT NULL auto_increment, 
      `title` varchar(100) NOT NULL, 
      `starttime` int(11) NOT NULL, 
      `endtime` int(11) default NULL, 
      `allday` tinyint(1) NOT NULL default '0', 
      `color` varchar(20) default NULL, 
      PRIMARY KEY  (`id`) 
    ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;


标签: 日历拖动
声明:转载请注明来源(PHP代码)并保留原文链接:http://www.phpdaima.com/plug-42.html
广告不存在
评论0

后面还有条评论,点击查看>>

温馨提示:为规范评论内容,垃圾评论一律封号...

PHP+Mysql日历拖动与数据保存
我的积分余额: 0.0 已下载次数: 0
所需积分:6060 开始下载
×