Como acrescentar nova coluna no FullCalendar com PHP
Neste tutorial, será apresentado como adicionar uma nova coluna no FullCalendar com PHP.
Primeiramente, será mostrado como incluir a coluna de observação no FullCalendar e enviá-la para o calendário.
Em seguida, será apresentado como atualizar o evento no calendário após cadastrar o evento no banco de dados.
Por fim, será mostrado como atualizar o evento no calendário após editar o evento no banco de dados com a nova coluna de observação.
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 apagar evento no FullCalendar com PHP".
Acrescentado na tabela "events" a coluna "obs".
ALTER TABLE `events` ADD `obs` TEXT NOT NULL AFTER `end`;No arquivo "listar_evento.php", foi acrescentada a coluna "obs" na QUERY responsável por recuperar os eventos do banco de dados.
$query_events = "SELECT id, title, color, start, end, obs FROM events";Também retornado para o JavaScript o valor da coluna "obs".
$eventos[] = [
'id' => $id,
'title' => $title,
'color' => $color,
'start' => $start,
'end' => $end,
'obs' => $obs
];No arquivo "index.php", na janela modal de visualização, acrescentado o seletor "visualizar_obs" para receber a observação enviada pelo JavaScript.
<dt class="col-sm-3">Observação: </dt>
<dd class="col-sm-9" id="visualizar_obs"></dd>No arquivo "custom.js", para enviar o valor que está em "obs", uma coluna que não é padrão do FullCalendar, é necessário utilizar "extendedProps".
document.getElementById("visualizar_obs").innerText = info.event.extendedProps.obs;A mesma ideia se aplica ao formulário de edição. Para enviar o valor do "obs" do JavaScript para o formulário de edição, é utilizado "extendedProps.
document.getElementById("edit_obs").value = info.event.extendedProps.obs;No arquivo "index.php", no formulário editar, acrescentado o campo "obs".
<div class="row mb-3">
<label for="edit_obs" class="col-sm-2 col-form-label">Observação</label>
<div class="col-sm-10">
<input type="text" name="edit_obs" class="form-control" id="edit_obs" placeholder="Observação do evento">
</div>
</div>Em seguida, no arquivo "editar_evento.php", é necessário acrescentar a coluna "obs" na QUERY de atualização.
$query_edit_event = "UPDATE events SET title=:title, color=:color, start=:start, end=:end, obs=:obs WHERE id=:id";Também substituir o link ":obs" da QUERY pelo valor que vem do formulário.
$edit_event->bindParam(':obs', $dados['edit_obs']);Por fim, retornar o valor da "obs" para o JavaScript.
'obs' => $dados['edit_obs']No JavaScript, para atualizar os dados do evento que são apresentados para o usuário, a coluna "obs", que não é padrão do FullCalendar, necessita utilizar "setExtendedProp".
eventoExiste.setExtendedProp('obs', resposta['obs']);Para cadastrar um valor na coluna "obs" no FullCalendar, uma coluna que não é padrão, primeiro é criado o campo "obs" no arquivo "index.php", no formulário de cadastro.
<div class="row mb-3">
<label for="cad_obs" class="col-sm-2 col-form-label">Observação</label>
<div class="col-sm-10">
<input type="text" name="cad_obs" class="form-control" id="cad_obs" placeholder="Observação do evento">
</div>
</div>No arquivo "cadastrar_evento.php", acrescentada a coluna "obs" na QUERY.
$query_cad_event = "INSERT INTO events (title, color, start, end, obs) VALUES (:title, :color, :start, :end, :obs)";Em seguida, substituÃdo o link ":obs" da QUERY pelo valor que vem do formulário de cadastro.
$cad_event->bindParam(':obs', $dados['cad_obs']);Retornado o valor que está em "obs" para o JavaScript.
'obs' => $dados['cad_obs']No JavaScript, é atribuÃdo o valor que está em "obs" no evento para ser apresentado ao usuário.
obs: resposta['obs'],Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!