FullCalendar，我怎么允许用户编辑/删除事件，并从数据库中删除？ [英] FullCalendar, how do I allow users to edit/delete events and remove them from the database?
问题描述
我有麻烦控制全日历模块，因为我想一点点。目前，我有这样的日历getEvents方法接触SQL表并返回所有的用户事件 - 这部分作品完美
的功能我想想补充的是，以允许用户编辑/删除事件，并有这些改变在数据库中反映为它们进行！我的意思是，在我的表中的用户可以通过拖放事件来改变自己的时候，当他们点击一个事件，我希望有一个对话框出现，询问他们是否要删除此事件。我想这些变化在SQL表来表示。
我怎样才能做到这一点？我是新来的JQuery，JavaScript和的DatePicker。从我的谷歌搜索，并尝试学习，我发现了一个类似的线程这里
功能（calEvent）{
removeRequestedEvent（$（本），calEvent）;
}，
它只是传递在日历事件和日历本身。
removeRequestedBooking：（！确认（？删除））功能（CAL，calEvent）{
如果
的回报;
cal.fullCalendar（REMOVEEVENTS，calEvent.id）;
cal.fullCalendar（rerenderEvents）;
//重新出现拖动元素
$（＃＃请求+ calEvent.id）.show（）;
}
这给这个代码，我相信这是类似于我需要什么，但是我想，当REMOVEEVENTS被称为从数据库中删除该事件。我想我需要类似于我有当事件从数据库中检索（如下图所示的代码），但我不知道如何代码的结构应一些代码。谁能帮我出这个
VAR DB = Database.Open（用户）？;
VAR的结果= db.Query（SELECT * FROM事件）;
VAR数据= result.Select（X =>新建
{
ID = x.id，
标题= x.title，
开始= x.start的ToString（S），
端= x.end.ToString（S），
allDay = FALSE
}）ToArray的（）。
Json.Write（数据，Response.Output）;
Response.ContentType =应用/ JSON;
我通过AJAX请从日历和数据库事件呼叫。下面是一些示例代码
在事件点击
eventClick：功能（事件）{
变种开始= $ .fullCalendar.formatDate（event.start，YYYY-MM-DD HH：MM）;
变种结束= $ .fullCalendar.formatDate（event.end，YYYY-MM-DD HH：MM）;
VAR ID = event.id;
VAR标题= event.title;
$（＃edit_start）VAL（开始）。 //这只是填充值进入我的对话形式
$（＃edit_end）VAL（结束）。
$（＃edit_title）VAL（职称）。
$（＃edit_event_id）VAL（ID）。
$（＃edit_class）.dialog（开放）; //打开对话框
这是对话框信息
$（#edit_class）.dialog（{
的AutoOpen：假的，
高度：300，
宽度：350，
模式：真，
键：{
删除班级：函数（）{
变种EVENT_ID = $（＃edit_event_id）VAL（）;
$阿贾克斯（{
型：POST，
网址：delete_class.php，
数据：事项标识=+事项标识，
}）;
$（'＃日历'）fullCalendar（'refetchEvents'）; //事件已经从在这一点上的数据库中删除，所以我只是重新读取该事件
$（本）.dialog（接近）;
}，
}，
}）;
编辑类DIV，显示当我打开对话框
< DIV ID =edit_class称号=编辑类>
<形式的行动=>
<&字段集GT;
< /选择>
< P>
< / P>
<标签=edit_start>开始< /标签>
<输入类型=文本名称=edit_startID =edit_start级=文本的UI控件内容UI的角落里所有/>
< P>
< / P>
<标签=edit_end>结束< /标签>
<输入类型=文本名称=edit_endID =edit_end级=文本的UI控件内容UI的角落里所有/>
< P>
< / P>
<标签=标题>班级名称和LT; /标签>
<输入类型=文本名称=edit_titleID =edit_title级=文本的UI控件内容UI的角落里所有/>
< P>
< / P>
<标签=edit_event_id>< /标签>
<输入类型=隐藏的名字=edit_event_idID =edit_event_id级=文本的UI控件内容UI的角落里所有/>
< /字段集>
和则delete_class.php页我有类似如下
$ B $上b $ EVENT_ID = $ _ POST ['EVENT_ID'];
试
{
$胸径=新PDO（MySQL的：主机= $ mysql_hostname; DBNAME = $ mysql_dbname，$ mysql_username，$ mysql_password）;
$ dbh->的setAttribute（PDO :: ATTR_ERRMODE，PDO :: ERRMODE_EXCEPTION）;
$语句= $ dbh->准备（
DELETE FROM事件
WHERE事项标识=：事项标识）;
$ stmt-> bindParam（'：EVENT_ID'，$ EVENT_ID，PDO :: PARAM_STR）;
$ stmt->执行（）;
}
赶上（例外$ E）
{
回声（错误）;
}
I am having a little bit of trouble controlling the Full Calendar module as I would like. At the moment I have it so that the calendars getEvents method contacts an SQL table and returns all of the events for a user - that part works perfectly.
The functionality I would like to add is to allow users to edit/delete events and have these changes be reflected in the database as they are made! By this I mean that in my table the user can drag and drop events to change their times, and when they click on an event, I wish for a dialog to appear asking them if they wish to delete this event. I would like these changes to be represented in the SQL table.
How can I do this? I am new to JQuery, JavaScript and DatePicker. From my googling and attempts to learn, I have found a similar thread here
function (calEvent) {
removeRequestedEvent($(this), calEvent);
},
It just passes in the calendar event and the calendar itself.
removeRequestedBooking: function (cal, calEvent) {
if (!confirm("Delete?"))
return;
cal.fullCalendar("removeEvents", calEvent.id);
cal.fullCalendar("rerenderEvents");
// Re-show draggable element
$("#requests #" + calEvent.id).show();
}
which gives this code, which I believe is similar to what I need, however I wish to remove the event from the database when removeEvents is called. I assume I need some code similar to what I have when events are retrieved from the database (code shown below) but I am not sure how the code should be structured. Can anyone help me out with this ?
var db = Database.Open("users");
var result = db.Query("SELECT * FROM events");
var data = result.Select(x => new
{
id = x.id,
title = x.title,
start = x.start.ToString("s"),
end = x.end.ToString("s"),
allDay = false
}).ToArray();
Json.Write(data, Response.Output);
Response.ContentType = "application/json";
I remove events from the calendar and database through an AJAX call. Here is some sample code
On event click
eventClick: function(event){
var start = $.fullCalendar.formatDate(event.start, "yyyy-MM-dd HH:mm");
var end = $.fullCalendar.formatDate(event.end, "yyyy-MM-dd HH:mm");
var id = event.id;
var title = event.title;
$("#edit_start").val(start); //this just populates the value into my dialog form
$("#edit_end").val(end);
$("#edit_title").val(title);
$("#edit_event_id").val(id);
$("#edit_class" ).dialog( "open" ); //open the dialog
this is the dialog info
$( "#edit_class" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Delete Class": function() {
var event_id = $("#edit_event_id").val();
$.ajax({
type:"POST",
url: "delete_class.php",
data: "event_id=" + event_id,
});
$('#calendar').fullCalendar('refetchEvents'); //the event has been removed from the database at this point so I just refetch the events
$( this ).dialog( "close" );
},
},
});
Edit class div that shows when I open the dialog
<div id="edit_class" title="Edit Class">
<form action="">
<fieldset>
</select>
<p>
</p>
<label for="edit_start">Start</label>
<input type="text" name="edit_start" id="edit_start" class="text ui-widget-content ui-corner-all" />
<p>
</p>
<label for="edit_end">End</label>
<input type="text" name="edit_end" id="edit_end" class="text ui-widget-content ui-corner-all" />
<p>
</p>
<label for="title">Class Name</label>
<input type="text" name="edit_title" id="edit_title" class="text ui-widget-content ui-corner-all" />
<p>
</p>
<label for="edit_event_id"></label>
<input type="hidden" name="edit_event_id" id="edit_event_id" class="text ui-widget-content ui-corner-all" />
</fieldset>
And then on the delete_class.php page I have something like the following
$event_id = $_POST['event_id'];
try
{
$dbh = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$stmt = $dbh->prepare(
"DELETE FROM events
WHERE event_id = :event_id ");
$stmt->bindParam(':event_id', $event_id, PDO::PARAM_STR);
$stmt->execute();
}
catch(Exception $e)
{
echo ("error");
}
这篇关于FullCalendar，我怎么允许用户编辑/删除事件，并从数据库中删除？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
