Como cadastrar evento FullCalendar com PHP
Neste tutorial, será apresentado como cadastrar um evento no FullCalendar com PHP.
Primeiramente, será mostrado como criar o formulário na janela modal com o Bootstrap.
Em seguida, será apresentado como receber os dados do formulário com JavaScript e salvá-los no banco de dados com PHP.
Por fim, será mostrado como atualizar a lista de eventos no FullCalendar.
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 ver detalhes do evento na janela modal com FullCalendar e Bootstrap".
Criada no arquivo "index.php" a janela modal com o formulário para cadastrar evento no FullCalendar.
<!-- Modal Cadastrar -->
<div class="modal fade" id="cadastrarModal" tabindex="-1" aria-labelledby="cadastrarModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="cadastrarModalLabel">Cadastrar o Evento</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<span id="msgCadEvento"></span>
<form method="POST" id="formCadEvento">
<div class="row mb-3">
<label for="cad_title" class="col-sm-2 col-form-label">Título</label>
<div class="col-sm-10">
<input type="text" name="cad_title" class="form-control" id="cad_title" placeholder="Título do evento">
</div>
</div>
<div class="row mb-3">
<label for="cad_start" class="col-sm-2 col-form-label">Início</label>
<div class="col-sm-10">
<input type="datetime-local" name="cad_start" class="form-control" id="cad_start">
</div>
</div>
<div class="row mb-3">
<label for="cad_end" class="col-sm-2 col-form-label">Fim</label>
<div class="col-sm-10">
<input type="datetime-local" name="cad_end" class="form-control" id="cad_end">
</div>
</div>
<div class="row mb-3">
<label for="cad_color" class="col-sm-2 col-form-label">Cor</label>
<div class="col-sm-10">
<select name="cad_color" class="form-control" id="cad_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="submit" name="btnCadEvento" class="btn btn-success" id="btnCadEvento">Cadastrar</button>
</form>
</div>
</div>
</div>
</div>Em seguida, no "js/custom.js", é implementado para receber o seletor "formCadEvento", que identifica o formulário. Com o seletor recuperado, é verificado se o mesmo existe e aguarda o clique do usuário no botão cadastrar.
// Receber o SELETOR do formulário cadastrar evento
const formCadEvento = document.getElementById("formCadEvento");
// Somente acessa o IF quando existir o SELETOR "formCadEvento"
if (formCadEvento) {
// Aguardar o usuario clicar no botao cadastrar
formCadEvento.addEventListener("submit", async (e) => {
// Não permitir a atualização da pagina
e.preventDefault();
});
}Necessário receber os dados do formulário com JavaScript, enviá-los para o arquivo "cadastrar_evento.php", que será responsável por cadastrar no banco de dados.
// Receber o SELETOR do formulário cadastrar evento
const formCadEvento = document.getElementById("formCadEvento");
// Somente acessa o IF quando existir o SELETOR "formCadEvento"
if (formCadEvento) {
// Aguardar o usuario clicar no botao cadastrar
formCadEvento.addEventListener("submit", async (e) => {
// Não permitir a atualização da pagina
e.preventDefault();
// Apresentar no botão o texto salvando
btnCadEvento.value = "Salvando...";
// Receber os dados do formulário
const dadosForm = new FormData(formCadEvento);
// Chamar o arquivo PHP responsável em salvar o evento
const dados = await fetch("cadastrar_evento.php", {
method: "POST",
body: dadosForm
});
});
}Necessário criar o arquivo "cadastrar_evento.php". Nele, é incluída a conexão com o banco de dados, implementada a recepção dos dados do JavaScript com PHP, criada a QUERY SQL para o cadastro no banco de dados e, por fim, a mensagem de sucesso ou erro é retornada ao 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 cadastrar evento no banco de dados
$query_cad_event = "INSERT INTO events (title, color, start, end) VALUES (:title, :color, :start, :end)";
// Prepara a QUERY
$cad_event = $conn->prepare($query_cad_event);
// Substituir o link pelo valor
$cad_event->bindParam(':title', $dados['cad_title']);
$cad_event->bindParam(':color', $dados['cad_color']);
$cad_event->bindParam(':start', $dados['cad_start']);
$cad_event->bindParam(':end', $dados['cad_end']);
// Verificar se consegui cadastrar corretamente
if ($cad_event->execute()) {
$retorna = ['status' => true, 'msg' => 'Evento cadastrado com sucesso!', 'id' => $conn->lastInsertId(), 'title' => $dados['cad_title'], 'color' => $dados['cad_color'], 'start' => $dados['cad_start'], 'end' => $dados['cad_end']];
} else {
$retorna = ['status' => false, 'msg' => 'Erro: Evento não cadastrado!'];
}
// Converter o array em objeto e retornar para o JavaScript
echo json_encode($retorna);No JavaScript, é verificado o status que o arquivo PHP retorna. Se for um erro, a mensagem de erro é enviada para o HTML; caso contrário, a mensagem de sucesso é enviada ao HTML, o formulário é limpo, o evento é adicionado ao 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
msgCadEvento.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
msgCadEvento.innerHTML = "";
// Limpar o formulário
formCadEvento.reset();
// Criar o objeto com os dados do evento
const novoEvento = {
id: resposta['id'],
title: resposta['title'],
color: resposta['color'],
start: resposta['start'],
end: resposta['end'],
}
// Adicionar o evento ao calendário
calendar.addEvent(novoEvento);
// Chamar a função para remover a mensagem após 3 segundo
removerMsg();
// Fechar a janela modal
cadastrarModal.hide();
}
// Apresentar no botão o texto Cadastrar
btnCadEvento.value = "Cadastrar";Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!