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!