FullCalendar, как мне разрешить пользователям редактировать / удалять события и удалять их из базы данных?

Question

У меня небольшие проблемы с управлением модулем полного календаря, как мне хотелось бы. На данный момент у меня так, что метод getEvents calendars связывается с таблицей SQL и возвращает все события для пользователя - эта часть работает отлично.

Функциональность, которую я хотел бы добавить, состоит в том, чтобы позволить пользователям редактировать / удалять события и отражать эти изменения в базе данных по мере их внесения! Под этим я подразумеваю, что в моей таблице пользователь может перетаскивать события, чтобы изменить их время, и когда они нажимают на событие, я хочу, чтобы появилось диалоговое окно с вопросом, хотят ли они удалить это событие. Я хотел бы, чтобы эти изменения были представлены в таблице SQL.

Как я могу это сделать? Я новичок в JQuery, JavaScript и DatePicker. Из моего поиска в Google и попыток учиться я нашел похожую тему здесь

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 с новым отредактированным событием.