Como cadastrar profissional e cliente no FullCalendar com PHP

---

Publicado 20 de fevereiro de 2024

Neste tutorial, será apresentado como cadastrar profissional e cliente no FullCalendar com PHP. 

Primeiramente, será mostrado como criar um evento no FullCalendar relacionando profissional e paciente. 

Em seguida, será apresentado como imprimir os detalhes do profissional e do cliente na janela modal visualizar no FullCalendar. 

Por fim, será mostrado como editar o evento no FullCalendar relacionando profissional e 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 recuperar somente os eventos do usuário no FullCalendar com PHP".

No arquivo "index.php", na janela modal com o formulário cadastrar, acrescentado o campo cliente.

<div class="row mb-3">
    <label for="cad_client_id" class="col-sm-2 col-form-label">Cliente</label>
    <div class="col-sm-10">
        <select name="cad_client_id" class="form-control" id="cad_client_id">
            <option value="">Selecione</option>
        </select>
    </div>
</div>

No arquivo 'custom.js', é feita a requisição para o arquivo 'listar_usuarios.php', que tem o objetivo de recuperar os usuários cadastrados no banco de dados.

Com os usuários recuperados, eles são enviados para o campo criado anteriormente no arquivo 'index.php'.

// Receber o SELETOR do campo cliente do formulário cadastrar
var cadClientId = document.getElementById('cad_client_id');

// Chamar o arquivo PHP responsável em recuperar os clientes do banco de dados
const dadosClient = await fetch('listar_usuarios.php');

// Ler os dados
const respostaClient = await dadosClient.json();
//console.log(respostaClient);

// Acessar o IF quando encontrar cliente no banco de dados
if (respostaClient['status']) {

    // Criar a opção selecione para o campo select clientes
    var opcoes = '<option value="">Selecione</option>';

    // Percorrer a lista de clientes
    for (var i = 0; i < respostaClient.dados.length; i++) {

        // Criar a lista de opções para o campo select clientes
        opcoes += `<option value="${respostaClient.dados[i]['id']}">${respostaClient.dados[i]['name']}</option>`;

    }

    // Enviar as opções para o campo select no HTML
    cadClientId.innerHTML = opcoes;

} else {

    // Enviar a opção vazia para o campo select no HTML
    cadClientId.innerHTML = `<option value=''>${respostaClient['msg']}</option>`;

}

Com o formulário preenchido pelos usuários, no momento do preenchimento é necessário selecionar o cliente.

Ao clicar no botão cadastrar do formulário, os dados são enviados para o JavaScript, ou seja, para o arquivo 'custom.js'. Este, por sua vez, recebe os dados do formulário e os envia para o arquivo 'cadastrar_evento.php'.

No arquivo 'cadastrar_evento.php', é necessário acrescentar a coluna 'client_id' na QUERY.

É importante adicionar a coluna 'client_id' na tabela 'events' no banco de dados.

// Criar a QUERY cadastrar evento no banco de dados
$query_cad_event = "INSERT INTO events (title, color, start, end, obs, user_id, client_id) VALUES (:title, :color, :start, :end, :obs, :user_id, :client_id)";

// Substituir o link pelo valor
$cad_event->bindParam(':client_id', $dados['cad_client_id']);

// Verificar se consegui cadastrar corretamente
if ($cad_event->execute()) {
    $retorna = [
        'client_id' => $row_client['id'], 
        'client_name' => $row_client['name'], 
        'client_email' => $row_client['email']
    ];
}

Após o cadastro, os dados do cliente são retornados para o JavaScript, ou seja, para o arquivo 'custom.js', onde é criado um objeto com os dados do evento.

// Criar o objeto com os dados do evento
const novoEvento = {
    id: resposta['id'],
    title: resposta['title'],
    color: resposta['color'],
    start: resposta['start'],
    end: resposta['end'],
    obs: resposta['obs'],
    user_id: resposta['user_id'],
    name: resposta['name'],
    email: resposta['email'],
    client_id: resposta['client_id'],
    client_name: resposta['client_name'],
    client_email: resposta['client_email'],
}

Em seguida, os dados são enviados para a janela modal de visualização no arquivo 'index.php'.

document.getElementById("visualizar_client_id").innerText = info.event.extendedProps.client_id;
document.getElementById("visualizar_client_name").innerText = info.event.extendedProps.client_name;
document.getElementById("visualizar_client_email").innerText = info.event.extendedProps.client_email;

Para finalizar, são implementados no arquivo 'index.php', na janela modal de visualização, os seletores que recebem os dados do cliente.

<dt class="col-sm-3">ID do Cliente: </dt>
<dd class="col-sm-9" id="visualizar_client_id"></dd>

<dt class="col-sm-3">Nome do Cliente: </dt>
<dd class="col-sm-9" id="visualizar_client_name"></dd>

<dt class="col-sm-3">E-mail do Cliente: </dt>
<dd class="col-sm-9" id="visualizar_client_email"></dd>

No vídeo, também é apresentado como editar os dados do evento e o cliente.

Baixar o código-fonte completo do projeto.

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