c# - FullCalendar，我如何允许用户编辑/删除事件并将它们从数据库中删除？

Question

我在控制完整日历模块时遇到了一些麻烦。目前我有它，以便日历 getEvents 方法联系 SQL 表并返回用户的所有事件 - 这部分工作完美。

我想添加的功能是允许用户编辑/删除事件，并让这些更改在发生时反射(reflect)在数据库中!我的意思是，在我的表中，用户可以拖放事件以更改他们的时间，当他们单击一个事件时，我希望出现一个对话框，询问他们是否要删除此事件。我希望在 SQL 表中表示这些更改。

我该怎么做？我是 JQuery、JavaScript 和 DatePicker 的新手。从我的谷歌搜索和学习尝试中，我发现了一个类似的线程 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();
}

它给出了这段代码，我认为它与我需要的类似，但是我希望在调用 removeEvents 时从数据库中删除该事件。我假设我需要一些类似于从数据库中检索事件时所拥有的代码(如下所示的代码)，但我不确定代码的结构。谁能帮我解决这个问题？

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";

Answer 1

我通过 AJAX 调用从日历和数据库中删除事件。这是一些示例代码

点击事件

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

这是对话信息

        $( "#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" );
            },

        },

    });

编辑打开对话框时显示的类 div

<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>

然后在 delete_class.php 页面上我有如下内容

 $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");
}