Como editar evento no FullCalendar com PHP
Neste tutorial, será apresentado como editar evento no FullCalendar com PHP.
Primeiramente, será mostrado como enviar os dados para o formulário editar com JavaScript.
Em seguida, será apresentado como criar formulário editar evento no FullCalendar.
Por fim, será mostrado como editar no banco de dados o evento.
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 cadastrar evento FullCalendar com PHP".
No arquivo "index.php", na janela modal de visualização, acrescentado o formulário de edição.
<div class="modal fade" id="visualizarModal" tabindex="-1" aria-labelledby="visualizarModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="visualizarModalLabel">Visualizar o Evento</h1>
<h1 class="modal-title fs-5" id="editarModalLabel" style="display: none;">Editar o Evento</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="visualizarEvento">
<dl class="row">
<dt class="col-sm-3">ID: </dt>
<dd class="col-sm-9" id="visualizar_id"></dd>
<dt class="col-sm-3">Título: </dt>
<dd class="col-sm-9" id="visualizar_title"></dd>
<dt class="col-sm-3">Início: </dt>
<dd class="col-sm-9" id="visualizar_start"></dd>
<dt class="col-sm-3">Fim: </dt>
<dd class="col-sm-9" id="visualizar_end"></dd>
</dl>
<button class="btn btn-warning" id="btnViewEditEvento">Editar</button>
</div>
<div id="editarEvento" style="display: none;">
<span id="msgEditEvento"></span>
<form method="POST" id="formEditEvento">
<input type="hidden" name="edit_id" id="edit_id">
<div class="row mb-3">
<label for="edit_title" class="col-sm-2 col-form-label">Título</label>
<div class="col-sm-10">
<input type="text" name="edit_title" class="form-control" id="edit_title" placeholder="Título do evento">
</div>
</div>
<div class="row mb-3">
<label for="edit_start" class="col-sm-2 col-form-label">Início</label>
<div class="col-sm-10">
<input type="datetime-local" name="edit_start" class="form-control" id="edit_start">
</div>
</div>
<div class="row mb-3">
<label for="edit_end" class="col-sm-2 col-form-label">Fim</label>
<div class="col-sm-10">
<input type="datetime-local" name="edit_end" class="form-control" id="edit_end">
</div>
</div>
<div class="row mb-3">
<label for="edit_color" class="col-sm-2 col-form-label">Cor</label>
<div class="col-sm-10">
<select name="edit_color" class="form-control" id="edit_color">
<option value="">Selecione</option>
<option style="color:#FFD700;" value="#FFD700">Amarelo</option>
<option style="color:#0071c5;" value="#0071c5">Azul Turquesa</option>
<option style="color:#FF4500;" value="#FF4500">Laranja</option>
<option style="color:#8B4513;" value="#8B4513">Marrom</option>
<option style="color:#1C1C1C;" value="#1C1C1C">Preto</option>
<option style="color:#436EEE;" value="#436EEE">Royal Blue</option>
<option style="color:#A020F0;" value="#A020F0">Roxo</option>
<option style="color:#40E0D0;" value="#40E0D0">Turquesa</option>
<option style="color:#228B22;" value="#228B22">Verde</option>
<option style="color:#8B0000;" value="#8B0000">Vermelho</option>
</select>
</div>
</div>
<button type="button" name="btnViewEvento" class="btn btn-primary" id="btnViewEvento">Cancelar</button>
<button type="submit" name="btnEditEvento" class="btn btn-warning" id="btnEditEvento">Salvar</button>
</form>
</div>
</div>
</div>
</div>
</div>Por padrão o formulário editar é ocultado, somente é apresentado quando clicar no botão editar, para apresentar o formulário e ocultar o conteúdo é implementado no JavaScript.
// Receber o SELETOR ocultar detalhes do evento e apresentar o formulário editar evento
const btnViewEditEvento = document.getElementById("btnViewEditEvento");
// Somente acessa o IF quando existir o SELETOR "btnViewEditEvento"
if (btnViewEditEvento) {
// Aguardar o usuario clicar no botao editar
btnViewEditEvento.addEventListener("click", () => {
// Ocultar os detalhes do evento
document.getElementById("visualizarEvento").style.display = "none";
document.getElementById("visualizarModalLabel").style.display = "none";
// Apresentar o formulário editar do evento
document.getElementById("editarEvento").style.display = "block";
document.getElementById("editarModalLabel").style.display = "block";
});
}Para preencher o formulário com os dados do evento que será editado, no arquivo "custom.js", na parte que identifica o clique do usuário sobre o evento, os dados são enviados para o formulário.
// Identificar o clique do usuário sobre o evento
eventClick: function (info) {
// Apresentar os detalhes do evento
document.getElementById("visualizarEvento").style.display = "block";
document.getElementById("visualizarModalLabel").style.display = "block";
// Ocultar o formulário editar do evento
document.getElementById("editarEvento").style.display = "none";
document.getElementById("editarModalLabel").style.display = "none";
// Enviar os dados do evento para o formulário editar
document.getElementById("edit_id").value = info.event.id;
document.getElementById("edit_title").value = info.event.title;
document.getElementById("edit_start").value = converterData(info.event.start);
document.getElementById("edit_end").value = info.event.end !== null ? converterData(info.event.end) : converterData(info.event.start);
document.getElementById("edit_color").value = info.event.backgroundColor;
// Abrir a janela modal visualizar
visualizarModal.show();
}Em seguida, quando o usuário clicar em salvar os dados do formulário, chama o JavaScript responsável por receber os dados do formulário e enviá-los para o arquivo "editar_evento.php".
// Receber o SELETOR do formulário editar evento
const formEditEvento = document.getElementById("formEditEvento");
// Receber o SELETOR da mensagem editar evento
const msgEditEvento = document.getElementById("msgEditEvento");
// Receber o SELETOR do botão editar evento
const btnEditEvento = document.getElementById("btnEditEvento");
// Somente acessa o IF quando existir o SELETOR "formEditEvento"
if (formEditEvento) {
// Aguardar o usuario clicar no botao editar
formEditEvento.addEventListener("submit", async (e) => {
// Não permitir a atualização da pagina
e.preventDefault();
// Apresentar no botão o texto salvando
btnEditEvento.value = "Salvando...";
// Receber os dados do formulário
const dadosForm = new FormData(formEditEvento);
// Chamar o arquivo PHP responsável em editar o evento
const dados = await fetch("editar_evento.php", {
method: "POST",
body: dadosForm
});
// Apresentar no botão o texto salvar
btnEditEvento.value = "Salvar";
});
}No arquivo "editar_evento.php", é necessário receber os dados enviados pelo JavaScript. Em seguida, a edição do evento no banco de dados é realizada e o status é retornado para o JavaScript.
<?php
// Incluir o arquivo com a conexão com banco de dados
include_once './conexao.php';
// Receber os dados enviado pelo JavaScript
$dados = filter_input_array(INPUT_POST, FILTER_DEFAULT);
// Criar a QUERY editar evento no banco de dados
$query_edit_event = "UPDATE events SET title=:title, color=:color, start=:start, end=:end WHERE id=:id";
// Prepara a QUERY
$edit_event = $conn->prepare($query_edit_event);
// Substituir o link pelo valor
$edit_event->bindParam(':title', $dados['edit_title']);
$edit_event->bindParam(':color', $dados['edit_color']);
$edit_event->bindParam(':start', $dados['edit_start']);
$edit_event->bindParam(':end', $dados['edit_end']);
$edit_event->bindParam(':id', $dados['edit_id']);
// Verificar se consegui editar corretamente
if ($edit_event->execute()) {
$retorna = ['status' => true, 'msg' => 'Evento editado com sucesso!', 'id' => $dados['edit_id'], 'title' => $dados['edit_title'], 'color' => $dados['edit_color'], 'start' => $dados['edit_start'], 'end' => $dados['edit_end']];
} else {
$retorna = ['status' => false, 'msg' => 'Erro: Evento não editado!'];
}
// Converter o array em objeto e retornar para o JavaScript
echo json_encode($retorna);
No JavaScript, é realizada a leitura das informações retornadas pelo arquivo PHP, verificando o status. Se não conseguiu editar, envia mensagem de erro para o HTML apresentar ao usuário; se conseguiu editar, envia mensagem de sucesso para o HTML, limpa o formulário, atualiza os dados do evento no calendário e fecha a janela modal.
// Realizar a leitura dos dados retornados pelo PHP
const resposta = await dados.json();
// Acessa o IF quando não editar com sucesso
if (!resposta['status']) {
// Enviar a mensagem para o HTML
msgEditEvento.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
msgEditEvento.innerHTML = "";
// Limpar o formulário
formEditEvento.reset();
// Recuperar o evento no FullCalendar pelo id
const eventoExiste = calendar.getEventById(resposta['id']);
// Verificar se encontrou o evento no FullCalendar pelo id
if(eventoExiste){
// Atualizar os atributos do evento com os novos valores do banco de dados
eventoExiste.setProp('title', resposta['title']);
eventoExiste.setProp('color', resposta['color']);
eventoExiste.setStart(resposta['start']);
eventoExiste.setEnd(resposta['end']);
}
// 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!