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


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!