How to play recovered bank values in inputs using Fullcalendar

Asked

Viewed 106 times

-1

I’m having a hard time playing recovered values from a bench to fields of a form for later edition, I’ve read the documentation, I’ve looked for examples and even then I couldn’t, I’ve even checked a post that you have right here in the OS. To display the information when the calendar is called is right, the script that does this is this. The page that lists events: pListaAgendamento.php

// AGENDAMENTOS
$sqlAgenda = "SELECT * FROM dvsAgendaSala";
$stm = $conexao->prepare($sqlAgenda);
$stm->execute();    
$ResAgenda = $stm->fetchAll(PDO::FETCH_OBJ); 
// FECHANDO A CONSULTA
$stm->closeCursor(); 

$eventos = [];

foreach ($ResAgenda as $ResAgendamento) {

    $eventos[] = [
        'id' => $ResAgendamento->Id, 
        'idsalareuniao' => $ResAgendamento->IdSalaReuniao, 
        'title' => $ResAgendamento->Motivo,         
        'start' => $ResAgendamento->DataHoraInicial, 
        'end' => $ResAgendamento->DataHoraFinal, 
        'tipo' => $ResAgendamento->IdTipo,
        'FoneResponsavel' => $ResAgendamento->FoneResponsavel,
        'EmailResponsavel' => $ResAgendamento->FoneResponsavel,
        ];

}

The values ID, title, start and end which are taken from the calendar itself are played on the corresponding inputs correctly, but the FoneResponsavel, EmailResponsavel and idsalareuniao nay. What I tried to do can be seen here on the page personalizado.js:

document.addEventListener('DOMContentLoaded', function () {
    var calendarEl = document.getElementById('calendar');
    // DATA E HORA ATUAL 
    var dataatual = new Date();
    var calendar = new FullCalendar.Calendar(calendarEl, {
        locale: 'pt-br',
        plugins: ['interaction', 'dayGrid', 'timeGrid' ],
        defaultView: 'dayGridMonth',
        defaultDate: dataatual,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        editable: true,
        eventLimit: true,
        events: 'pListaAgendamento.php',
                 FoneResponsavel: FoneResponsavel,
                 EmailResponsavel: EmailResponsavel,
        extraParams: function () {
            return {
                cachebuster: new Date().valueOf()
            };
        },
        // DISPARA EVENTO QUANDO USUÁRIO CLICA NO LINK
        eventClick: function (info) {
            // RESGATE DAS INFORMAÇÕES DO PROJETO VINDO DA PÁGINA list_eventos.php
            // info CONTÊM AS INFORMAÇÕES DA API
            info.jsEvent.preventDefault(); 
            console.log(info.event);
            // TEXTO PARA VISUALIZAR DETALHES
            $('#visualizar #Id').text(info.event.id);
            $('#visualizar #Motivo').text(info.event.title);
            // VALORES PARA EDIÇÃO
            $('#visualizar #Id').val(info.event.id);            
            $('#visualizar #Motivo').val(info.event.title);
            $('#visualizar #Telefone').val(event.FoneResponsavel);
            $('#visualizar #Email').val(event.EmailResponsavel);
            // FORMATA A DATA PARA O PATRÃO PORTUGUÊS - INFORMAÇÃO
            $('#visualizar #DataInicial').text(info.event.start.toLocaleString());
            $('#visualizar #DataFinal').text(info.event.end.toLocaleString());
            // FORMATA A DATA PARA O PATRÃO PORTUGUÊS - INPUT´S
            $('#visualizar #DataInicial').val(info.event.start.toLocaleString());
            $('#visualizar #DataFinal').val(info.event.end.toLocaleString());
            // EXIBINDO A MODAL
            $('#visualizar').modal('show');
        },
        selectable: true,
        // SELECIONA A DATA AO CLICAR 
        select: function (info) {
            // ATRIBUINDO A DATA E HORA - INÍCIO E FIM AO FORMULÁRIO
            $('#cadastrar #DataInicial').val(info.start.toLocaleString());
            $('#cadastrar #DataFinal').val(info.end.toLocaleString());
            $('#cadastrar').modal('show');
        }
    });
    calendar.render();
});

After Events: I have the page call that rescues the fields posted above and tried to rescue some information like this:

events: 'pListaAgendamento.php',
                 FoneResponsavel: FoneResponsavel,
                 EmailResponsavel: EmailResponsavel,

Trying to throw in inputs like this:

// VALORES PARA EDIÇÃO
$('#visualizar #Id').val(info.event.id);            
$('#visualizar #Motivo').val(info.event.title);
$('#visualizar #Telefone').val(event.FoneResponsavel);
$('#visualizar #Email').val(event.EmailResponsavel);

1 answer

0


The first negative of the question made me go back to the browser inspector and go seeing the possibilities of Fullcalendar, I will not exclude the question but answer it for future queries if necessary. In the inspector I found the tag extendedProps that showed me the extra fields of my form and then it became easy to retrieve them and play them on the editing form. What used to be this:

// VALORES PARA EDIÇÃO
$('#visualizar #Id').val(info.event.id);            
$('#visualizar #Motivo').val(info.event.title);
$('#visualizar #Telefone').val(event.FoneResponsavel);
$('#visualizar #Email').val(event.EmailResponsavel);

Now it’s like this:

// VALORES PARA EDIÇÃO
$('#visualizar #Id').val(info.event.id);            
$('#visualizar #Motivo').val(info.event.title);
$('#visualizar #Email').val(info.event.extendedProps.EmailResponsavel);
$('#visualizar #Telefone').val(info.event.extendedProps.FoneResponsavel);

Browser other questions tagged

You are not signed in. Login or sign up in order to post.