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

我通过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");
}

最好的方法是使用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对象。