素材牛VIP会员

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

 所属分类:PHP/MySql-Ajax,常用实例教程,MySQL

 浏览:8767次-  下载:938次-  评论:32次-  更新时间:2020-08-25
PHP+Mysql+FullCalendar日历拖动与数据保存
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:FullCalendar是一个非常强大的日历插件,我们可以轻松的操作日程安排,诸如新建、修改、删除等操作以及本文将要讲解的拖动、缩放日程事件。

基础属性

  • 难易高级
  • 语言PHP
  • 数据库MySql

详细介绍

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>

然后我们在页面中建立日历容器#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("ajax.php?action=drag",{id:event.id,daydiff:dayDelta, 
        minudiff:minuteDelta,allday:allDay},function(msg){ 
            if(msg!=1){ 
                alert(msg); 
                revertFunc(); //恢复原状 
            } 
        }); 
    } 
});

Ajax.php

我们先看增加的处理程序:

$action = $_GET['action'];
if ($action == 'add') { //增加
    $events = stripslashes(trim($_POST['event'])); //事件内容
    $events = mysql_real_escape_string(strip_tags($events), $link); //过滤HTML标签,并转义特殊字符

    $isallday = $_POST['isallday']; //是否是全天事件
    $isend = isset($_POST['isend']) ? $_POST['isend'] : ""; //是否有结束时间

    $startdate = trim($_POST['startdate']); //开始日期
    $enddate = trim($_POST['enddate']); //结束日期

    $s_time = $_POST['s_hour'] . ':' . $_POST['s_minute'] . ':00'; //开始时间
    $e_time = $_POST['e_hour'] . ':' . $_POST['e_minute'] . ':00'; //结束时间
    $endtime = '';
    if ($isallday == 1 && $isend == 1) {
        $starttime = strtotime($startdate);
        $endtime = strtotime($enddate);
    } elseif ($isallday == 1 && $isend == "") {
        $starttime = strtotime($startdate);
    } elseif ($isallday == "" && $isend == 1) {
        $starttime = strtotime($startdate . ' ' . $s_time);
        $endtime = strtotime($enddate . ' ' . $e_time);
    } else {
        $starttime = strtotime($startdate . ' ' . $s_time);
    }

    $colors = array("#360", "#f30", "#06c");
    $key = array_rand($colors);
    $color = $colors[$key];

    $isallday = $isallday ? 1 : 0;
    $query = mysql_query("insert into `calendar` (`title`,`starttime`,`endtime`,`allday`,`color`) values ('$events','$starttime','$endtime','$isallday','$color')");
    if (mysql_insert_id() > 0) {
        echo '1';
    } else {
        echo '写入失败!';
    }
} elseif ($action == "edit") { //编辑
  .......
}

最后附上calendar表结构:

--
-- 表的结构 `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;

初始化指定某年某月

$('#calendar').fullCalendar({
   year:"2014",
   month:"11",
)}

FullCalendar相关API

参数描述默认值
header设置日历头部信息。            如果设置为false,则不显示头部信息。包括left,center,right左中右三个位置,每个位置都可以对应以下不同的配置:            title: 显示当前月份/周/日信息            prev: 用于切换到上一月/周/日视图的按钮            next: 用于切换到下一月/周/日视图的按钮            prevYear:用于切换到上一年视图的按钮            nextYear:用于切换到下一年视图的按钮{            left: 'title',            center: '',            right: 'today prev,next'            }
theme是否允许使用jquery的ui主题,如果设置为true,则需要加载jquery ui相关css和js文件。 查看演示false
buttonIcons设置header中使用的prev, next等变量对应按钮的样式,只有当theme为true时才有效,如果你调用了jQuery ui样式但又不想使用它的图标样式,可以将此属性设置为false{ prev: 'circle-triangle-w', next: 'circle-triangle-e' }
firstDay设置一周中显示的第一天是哪天,周日是0,周一是1,类推。0
isRTL设置为ture时则日历从右往左显示,貌似是针对阿拉伯人设计的。false
weekends是否显示周末,设为false则不显示周六和周日。true
hiddenDays隐藏一周中的某一天或某几天,数组形式,如隐藏周二和周五:[2,5],默认不隐藏,除非weekends设置为false。[]
weekMode在月视图里显示周的模式,因为每月周数可能不同,所以月视图高度不一定。            fixed:固定显示6周高,日历高度保持不变            liquid:不固定周数,高度随周数变化            variable:不固定周数,但高度固定'fixed'
weekNumbers是否在日历中显示周次(一年中的第几周),如果设置为true,则会在月视图的左侧、周视图和日视图的左上角显示周数。false
weekNumberCalculation周次的显示格式。-
height设置日历的高度,包括header日历头部,默认未设置,高度根据aspectRatio值自适应。
contentHeight设置日历主体内容的高度,不包括header部分,默认未设置,高度根据aspectRatio值自适应。
aspectRatio设置日历单元格宽度与高度的比例。1.35
handleWindowResize是否随浏览器窗口大小变化而自动变化。true
windowResizecallback,当浏览器窗口变化时触发function,使用:            $('#calendar').fullCalendar({            windowResize: function(view) {            alert('The calendar has adjusted to a window resize');            }            });-
rendermethod,绑定日历到id上。            $('#id').fullCalendar('render');-
destroymethod,销毁id日历,把日历回复到初始化前状态。            $('#id').fullCalendar('destroy');-
FullCalendar提供五种可用视图,包括month(月视图),basicWeek(基本周视图,左侧不显示具体时间),basicDay(基本日视图,左侧不显示具体时间),agendaWeek(周视图),agendaDay(日视图)。
-
name包括month,basicWeek,basicDay,agendaWeek,agendaDay-
title标题内容(例如-
startDate类型, 该view下的第一天-
endDate类型, 该view下的最后一天. 由于是一个闭合的值, 所以, 比如在month view下, 10月这个月份, 那么end对应的应该是11月的第一天-
visStartDate类型. 在该view下第一个可以访问的day. month view下, 该值是当月的第一天, week view下, 则通常和start一致-
visEndDate类型, 最后一个可访问的day-
View其他属性和方法
-
defaultView日历初始化时默认视图'month'
getViewmethod,取得视图对象信息,如获取当前视图的标题内容:            var view = $('#calendar').fullCalendar('getView'); alert(-
changeViewmethod,切换视图            .fullCalendar('changeView',viewName)            viewName为5种视图中的一种-
日程选项(以下选项设置适用于agendaWeek和agendaDay视图里。)
-
allDaySlot在agenda视图模式下,是否在日历上方显示all-day(全天)true
allDayText定义日历上方显示全天信息的文本'all-day'
axisFormat设置日历agenda视图下左侧的时间显示格式,默认显示如:5:30pm'h(:mm)tt'
slotMinutes在agenda的视图中, 两个时间之间的间隔(分钟)30
defaultEventMinutes事件默认的时间执行长度,如果事件对象没有指定执行多长时间,则默认执行两个小时120
firstHour当切换到agenda时,初始滚动条滚动到的时间位置,默认在6点钟的位置6
minTime设置显示的时间从几点开始0
maxTime设置显示的时间从几天结束24
slotEventOverlap设置视图中的事件显示是否可以重叠覆盖true
当前日期设置
-
year设置日历年份,必须为4位如:2013,如果不设置则默认为当前年份
month设置初始化日历的月份,从0开始,如果年份和月份都未指定,则从一月开始。
date设置日历初始化时的日期,只有在周视图和日视图中有效
prevmethod,进入到上一月(周、天)视图            $('#calendar').fullCalendar('prev');-
nextmethod,进入到下一月(周、天)视图            $('#calendar').fullCalendar('next');-
prevYearmethod,进入上一年视图-
nextYearmethod,进入下一年视图-
todaymethod,进入当天-
gotoDatemethod,指定进入日历中的某一天            $('#calendar').fullCalendar( 'gotoDate', year [, month, [ date ]] )-
incrementDatemethod, 以当前时间为轴, 将日历向前, 或向后移动指定长度的时间, 比如: $('#calendar').fullCalendar('incrementDate', -3, 2, -5)就表示将日历年份向前移动3年, 月份向后移动2月, day(天数)向前移动5天。-
getDatemethod,返回当前日历中的日期-
文本与时间定制(你可以根据项目需求设置日历显示的文本信息,如中文的月份等。)
-
timeFormat设置显示的日程事件的时间格式,如timeFormat: 'H:mm' 则显示24小时制的像10:30{agenda: 'h:mm{ - h:mm}}
columnFormat设置显示日历每列表头信息的格式文本,默认:            {            month: 'ddd', // Mon            week: 'ddd M/d', // Mon 9/7            day: 'dddd M/d' // Monday 9/7 }见描述
titleFormat设置用于显示日历头部的文本信息,默认:            {            month: 'MMMM yyyy', // September 2013            week:见描述
buttonText设置日历头部各按钮的显示文本信息,默认:            {            prev: '‹', // ‹            next: '›', // ›            prevYear: '«', // «            nextYear: '»', // »            today: 'today',            month: 'month',            week: 'week',            day: 'day'            }见描述
monthNames月份全称,默认:            ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']见描述
monthNamesShort月份名称简写,默认:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']见描述
dayNames星期全称,默认:['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']见描述
dayNamesShort星期名称简写,默认:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']见描述
weekNumberTitle周次,即一年中的第几周-
鼠标单击和滑过(以下列出的是当鼠标单击或者滑过日历中的某个元素时,回调的函数callback。)
-
dayClick当单击日历中的某一天时,触发callback,用法:            $('#calendar').fullCalendar({            dayClick: function(date, allDay, jsEvent, view) {            do something...            }            });            date是点击的day的时间(如果在agenda view, 还包含时间),在月view下点击一天时,allDay是true,在agenda模式下,点击all-day的窄条时,allDay是true,点击其他的agenda view下的day则为false,jsEvent就是一个普通的javascript事件,包含的是click事件的基础信息。-
eventClick当点击日历中的某一日程(事件)时,触发此操作,用法:            $('#calendar').fullCalendar({            dayClick: function(event, jsEvent, view) {            do something...            }            });            event是日程(事件)对象,jsEvent是个javascript事件,view是当前视图对象。-
eventMouseover            eventMouseout鼠标划过和离开的事件,用法和参数同上-
选择操作
-
selectable是否允许用户通过单击或拖动选择日历中的对象,包括天和时间。false
selectHelper当点击或拖动选择时间时,显示默认加载的提示信息,该属性只在周/天视图里可用。false
unselectAuto当点击页面日历以外的位置时,是否自动取消当前的选中状态。true
unselectCancel指定哪些元素不会清空当前的选中,以JQUERY选择器的方式指定 '#someId'。''
selectcallback,被选中的函数回调,使用方法:            function( startDate, endDate, allDay, jsEvent, view )            startDate:被选中区域的开始时间            endDate:被选中区域的结束时间            allDay:是否为全天事件            startDate:jascript对象            startDate:当前视图对象-
unselectcallback,选中被取消时的回调,使用方法:            function( view, jsEvent )-
selectmethod,选中某个时间,使用方法:            $('#calendar').fullCalendar( 'select', startDate, endDate, allDay )-
unselectmethod,取消选中,使用方法:            $('#calendar').fullCalendar( 'unselect' )-
日程事件数据(Event Object,事件对象,用来存储一个日历事件信息的标准对象,只有title和start是必须的)
-
id可选,事件唯一标识,重复的事件具有相同的id-
title必须,事件在日历上显示的title-
allDay可选,true or false,是否是全天事件。-
start必须,事件的开始时间。-
end可选,结束时间。-
url可选,当指定后,事件被点击将打开对应url。-
className指定事件的样式。-
editable事件是否可编辑,可编辑是指可以移动, 改变大小等。-
source指向次event的eventsource对象。-
color背景和边框颜色。-
backgroundColor背景颜色。-
borderColor边框颜色。-
textColor文本颜色。-
事件源对象(事件源即日历中的数据来源,FullCalendar提供了数组、函数调用、以及JSON数据的形式,当然也可以通过Google Calendar feed获取数据接口。helloweba.com后面会有文章专门介绍事件数据的操作,包括数据的查询、写入、更新和删除操作。)
-
eventSources事件源,存储数组对象,可以是Arrays/Functions/URLs。
allDayDefault是否为全天日程事件,显示这一天中所做的事情。true
ignoreTimezone是否忽略时区。true
startParam在使用URL方式获取events数据源的时候, 自动插入到URL中的参数, 表示当前需要抓取的日程事件的起始时间。'start'
endParam和startParam参数意义相同, 表示要抓取的日程事件的终止时间。'end'
lazyFetching是否从缓存信息获取event。比如从月视图切换到周视图。true
eventDataTransformcallback,将外部数据源转换成Fullcalendar可以处理的数据-
loadingcallback,日历开始加载的时候,isLoading参数为true触发一次,日历加载完毕,isLoading参数为false触发一次,用法:            function(isLoading, view)-
updateEventmethod,更新日历空间中的一个日程事件,如果是重复的日程事件,则都更新。用法:            $('#calendar').fullCalendar( 'updateEvent', event )-
clientEventsmethod,返回FullCalendar已经存储到客户端的CalEvents对象数组, 第二个参数和removeEvents方法的第二个参数意义相同, 只不过在过滤器中, 如果返回true, 则该CalEvent对象将被加入到返回的数组中。-
removeEventsmethod,从日历中删除一个日程事件. 第二个参数可以不填, 可以填id, 可以是一个过滤器(一个函数, 接受CalEvent对象作为参数)。用法:            $('#calendar').fullCalendar( 'removeEvents' [, idOrFilter ] )-
refetchEventsmethod,重新抓取所有的日程事件源上的日程事件并渲染它们。-
addEventSourcemethod,添加一个日程事件源,添加之后, FullCalendar会马上从该源获取日程事件, 并加载到日历中。第二个参数和定义Calendar时候使用的url参数一致。-
removeEventSourcemethod,移除一个日程事件源,该源上获取得到的日程时间也将被马上从日历中移除。-
事件渲染
-
eventColor            eventBackgroundColor            eventBorderColor            eventTextColor设置日程事件的背景色和边框色,以及文本颜色。可以使用任意支持css的颜色方式,如 #f00, #ff0000, rgb(255,0,0), or red。-
eventRendercallback,当日程事件渲染时触发,用法:            function(calEvent, element, view)-
eventAfterRendercallback,当日程事件被渲染后触发,用法:            function( event, element, view ) { }-
eventDestroycallback,当日程事件移出时触发,用法:            function( event, element, view ) { }-
renderEventmethod,一旦日历重新取得日程源,则原有日程将消失,当指定stick为true时,日程将永久的保存到日历上。-
rerenderEventsmethod,重新渲染所有事件。-
日程事件拖动和缩放(拖动和缩放功能依赖于jQuery ui的draggable和resizable,所以在使用时要提前加载)
-
editable是否可编辑,即进行可拖动和缩放操作。false
eventStartEditable是否让事件在开始时就可以拖动。true
dragRevertDuration如果拖拽不成功,多久回复原状,毫秒500
dragOpacity拖动时候的不透明度。            {            agenda:.5 //对于agenda试图            '':1.0 //其他视图            }见描述
eventDragStart,            eventDragStopcallback,日程事件被拖动之前和之后触发。这里的拖动不一定是一个有效的拖动,只要日程事件的控件被拖着动了,事件就触发。 可以从该对象中获取位移,位置等数据。用法: function( event, jsEvent, ui, view ) { }-
eventDropcallback,当拖拽完成并且时间改变时触发,用法:            function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { }            ayDelta 保存日程向前或者向后移动了多少天            minuteDelta 这个值只有在agenda视图有效,移动的时间            allDay 如果是月视图,或者是agenda视图的全天日程,此值为true,否则为false-
eventResizeStart,             eventResizeStopcallback,在一个日程事件改变大小之前之后发生(不一定要改变成功),用法:            function( event, jsEvent, ui, view ) { }-
eventResizecallback,在日程事件改变大小并成功后调用, 参数和eventDrop参数用法一致。用法:            function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }-
日期工具
-
formatDate格式化日期,通过指定的格式格式化一个日期,返回一个字符串。options选项是一个对象,其中设置本地化变量支持的属性值. 比如{ monthNames : ['一月','二月',……],dayNames: ['周日','周一',…..]},用法:            $.fullCalendar.formatDate( date,formatString [,options ] )-
formatDates一次格式化两个日期,和上一个格式化日期类似,只不过,这里在formatString中使用大括号{…}来描述第二个日期的格式化方式。用法:            $.fullCalendar.formatDates( date1,date2,formatString [,options ] )-
parseDate解析日期,将一个字符串格式成一个javascript的Date对象,这个string可以是ISO8601,IETF,UNIX时间戳三种格式。用法:            $.fullCalendar.parseDate( string )-
parseISO8601将一个ISO8601字符串转换成一个javascript 的Date对象。用法:            $.fullCalendar.parseISO8601( string [,ignoreTimezone ] )-

讨论这个素材(32)回答他人问题或分享使用心得会奖励牛币

素***牛  
2020年03月12日

需要这个啊

回复
迁***3  
2020年03月13日

look like OK

回复
真***名  
2020年03月15日

只要一分,谢谢楼主示爱

回复
sc***31  
2020年03月24日

老大威武,好的

回复
un***oo  
2020年03月29日

这个功能也很实用

回复
th***kd  
2020年04月03日

改成自适应+点击显示就更棒了。

回复
最***哥  
2020年04月15日

非常实用,值得学习。

回复
lo***ng  
2020年04月18日

谢谢楼主分享,谢谢

回复
li***28  
2020年05月02日

非常想学习。喜欢

回复
sc***29  
2020年05月02日

好东西,项目里面正好用这个

回复
th***as  
2020年05月04日

好东西,保存备用,谢谢!

回复
霸***空  
2020年05月05日

这个功能太强大。太实用了

回复
ha***00  
2020年05月07日

下载分要得太多了

回复
mo***99  
2020年05月20日

这个真的很强大啊

回复
Su***er  
2020年05月20日

可以,很好

回复
袜***了  
2020年05月22日

强大的功能!!!!

回复
zz***60  
2020年05月22日

蛮实用的,我已经用了,非常棒

回复
zh***23  
2020年06月05日

没法下载

回复
青***0  
2020年06月19日

拖拽功能不常用,但学着总是对的

回复
lo***ng  
2020年06月24日

谢谢楼主分享。。。

回复
大***咒  
2020年07月01日

太实用了

回复
lo***ge  
2020年07月04日

超级完美呀!

回复
真***名  
2020年07月06日

早点看到就好了,几乎完美了,感谢分享

回复
貪***续  
2020年07月08日

很棒的东西 而且不要分 谢谢

回复
真***溜  
2020年07月19日

正在研究,觉得和目前的约课系统很相似,但是代码太多,有点吃力了

回复
ya***cn  
2020年07月19日

很牛逼的功能啊 涨见识了

回复
阿***t  
2020年07月27日

超實用完全幫助到我!感謝!

回复
d***悠  
2020年08月06日

不支持手机版

回复
ju***23  
2020年08月21日

太好耍了,强大的功能

回复
16***50  
2020年08月21日

这个太实用了,救星呀,谢谢

回复
yt***76  
2020年08月28日

刘明,感谢分享

回复
do***lf  
2020年09月10日

这个太实用了,救星呀,谢谢

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:938
所需牛币:100 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)