3

Gostaria de saber como faço para pegar outros componentes (além do id, title, start e end) no FullCalenda.

Tenho uma tabela, no banco de dados, que possui vários campos como status, responsavel, departamento, etc... E eu faço uma consulta nesta tabela que retorna um JSON do PHP para o FullCalendar. Lá no FullCalendar eu consigo pegar só os atributos padrões do FullCalendar que são id, title, start e end.

Como faço para pegar os outros atributos resultantes da consulta no banco (campos como status, responsavel, etc ...) ?

O resultado da minha consulta é o array abaixo:

inserir a descrição da imagem aqui

  • Na imagem acima, eu consigo pegar o title, start, end e color (que são nativos do FullCalendar), porém não consigo pegar o tipo e STATUS. Como fazer isso ?

Abaixo segue o código em que eu recebo os dados no FullCalendar:

events: {
    url: '../banco/banco-get/pagina-dashboard/classes-dashboard-calendario.php', //Página PHP que realiza a consulta
    failure: function() {
      document.getElementById('script-warning').style.display = 'block'
    }
  },
  eventClick: function(info) {
    //O parâmetro 'info' é que contém os valores que vem do retorno da consulta do banco de dados			

    info.jsEvent.preventDefault();

    //Passando valores para os elementos HTML			
    $('#visualizar #mostrar-titulo').text(info.event.title);
    $('#visualizar #mostrar-inicio').text(info.event.start.toLocaleString());
    $('#visualizar #mostrar-fim').text(info.event.start.toLocaleString());
    $('#visualizar #mostrar-status').text(info.event.STATUS);

    //Exibe o modal (quando clicamos no respectivo evento) que mostra as informações resultantes da consulta no banco de dados.
    $('#visualizar').modal('show');


  },

Agora olha como é exibido o modal (quando clicamos no respectivo evento) com as informações:

inserir a descrição da imagem aqui

  • Reparem que o STATUS não aparece.
4
  • Não faz sentido usar o seletores como "#visualizar #mostrar-titulo"... um id deve ser único na página, logo não faz sentido buscar o id #mostrar-titulo dentro de outro id #visualizar.
    – Sam
    Commented 28/11/2019 às 14:17
  • Sim, Sam. Mas é porque eu não postei o HTML. Esse "#visualizar" é o id de um modal, e o "#mostrar-titulo" é o id dos campos que serão preenchidos com os dados vindo da consulta. São preenchidos dentro do FullCalendar. Porém esses campos são estáticos e esse modal só é aberto quando clicamos no evento (e os dados são passados para os campos do modal só neste momento). Não são criados vários modais "#visualizar". Somente um. Não coloquei o código HTML porque achei que não teria relevância no problema em si. Commented 28/11/2019 às 14:29
  • Eu sei. O que eu quis dizer é que usar $('#visualizar #mostrar-titulo').text(info.title); não tem sentido, quando vc deveria usar $('#mostrar-titulo').text(info.title); já que um id é único.
    – Sam
    Commented 28/11/2019 às 14:32
  • Poxa, Sam. kkkkkkk. Tá sendo perfeccionista pra caramba. O problema foi só o acréscimo do "#visualizar" ali no seletor ? Commented 28/11/2019 às 14:34

2 Respostas 2

2

Você pega o valor das chaves extras na propriedade event.extendedProps.

Por exemplo, para pegar o valor de STATUS você usaria:

event.extendedProps.STATUS
1
  • 1
    Exatamente, Sam. A linha ficou assim: $('#visualizar #mostrar-status').text(info.event.extendedProps.STATUS). Commented 28/11/2019 às 15:30
0

Não sei muito como está a estrutura do seu código, mas a forma que eu uso funciona certinho essa função que queres implementar.

let allEvents = []; // Variável onde ficarão todos os eventos.

// Esse método eu uso para guardar todos os eventos caso haja mais que um.
allEvents.push(
    {
        title   : 'ANALISE ESCRITR CONTAB (6)',
        start   : '2019-11-01 00:00:00',
        end     : '2019-11-01 00:00:00',
        tipo    : 'C',
        status  : 'VENCIDO',
        color   : '#f00'
    },
);

$('#calendar').fullCalendar({ // Renderizando o fullCalender com todos eventos
    events    : allEvents,
    eventClick: function(info) {

        //Passando valores para os elementos HTML           
        $('#visualizar #mostrar-titulo').text(info.title);
        $('#visualizar #mostrar-inicio').text(info.start.toLocaleString());
        $('#visualizar #mostrar-fim').text(info.start.toLocaleString());
        $('#visualizar #mostrar-status').text(info.status);

        //Exibe o modal (quando clicamos no respectivo evento) que mostra as informações resultantes da consulta no banco de dados.
        $('#visualizar').modal('show');
    }
});

Referência: FullCalendar

2
  • Brother, talvez eu tenha falhado ao não colocar uma maior parte do código, mas foi por medo de considerarem a pergunta extensa. Vou editar e colocar a parte do events, que é onde eu realizo o evento e referencio o arquivo php que faz a consulta. Creio que esse seu código não serviria para este caso. Commented 28/11/2019 às 13:38
  • Eu consegui um resposta no stackoverflow gringo. Vou deixar a galera tentar responder aqui, se não houver uma resposta, eu posto a resposta de lá que me foi útil. Commented 28/11/2019 às 14:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .