Como recuperar somente os eventos do usu√°rio no FullCalendar com PHP


Neste tutorial, ser√° apresentado como recuperar somente os eventos do usu√°rio no FullCalendar com PHP. 

Primeiramente, ser√° mostrado como criar o campo para selecionar o usu√°rio. 

Em seguida, ser√° apresentado como preencher o campo select com JavaScript. 

Por fim, ser√° mostrado como listar no FullCalendar os eventos do usu√°rio selecionado no campo select.


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 indicar para qual usuário pertence o evento no FullCalendar com PHP".

Criado o formul√°rio com o campo de pesquisa no arquivo "index.php".

<form class="ms-2 me-2">

    <div class="col-md-6 col-sm-12">
        <label class="form-label" for="user_id">Pesquisar eventos do usu√°rio</label>
        <select name="user_id" id="user_id" class="form-select">
            <option value="">Selecione</option>
        </select>
    </div>

</form>

No arquivo "custom.js", criada a função "listarUsuarios" para enviar a lista de usuários para o campo criado acima.

// Receber o seletor do campo listar os usu√°rios
const user = document.getElementById("user_id");

// Verificar se existe o seletor user_id no HTML
if (user) {

    // Chamar a função
    listarUsuarios();
}

// Função para recuperar os usuários
async function listarUsuarios() {

    // Chamar o arquivo PHP para recuperar os usu√°rios
    const dados = await fetch('listar_usuarios.php');

    // Ler os dados retornado do PHP
    const resposta = await dados.json();
    //console.log(resposta);

    // Verificar se status é TRUE e acessa o IF, senão acessa o ELSE e retorna a mensagem de erro 
    if (resposta['status']) {

        // Criar a vari√°vel com as op√ß√Ķes para o campo SELECT
        var opcoes = `<option value="">Selecionar ou limpar</option>`;

        // Percorrer o array de usu√°rios
        for (var i = 0; i < resposta.dados.length; i++) {

            // Atribuir o usuário como opção para o campo SELECT
            opcoes += `<option value="${resposta.dados[i]['id']}">${resposta.dados[i]['name']}</option>`;
        }

        // Enviar para o HTML as op√ß√Ķes para o campo SELECT
        user.innerHTML = opcoes;
    } else {

        // Enviar para o HTML as op√ß√Ķes para o campo SELECT
        user.innerHTML = `<option value="">${resposta['msg']}</option>`;
    }
}

Com o formulário criado e o campo preenchido com os usuários, é necessário identificar no JavaScript que o usuário do sistema selecionou uma opção no campo. Após identificar, com JavaScript, a seleção de uma opção no formulário, é chamada a função para carregar os eventos. Abaixo está a implementação para aguardar o usuário selecionar uma opção e chamar a função para recuperar os eventos.

// Receber o seletor user_id do campo select
var userId = document.getElementById('user_id');

// Aguardar o usu√°rio selecionar valor no campo selecionar usu√°rio
userId.addEventListener('change', function () {
    //console.log("Recuperar os eventos do usu√°rio: " + userId.value);

    // Chamar a função carregar eventos
    calendar = carregarEventos();

    // Renderizar o calend√°rio
    calendar.render();

});

Para recuperar somente os eventos do usuário no FullCalendar, é necessário receber o ID do usuário e enviá-lo para o arquivo PHP responsável por recuperar os eventos.

// Receber o id do usu√°rio do campo Select
var user_id = document.getElementById('user_id').value;

// Chamar o arquivo PHP para recuperar os eventos
events: 'listar_evento.php?user_id=' + user_id,

No arquivo PHP que recupera os eventos armazenados no banco de dados, verifica-se se est√° sendo enviado o ID do usu√°rio. Se existir o ID do usu√°rio, s√£o recuperados apenas os eventos correspondentes a ele. Sen√£o, s√£o recuperados todos os eventos.

<?php

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

// Receber o id do usu√°rio
$user_id = filter_input(INPUT_GET, 'user_id', FILTER_SANITIZE_NUMBER_INT);

// Verificar se o par√Ęmetro user_id foi enviado
if (!empty($user_id)) {

    // QUERY para recuperar os eventos
    $query_events = "SELECT evt.id, evt.title, evt.color, evt.start, evt.end, evt.obs, evt.user_id,
                usr.name, usr.email
                FROM events AS evt
                INNER JOIN users AS usr ON usr.id = evt.user_id
                WHERE usr.id = :user_id";

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

    // Atribuir o valor do par√Ęmetro
    $result_events->bindParam(':user_id', $user_id, PDO::PARAM_INT);

} else {

    // QUERY para recuperar os eventos
    $query_events = "SELECT evt.id, evt.title, evt.color, evt.start, evt.end, evt.obs, evt.user_id,
                usr.name, usr.email
                FROM events AS evt
                INNER JOIN users AS usr ON usr.id = evt.user_id";

    // 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,
        'obs' => $obs,
        'user_id' => $user_id,
        'name' => $name,
        'email' => $email
    ];
}

echo json_encode($eventos);

No vídeo, também é apresentado como manter o evento ao editar o evento do usuário e não alterar o usuário proprietário do evento. Se houver uma alteração no dono do evento, o evento é removido da lista de eventos do usuário que está sendo visualizado.

Baixar o código-fonte completo do projeto.

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