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

Question

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

我想添加的功能是允许用户编辑/删除事件，并让这些更改在进行时反映在数据库中！我的意思是，在我的表格中，用户可以拖放事件来更改他们的时间，当他们点击一个事件时，我希望出现一个对话框，询问他们是否希望删除这个事件。我希望在 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");
}

Answer 2

最好的方法是使用 AJAX 和 jQuery

function deleteEvent(id)
{
    // The URL to which we will make the AJAX call
    var url = "MyCalendar.aspx";
    // Setup the data to send to the server
    var sendData =
    {
        "action":"deleteEvent",
        "id":id
    };
    // Make the AJAX call
    var xhr = $.post(url, sendData, function(result)
    {
        // The response is up to the method you implement in the server side, be it json or text.
        // For simplicity's sake let's assume you return a '0' for OK or '1' for ERROR
        if(result == '0')
        {
            // Remove the event from the calendar since we know it all went well server-side
            cal.fullCalendar("removeEvents", id);
            cal.fullCalendar("rerenderEvents");
        }
        else
        {
            // There was an error server-side, put a message or something...
            alert("Could not remove event. Try again later.");
        }
    });
    xhr.error = function()
    {
        // There was an error trying to complete the request
        alert("Could not complete request.");
    }
}

在服务器端，我假设您将使用同一个页面来处理 AJAX 请求，在这种情况下，您将在 PageLoad 事件中执行以下操作：

protected void Page_Load(object sender, EventArgs e)
{
    // Check if we received a POST value with name 'action'
    string action = Request["action"];
    if(action != null)
    {
        // It's an AJAX Call
        if(action == "deleteEvent")
        {
            // At this point we should expect a POST value with name 'id'
            int id = int.Parse(Request["id"]);
            // Execute action
            DoActionDeleteEvent(id);
            // Do nothing else since it's an AJAX call
            return;
        }
    }

}

private void DoActionDeleteEvent(int id)
{
    Response.ContentType = "text/plain";
    try
    {
        // ToDo: Delete the event from the database
        // All went well, write 0 in the response.
        Response.Write("0");
    }
    catch
    {
        // There was an error, write 1 in the response
        Response.Write("1");
    }
    // End the response
    Response.End();
}

这样所有更改都应反映在数据库和日历中。

至于版本，您将执行非常相似的操作，但不是返回 0 或 1，而是返回一个带有新编辑事件的 JSON 对象。