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!