Como listar os agendamentos do cliente no FullCalendar com PHP
Neste tutorial, será apresentado como listar os agendamentos do cliente no FullCalendar com PHP.
Primeiramente, será mostrado como criar o campo para pesquisar o evento do cliente.
Em seguida, será apresentado como recuperar do banco de dados os eventos do usuário.
Por fim, será mostrado como pesquisar eventos do profissional e do cliente.
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 cadastrar profissional e cliente no FullCalendar com PHP".
No arquivo "index.php", criado o campo para receber os clientes.
<div class="col-md-6 col-sm-12">
<label class="form-label" for="client_id">Pesquisar eventos do cliente</label>
<select name="client_id" id="client_id" class="form-select">
<option value="">Selecione</option>
</select>
</div>No arquivo "custom.js", foi implementado para que, ao ser carregada a página, chame a função "listarClientes". Nessa função, é realizada a chamada do arquivo "listar_usuarios.php", responsável por recuperar os clientes do banco de dados. Após o JavaScript receber o array de usuários, ele é enviado para o HTML.
// Receber o seletor do campo listar os clientes
const client = document.getElementById("client_id");
// Verificar se existe o seletor client_id no HTML
if (client) {
// Chamar a função
listarClientes();
}
// Função para recuperar os clientes
async function listarClientes() {
// Chamar o arquivo PHP para recuperar os clientes
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 clientes
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
client.innerHTML = opcoes;
} else {
// Enviar para o HTML as opções para o campo SELECT
client.innerHTML = `<option value="">${resposta['msg']}</option>`;
}
}
Quando o usuário selecionar o cliente no campo "Pesquisar eventos do cliente", o JavaScript identificará qual cliente o usuário do sistema escolheu e chamará a função responsável por carregar os eventos.
// Receber o seletor client_id do campo select
var clientId = document.getElementById('client_id');
// Aguardar o usuário selecionar valor no campo selecionar cliente
clientId.addEventListener('change', function () {
//console.log("Recuperar os eventos do cliente: " + clientId.value);
// Chamar a função carregar eventos
calendar = carregarEventos();
// Renderizar o calendário
calendar.render();
});Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!