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

Question

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

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

Как я могу это сделать? Я новичок в JQuery, JavaScript и DatePicker. С моей Googling и попыток узнать, я нашел подобную нить 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 с новым редактируемым событием.