Como apagar evento no FullCalendar com PHP
Neste tutorial, será apresentado como apagar um evento no FullCalendar com PHP.
Primeiramente, será mostrado como criar o botão "Apagar Evento" no FullCalendar.
Em seguida, será apresentado como receber, no JavaScript, o evento que deve ser excluído no banco de dados.
Por fim, será mostrado como excluir o evento do FullCalendar no banco de dados com PHP.
Download do código fonte desenvolvido na aula: Download
Curso de PHP Developer: Mais Detalhes do Curso
Playlist completa sobre como usar Fullcalendar com PHP: Acessar
Receber as aulas gratuitas do curso de PHP Developer: Acessar
Para começar, é utilizado como base o projeto da aula "Como editar evento no FullCalendar com PHP".
No arquivo "index.php", na janela modal de visualização, foi acrescentado o botão "Apagar", com o seletor "btnApagarEvento".
<button type="button" class="btn btn-danger" id="btnApagarEvento">Apagar</button>No arquivo "custom.js", é necessário receber o seletor "btnApagarEvento". Em seguida, é verificado se existe e aguarda o clique do usuário sobre o botão. Se o usuário clicar no botão "Apagar", será apresentado o alerta para confirmar a exclusão. Após a confirmação do usuário, é necessário receber o ID do evento e enviar para o arquivo "apagar_evento.php".
// Receber o SELETOR apagar evento
const btnApagarEvento = document.getElementById("btnApagarEvento");
// Somente acessa o IF quando existir o SELETOR "formEditEvento"
if (btnApagarEvento) {
// Aguardar o usuario clicar no botao apagar
btnApagarEvento.addEventListener("click", async () => {
// Exibir uma caixa de diálogo de confirmação
const confirmacao = window.confirm("Tem certeza de que deseja apagar este evento?");
// Verificar se o usuário confirmou
if (confirmacao) {
// Receber o id do evento
var idEvento = document.getElementById("visualizar_id").textContent;
// Chamar o arquivo PHP responsável apagar o evento
const dados = await fetch("apagar_evento.php?id=" + idEvento);
}
});
}Criado o arquivo "apagar_evento.php". No mesmo, é recuperado o ID do evento enviado na URL e criada a QUERY para excluir o registro. No final, é retornado sucesso ou erro ao JavaScript.
<?php
// Incluir o arquivo com a conexão com banco de dados
include_once './conexao.php';
// Receber o id enviado pelo JavaScript
$id = filter_input(INPUT_GET, 'id', FILTER_SANITIZE_NUMBER_INT);
// Acessa o IF quando exite o id do evento
if (!empty($id)) {
// Criar a QUERY apagar evento no banco de dados
$query_apagar_event = "DELETE FROM events WHERE id=:id";
// Prepara a QUERY
$apagar_event = $conn->prepare($query_apagar_event);
// Substituir o link pelo valor
$apagar_event->bindParam(':id', $id);
// Verificar se consegui apagar corretamente
if($apagar_event->execute()){
$retorna = ['status' => true, 'msg' => 'Evento apagado com sucesso!'];
}else{
$retorna = ['status' => false, 'msg' => 'Erro: Evento não apagado!'];
}
} else { // Acessa o ELSE quando o id está vazio
$retorna = ['status' => false, 'msg' => 'Erro: Necessário enviar o id do evento!'];
}
// Converter o array em objeto e retornar para o JavaScript
echo json_encode($retorna);
No JavaScript, é recuperado o retorno do PHP, realizado a leitura dos dados de retorno. Se não conseguiu excluir o registro, é enviada a mensagem de erro para o HTML. Quando excluído corretamente, é enviada a mensagem de sucesso para o HTML, o evento é removido do FullCalendar e a janela modal é fechada.
// Realizar a leitura dos dados retornados pelo PHP
const resposta = await dados.json();
// Acessa o IF quando não cadastrar com sucesso
if(!resposta['status']){
// Enviar a mensagem para o HTML
msgViewEvento.innerHTML = `<div class="alert alert-danger" role="alert">${resposta['msg']}</div>`;
} else {
// Enviar a mensagem para o HTML
msg.innerHTML = `<div class="alert alert-success" role="alert">${resposta['msg']}</div>`;
// Enviar a mensagem para o HTML
msgViewEvento.innerHTML = "";
// Recuperar o evento no FullCalendar
const eventoExisteRemover = calendar.getEventById(idEvento);
// Verificar se encontrou o evento no FullCalendar
if(eventoExisteRemover){
// Remover o evento do calendário
eventoExisteRemover.remove();
}
// Chamar a função para remover a mensagem após 3 segundo
removerMsg();
// Fechar a janela modal
visualizarModal.hide();
}Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!