How to get components beyond the standards in Fullcalendar?

Question

How to get components beyond the standards in Fullcalendar?

Asked 4 years, 11 months ago

Viewed 304 times

3

I would like to know how to get other components (besides id, title, start and end) in Fullcalenda.

I have a table, in the database, which has several fields such as status, responsibility, department, etc... And I make a query in this table that returns a PHP JSON for Fullcalendar. There in Fullcalendar I can only get the default Fullcalendar attributes that are id, title, start and end.

How do I get the other attributes resulting from the database query (fields such as status, responsibility, etc ...) ?

The result of my query is the array below:

In the image above, I can get the title, start, end and color (which are native to Fullcalendar), but I can’t get the type and STATUS. How to do this ?

Below follows the code in which I receive the data in 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');


  },

Now look how the modal is displayed (when we click on the respective event) with the information:

Note that the STATUS does not appear.

It makes no sense to use the selectors as "#visualizar #mostrar-titulo"... an id should be unique on the page, so it makes no sense to fetch the id #mostrar-titulo within another id #visualizar.

– Sam

2019/11/28 at 14:17
Yes, Sam. But that’s because I didn’t post the HTML. This "#view" is the id of a modal, and the "#show title" is the id of the fields that will be filled with the data coming from the query. They are filled in within the Fullcalendar. But these fields are static and this modal is only opened when we click on the event (and the data is passed to the modal fields only at this moment). Not many "#view" modals are created. Only one. I didn’t put the HTML code because I didn’t think it would have relevance to the problem itself.

– Gato de Schrödinger

2019/11/28 at 14:29
I know. What I meant was to use $('#visualizar #mostrar-titulo').text(info.title); it makes no sense, when you should use $('#mostrar-titulo').text(info.title); since an id is unique.

– Sam

2019/11/28 at 14:32
Come on, Sam. kkkkkkk. You’re being a fucking perfectionist. The problem was just adding the "#visualize" to the dial ?

– Gato de Schrödinger

2019/11/28 at 14:34

2 answers

2

You take the value of the extra keys in the property event.extendedProps.

For example, to take the value of STATUS you would use:

event.extendedProps.STATUS

1

Exactly, Sam. The line looks like this: $('#view #show-status'). text(info.event.extendedProps.STATUS).

– Gato de Schrödinger

2019/11/28 at 15:30

Browser other questions tagged php javascript fullcalendar

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

by Pedro Henrique • **917** points · Answer 1 · 2019-11-28T13:34:22+00:00

I don’t know much about the structure of your code, but the way I use works just right this function you want to implement.

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');
    }
});

Reference: Fullcalendar