Como pesquisar cliente no FullCalendar com PHP
Neste tutorial, será apresentado como pesquisar clientes no FullCalendar com PHP.
Primeiramente, será mostrado como criar o campo para pesquisar clientes.
Em seguida, será apresentado como pesquisar clientes no banco de dados.
Por fim, será mostrado como recuperar do banco de dados os agendamentos do usuário.
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 listar os agendamentos do cliente no FullCalendar com PHP".
Criado no arquivo "index.php" o campo pesquisar cliente.
<div class="col-md-5 col-sm-12">
<label class="form-label" for="client_id">Pesquisar eventos do cliente</label>
<input type="text" name="client_id" id="client_id" data-target-pesq-client-id="" class="form-control" placeholder="Nome do cliente">
<!-- Carregar as opções retornada do BD -->
<span id="resultado_pesquisa" style="position: absolute; z-index: 1;"></span>
</div>Criado o arquivo "pesquisar_cliente.js", nele foi implementado o JavaScript que recebe o valor do campo de pesquisa criado acima. Após receber o valor, faz a chamada ao arquivo "pesquisar_clientes.php", para que ele recupere os clientes do banco de dados. Após recuperar os usuários, o JavaScript envia os dados para o HTML.
// Executar quando o documento HTML for completamente carregado
document.addEventListener('DOMContentLoaded', function () {
// Receber o SELETOR do HTML
const inputNomeCliente = document.getElementById('client_id');
const resultadoPesquisa = document.getElementById('resultado_pesquisa');
// Somente acessa o IF quando existir o SELETOR "inputNomeCliente"
if (inputNomeCliente) {
// Aguardar o usuario clicar no campo pesquisar
inputNomeCliente.addEventListener("input", async () => {
// Acessa o IF quando o usuário digitar mais de 3 caracteres
if (inputNomeCliente.value.length >= 3) {
// Chamar o arquivo PHP para recuperar os clientes
const dados = await fetch('pesquisar_clientes.php?name=' + inputNomeCliente.value);
// Ler os dados retornado do PHP
const resposta = await dados.json();
// Criar a variável com a lista
var opcoes = "<ul class='list-group'>";
// Verificar se status é TRUE e acessa o IF, senão acessa o ELSE e retorna a mensagem de erro
if (resposta['status']) {
for (var i = 0; i < resposta.dados.length; i++) {
opcoes += `<li class='list-group-item list-group-item-action' data-target-cliente-id='${resposta.dados[i]['id']}' style='cursor: pointer;'>${resposta.dados[i]['name']}</li>`;
}
} else {
opcoes += `<li class='list-group-item disabled'>${resposta['msg']}</li>`;
}
// Finalizar a lista
opcoes += "</ul>";
// Enviar para o HTML as opções para o campo SELECT
resultadoPesquisa.innerHTML = opcoes;
}
// Carregar o JS responsável em receber o id do cliente
receberClienteParaPesquisar();
});
}
// Aguardar o click do usuário fora do dropdown para fechar o dropdown
document.addEventListener('click', function (event) {
const validar_clique = inputNomeCliente.contains(event.target);
if (!validar_clique) {
document.getElementById('resultado_pesquisa').innerHTML = '';
}
});
});
Conforme o cliente que o usuário do sistema selecionar, é identificado no arquivo "carregar_eventos_cliente.js" e os eventos do cliente são carregados.
// Função para receber o id do cliente e pesuisar os eventos
function receberClienteParaPesquisar() {
// Obter todos os elementos li da lista
const listaItens = document.querySelectorAll('.list-group-item');
// Adicionar um ouvinte de eventos a cada item da lista
listaItens.forEach(item => {
// Identificar o clique do usuário
item.addEventListener('click', function () {
// Receber o valor do atributo data-target-cliente-id
const clienteId = this.getAttribute('data-target-cliente-id');
// Receber o valor que está dentro da tag <li></li>
const clienteNome = this.textContent.trim();
// Enviar o nome do cliente para o campo pesquisar cliente
document.getElementById('client_id').value = clienteNome;
// Enviar o valor para o atributo 'data-target-pesq-client-id' do campo pesquisar cliente
document.getElementById('client_id').setAttribute('data-target-pesq-client-id', clienteId);
// Chamar a função carregar eventos
var calendar = carregarEventos();
// Renderizar o calendário
calendar.render();
});
});
}Para carregar os eventos do cliente, no arquivo "carregar_eventos.js", é necessário receber o ID do cliente.
// Receber atributo do campo Select
var inputClienteId = document.getElementById('client_id');
// Recupere o valor do atributo data-target-pesq-client-id
const client_id = inputClienteId.getAttribute('data-target-pesq-client-id');Baixar o código-fonte completo do projeto.
Bom, era isso. Espero que o tutorial tenha sido útil!