fullcalendar 外部事件拖入后怎么拖出删除

在fulcalendar中，我们可以通过事件列表来查看当前的事件，但是如果我们想要删除某个事件的话，我们又该怎么 *** 作呢？接下来就让我们一起来看fulcalendar中如何删除事件的吧。首先，我们打开fulcalendar，进入到fulcalendar的主界面中，在该界面的底部，我们点击所有事件按钮;接下来，我们在所有事件列表中找到需要删除的事件，并点击该事件;然后，在d出来的窗口中，我们选择右侧的删除按钮，这样，我们就成功的把该事件给删除掉了。

鼠标单击和滑过

以下列出的是当鼠标单击或者滑过日历中的某个元素时，回调的函数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 鼠标离开事件，用法和参数同上

第一个问题，加上hover貌似没法完美解决，可以加上fc-highlight:hover{background:red;}试试，这个需要不hover日期+内容才有效果。

第二个问题：昨天、明天日期的样式处理，需要结合JS来实现，大致实现如下（核心的思路是通过标签data-date去添加样式）。

yesterday{background:bisque;color:blue;}

tomorrow{background:cadetblue;color:red;}

$(function(){

//获取昨天日期

var day1 = new Date();

day1setTime(day1getTime() - 2460601000);

var month1 = (day1getMonth()+1);

var dy1 = day1getDate();

month1 = month1 < 10 '0'+ month1 : month1;

dy1 = dy1 < 10 '0'+ dy1 : dy1;

var yesterday = day1getFullYear()+"-" + month1 + "-" + dy1;

//获取明天日期

var day2 = new Date();

day2setTime(day2getTime() + 2460601000);

var month2 = (day2getMonth()+1);

var dy2 = day2getDate();

month2 = month2 < 10 '0'+ month2 : month2;

dy2 = dy2 < 10 '0'+ dy2 : dy2;

var tomorrow = day2getFullYear()+"-" + month2 + "-" + dy2;

//添加样式

$('[data-date="'+ yesterday +'"]')addClass('yesterday');

$('[data-date="'+ tomorrow +'"]')addClass('tomorrow');

});

你好!!!

你的这个需求可以通过fullcalendar自带的formatDate函数来解决：

$('#calendar')fullCalendar({

      

      //点击日历中日期格子

      ,dayClick: function(date, allDay, jsEvent, view) {

          alert( $fullCalendarformatDate(date, "yyyy-MM-dd")   );

      }

      

      

});

FullCalendar用日历的形式直观的展示了日程安排、代办事宜等事件，那么日历中的事件是怎么添加进去的呢？本文将结合实例使用PHP+MySQL+jQuery讲解如何在FullCalendar中新建事件。

查看演示 下载源码

本站之前已经推出的FullCalendar应用系列文章中，有介绍FullCalendar的基本使用，FullCalendar的选项配置API，以及FullCalendar如何读取数据库中的数据，本文是建立在前面几个知识点之上的，如果您对FullCalendar还不了解，那建议您先看下本站关于FullCalendar的文章。本文除了您具备基本的html，css知识外，还需要您对PHP，MySQL以及jQuery技术有一定的基础，对于如何连接数据库，以及PHP和jQuery的基本函数方法的使用本文不做讲解。

HTML

我们新建一个名称为cal_opthtml的文件，然后载入必须的CSS和JS文件。

<link rel="stylesheet" type="text/css" href="css/fullcalendarcss">

<link rel="stylesheet" type="text/css" href="css/fancyboxcss">

<script src='js/jquery-191minjs'></script>

<script src='js/jquery-ui-1103customminjs'></script>

<script src='js/fullcalendarminjs'></script>

<script src='js/jqueryfancybox-131packjs'></script>

以上文件中，jquery-ui是提供事件拖动、和日期选择器功能，fancybox是点击新建事件时提供d出层功能。

接着，我们在body中加入以下代码：

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

jQuery

我们调用fullCalendar日历插件，日历中的events事件数据源来源于jsonphp，在上一篇文章中我们已经讲解，它是通过PHP读取mysql数据然后生成JSON数据格式返回给fullCalendar渲染事件。

好，到这里我们关键的一步到来了，我们通过单击日历中的任意日期空白格子时，d出一个要求输入事件相关信息的层，通过在层中的表单输入相关信息并提交来完成新建事件的 *** 作。

FullCalendar提供了dayClick方法，当dayClick发生时，调用回调函数，这里首先要将fullCalendar的日期格式化处理(fullCalendar文档中有说明)，因为我们需要将日期作为参数传给d出层的表单。然后调用fancyboxd出层，我们使用ajax调用，调用的url是eventphp，并追加参数，以下是完整代码：

$(function() {

$('#calendar')fullCalendar({

events: 'jsonphp', //事件数据源

dayClick: function(date, allDay, jsEvent, view) {

var selDate =$fullCalendarformatDate(date,'yyyy-MM-dd');//格式化日期

$fancybox({//调用fancyboxd出层

'type':'ajax',

'href':'eventphpaction=add&date='+selDate

});

}

});

});

关于fancyboxd出层的应用，您可以参阅本站文章的相关介绍： Fancybox丰富的d出层效果

eventphp

Fancybox通过ajax调用了eventphp中的内容。eventphp通过获取参数，在d出层中展示一个新建事件的表单，内容如下：

<div class="fancy">

<h3>新建事件</h3>

<form id="add_form" action="dophp" method="post">

<input type="hidden" name="action" value="add">

<p>日程内容：<input type="text" class="input" name="event" id="event" style="width:320px"

placeholder="记录你将要做的一件事"></p>

<p>开始时间：<input type="text" class="input datepicker" name="startdate" id="startdate"

value="<php echo $_GET['date'];>">

<span id="sel_start" style="display:none"><select name="s_hour">

<option value="00">00</option>

<!--省略多个option，下同-->

</select>:

<select name="s_minute">

<option value="00" selected>00</option>

</select>

</span>

</p>

<p id="p_endtime" style="display:none">结束时间：<input type="text" class="input datepicker"

name="enddate" id="enddate" value="<php echo $_GET['date'];>">

<span id="sel_end" style="display:none"><select name="e_hour">

<option value="00">00</option>

</select>:

<select name="e_minute">

<option value="00" selected>00</option>

</select>

</span>

</p>

<p>

<label><input type="checkbox" value="1" id="isallday" name="isallday" checked> 全天</label>

<label><input type="checkbox" value="1" id="isend" name="isend"> 结束时间</label>

</p>

<div class="sub_btn"><span class="del"><input type="button" class="btn btn_del"

id="del_event" value="删除"></span>

<input type="submit" class="btn btn_ok" value="确定"> <input type="button"

class="btn btn_cancel" value="取消" onClick="$fancyboxclose()"></div>

</form>

</div>

在d出层中，我们要处理几个交互动作，一是点击日期输入框时调用jquery ui的datepicker日期选择器，二是选择“全天”和“结束时间”复选框时需要显示与隐藏的表单控件，最后是“确定”和“取消”按钮的 *** 作。

首先我们要在eventphp中载入jquery ui的样式以及ajax处理表单的插件：jqueryformjs。

<link rel="stylesheet" type="text/css" href="css/jquery-uicss"<

<script type="text/javascript" src="js/jqueryformminjs"></script>

接着我们来处理调用日期选择器和选择“全天”及“结束时间”复选框时的动作。

$(function(){

$("datepicker")datepicker();//调用日历选择器

$("#isallday")click(function(){//是否是全天事件

if($("#sel_start")css("display")=="none"){

$("#sel_start,#sel_end")show();

}else{

$("#sel_start,#sel_end")hide();

}

});

$("#isend")click(function(){//是否有结束时间

if($("#p_endtime")css("display")=="none"){

$("#p_endtime")show();

}else{

$("#p_endtime")hide();

}

$fancyboxresize();//调整高度自适应

});

});

关于日历选择器的使用，本站文章：日期选择器：jquery datepicker的使用有相关介绍。而复选框勾选时，对应的表单内容进行显示与隐藏的 *** 作，需要大家多试试，值得一提的是在勾选“结束时间”选项时，d出层的高度会变化，这时可以调用$fancyboxresize()来进行自动调整高度，否则在d出层中会出现滚动条影响视觉效果。

d出层的最后 *** 作时提交表单，很显然，eventphp表单代码中的action提交到了dophp来处理的。我们调用jqueryformjs进行异步处理，提交表单时进行表单验证，这里的beforeSubmit调用回调函数showRequest()，然后就是提交成功后，success回调函数showResponse()。关于jqueryformjs的使用，后面笔者会在helloweba中专门讲解，敬请关注。

$(function(){

//提交表单

$('#add_form')ajaxForm({

beforeSubmit: showRequest, //表单验证

success: showResponse //成功返回

});

});

function showRequest(){

var events = $("#event")val();

if(events==''){

alert("请输入日程内容！");

$("#event")focus();

return false;

}

}

function showResponse(responseText, statusText, xhr, $form){

if(statusText=="success"){

if(responseText==1){

$fancyboxclose();//关闭d出层

$('#calendar')fullCalendar('refetchEvents'); //重新获取所有事件数据

}else{

alert(responseText);

}

}else{

alert(statusText);

}

}

showResponse()根据接收状态，获取dophp返回的内容，如果成功（指插入数据成功），则关闭d出层，并且通过fullcalendar的refetchEvents方法重新载入所有日历事件（局部刷新了日历区的内容），否则提示相关出错信息。

dophp

dophp用来处理表单提交，包括后面会讲解的修改和删除日历事件的 *** 作。通过处理表单数据，然后将数据写入MySQL数据表中，并且返回执行结果。

include_once('connectphp');//连接数据库

$action = $_POST['action'];

if($action=='add'){

$events = stripslashes(trim($_POST['event']));//事件内容

$events=mysql_real_escape_string(strip_tags($events),$link); //过滤HTML标签，并转义特殊字符

$isallday = $_POST['isallday'];//是否是全天事件

$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';//结束时间

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 = $isallday1: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 '写入失败！';

}

}

仔细看看官方的API呗。我注意到不是当前月的格子样式也不一样，看看是不是可以利用那个区分的样式将不是当前月的格子的display设置为none;或者将visibility设置为hidden;

fc-ltr fc-basic-view fc-other-month {

color: trnasparent;

}

使用CSS处理吧 fullCalendar的API中没看到怎样处理啊

但有的主板BIOS被破坏后，软驱根本就不工

以上就是关于fullcalendar 外部事件拖入后怎么拖出删除全部的内容，包括:fullcalendar 外部事件拖入后怎么拖出删除、如何在fullcalendar的week里面添加事件、急！！！！FullCalendar怎么设置hover，还有当天往前时间和当天往后时间更改css等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！