Como usar FullCalendar com PHP e listar eventos do banco de dados

Publicado 30 de outubro de 2023

Neste tutorial, será apresentado como usar o FullCalendar versão 6 com PHP e listar eventos do banco de dados.

Primeiramente, será mostrado como usar o FullCalendar com PHP. 

Em seguida, será apresentado como recuperar registros do banco de dados. 

Por fim, será mostrado como listar os eventos no calendário com PHP e o 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, é criado o arquivo "index.php" com a estrutura básica do HTML e  incluído o JavaScript do FullCalendar.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Celke - FullCalendar</title>
</head>

<body>

    <div id='calendar'></div>

    <script src='js/index.global.min.js'></script>
    <script src='js/core/locales-all.global.min.js'></script>

</body>

</html>

Em seguida, é criado o arquivo "css/custom.css" com a personalização básica da página.

body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
}

#calendar {
    max-width: 1100px;
    margin: 0 auto;
}

Incluído o arquivo CSS no arquivo "index.php".

<link href="css/custom.css" rel="stylesheet">

Criado o arquivo "js/custom.js", nele é implementado o FullCalendar. No código abaixo, está explicado o código e suas funcionalidades.

// Executar quando o documento HTML for completamente carregado
document.addEventListener('DOMContentLoaded', function() {

    // Receber o SELETOR calendar do atributo id
    var calendarEl = document.getElementById('calendar');

    // Instanciar FullCalendar.Calendar e atribuir a variável calendar
    var calendar = new FullCalendar.Calendar(calendarEl, {

        // Criar o cabeçalho do calendário
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },

        // Definir o idioma usado no calendário
        locale: 'pt-br',

        // Definir a data inicial
        //initialDate: '2023-01-12',
        //initialDate: '2023-10-12',

        // Permitir clicar nos nomes dos dias da semana 
        navLinks: true, 

        // Permitir clicar e arrastar o mouse sobre um ou vários dias no calendário
        selectable: true,

        // Indicar visualmente a área que será selecionada antes que o usuário solte o botão do mouse para confirmar a seleção
        selectMirror: true,

        // Permitir arrastar e redimensionar os eventos diretamente no calendário.
        editable: true,

        // Número máximo de eventos em um determinado dia, se for true, o número de eventos será limitado à altura da célula do dia
        dayMaxEvents: true, 

        events: 'listar_evento.php'
    });

    calendar.render();
});

Criado o seletor "calendar" no arquivo "index.php" para receber o calendário.

<div id='calendar'></div>

Para salvar os eventos, criado a base de dados "celke" e a tabela "events".

CREATE TABLE IF NOT EXISTS `events` (
  `id` int NOT NULL AUTO_INCREMENT,
  `title` varchar(220) COLLATE utf8mb4_unicode_ci NOT NULL,
  `color` varchar(45) COLLATE utf8mb4_unicode_ci NOT NULL,
  `start` datetime NOT NULL,
  `end` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=0 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

Criado o arquivo "conexao.php" para estabelecer a conexão do PHP com o banco de dados.

<?php

// Inicio da conexão com o banco de dados utilizando PDO
$host = "localhost";
$user = "root";
$pass = "";
$dbname = "celke";
$port = 3306;

try {
    // Conexão com a porta
    //$conn = new PDO("mysql:host=$host;port=$port;dbname=" . $dbname, $user, $pass);

    //Conexão sem a porta
    $conn = new PDO("mysql:host=$host;dbname=" . $dbname, $user, $pass);
    //echo "Conexão com banco de dados realizado com sucesso.";
} catch (PDOException $err) {
    die("Erro: Conexão com banco de dados não realizado com sucesso. Erro gerado " . $err->getMessage());
}
    // Fim da conexão com o banco de dados utilizando PDO

Criado o arquivo "listar_evento.php" para recuperar os eventos do banco de dados.

<?php

// Incluir o arquivo com a conexão com banco de dados
include_once './conexao.php';

// QUERY para recuperar os eventos
$query_events = "SELECT id, title, color, start, end FROM events";

// Prepara a QUERY
$result_events = $conn->prepare($query_events);

// Executar a QUERY
$result_events->execute();

// Criar o array que recebe os eventos
$eventos = [];

// Percorrer a lista de registros retornado do banco de dados
while($row_events = $result_events->fetch(PDO::FETCH_ASSOC)){

    // Extrair o array
    extract($row_events);

    $eventos[] = [
        'id' => $id,
        'title' => $title,
        'color' => $color,
        'start' => $start,
        'end' => $end,
    ];
}

echo json_encode($eventos);

Baixar o código-fonte completo do projeto.

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