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

Question

我在控制Full Calendar模块时遇到了一些问题。现在我有了它，这样calendars getEvents方法就可以联系一个SQL表，并为用户返回所有事件——这一部分非常有效。

我想添加的功能是允许用户编辑/删除事件，并在进行更改时将这些更改反映在数据库中！我的意思是，在我的表中，用户可以拖放事件来更改他们的时间，当他们单击某个事件时，我希望出现一个对话框，询问他们是否希望删除此事件。我希望在SQL表中表示这些更改。

我该怎么做？我是JQuery、JavaScript和DatePicker的新手。从我的谷歌搜索和尝试学习中，我在这里找到了一个类似的线索

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对象。