Como ver detalhes do evento na janela modal com FullCalendar e Bootstrap

---

Publicado 21 de novembro de 2023

Neste tutorial, será apresentado como criar uma janela modal para ver detalhes do evento com o FullCalendar e o Bootstrap. 

Primeiramente, será mostrado como recuperar os detalhes do evento no FullCalendar. 

Em seguida, será apresentado como carregar a janela modal com JavaScript. 

Por fim, será mostrado como enviar dados do JavaScript para a janela modal.

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 usar FullCalendar com Bootstrap 5".

Primeiro, é criada a janela modal de visualização para receber os dados do evento no arquivo "index.php".

<!-- Modal Visualizar -->
<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>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <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>

            </div>
        </div>
    </div>
</div>

Em seguida, no arquivo "js/custom.js", é identificado o clique do usuário sobre o evento no calendário. Também é necessário obter o seletor da janela modal de visualização criada anteriormente. Posteriormente, as informações do evento são enviadas para a janela modal, e, por fim, a janela modal é aberta.

// Identificar o clique do usuário sobre o evento
eventClick: function (info) {

    // Receber o SELETOR da janela modal
    const visualizarModal = new bootstrap.Modal(document.getElementById("visualizarModal")); 

    // Enviar para a janela modal os dados do evento
    document.getElementById("visualizar_id").innerText = info.event.id;
    document.getElementById("visualizar_title").innerText = info.event.title;
    document.getElementById("visualizar_start").innerText = info.event.start.toLocaleString();
    document.getElementById("visualizar_end").innerText = info.event.end.toLocaleString();

    // Abrir a janela modal
    visualizarModal.show();
}

Baixar o código-fonte completo do projeto.

Bom, era isso. Espero que o tutorial tenha sido útil!