Erratic behavior loading 2 JSON eventsources (one must be background events)

user_8750323 0
Viewed 74

I am receiving an erratic behavior of the events when I load two eventSources and one of them is defined with rendering: background.

The generated JSONs are correct, since when defining the two eventSources with the normal rendering, everything works correctly.

The indicated behavior includes these symptoms:

  • Some Events that are not rendered (they always disappear from the calendar that is not background and not appear in DOM)

  • Background events that appear as normal events

  • In each press of previous / next the behavior can be different.

This is my code to load the events:

$('#workshifts_ocupations_calendar').fullCalendar({
  defaultView: 'agendaWeek',
  eventSources: [
    {
      id: "workshiftSource", 
      url: '<?= base_url(); ?>turno/ajax_load_workshifts_by_installation/'+installation,
      editable:true,
      success: function(){
        console.log("turnos");
      }
    },
    {
      id: "backSource",
      url: '<?= base_url(); ?>ocupacion/ajax_load_ocupations_by_installation/'+installation,
      rendering: 'background',
      editable:false,
      success: function(){
        console.log("fondos");
      }
    }
  ],
  eventRender: function(event, element) {
    // Si es background - Mostramos el título.
    if(event.source.rendering == "background"){
      element.html('<span class="backgroundEventsTitle">' + event.title + "</span>");
    }
  },
  locale: 'es',
  themeSystem: 'bootstrap3',
  minTime: '07:00:00',
  maxTime: '23:00:00',
  slotDuration: '00:15:00',
  slotLabelInterval: '00:30:00',
  slotLabelFormat: 'H:mm',
  selectable: true,
  allDaySlot: false,
  selectConstraint:{
    start: '07:00',
    end: '23:00',
  },
  eventConstraint:{
    start: '07:00',
    end: '23:00',
  },
  header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
  }

});

Here attach screenshots of the errors, produced pressing next and preview buttons (no reloading page).

behavior 1:
behavior 1

behavior 2:
behavior 2

Repeat: if I use normal rendering in both event sources, this issue does not occur.

FullCalendar v3.9.0

Here is the background JSON

Here is the normal events JSON

fullcalendar json javascript
1 Answers

Ok, I found it.

You have an ID conflict across your two data sources. In your "normal" (non-background) data you have 5 events with IDs from 1 to 5. In your "background" source you also have 4 events with IDs 2 to 5. These conflict with the IDs in the other data source. It appears that this causes fullCalendar to get confused and assume that these are linked to the events in the "normal" data source with the same ID and therefore it appears to decide that they cannot be rendered as background events.

Whether this is a bug in fullCalendar I'm not entirely sure - you'd have to ask the programmers what their intent was. It's certainly possible in fullCalendar to have multiple events with the same ID and there a couple of scenarios where this is useful.

However if, as in your case, the events are totally unrelated, it's probabably not a good idea to give them the same IDs. As soon as you change the IDs, the problem goes away:

Example of modified background events:

{
    "id": "2000",
    "title": "At. Balearicus (perpe lui)",
    "backgroundColor": "#FF40D1",
    "borderColor": "#eb2cbd",
    "start": "2018-08-20 09:00:00",
    "end": "2018-08-20 10:00:00"
},
{
    "id": "3000",
    "title": "At. Balearicus (perpe lui)",
    "backgroundColor": "#FF40D1",
    "borderColor": "#eb2cbd",
    "start": "2018-08-27 09:00:00",
    "end": "2018-08-27 10:00:00"
},
{
    "id": "40000",
    "title": "At. Balearicus (perpe lui)",
    "backgroundColor": "#FF40D1",
    "borderColor": "#eb2cbd",
    "start": "2018-09-03 09:00:00",
    "end": "2018-09-03 10:00:00"
},
{
    "id": "5000",
    "title": "At. Balearicus (perpe lui)",
    "backgroundColor": "#FF40D1",
    "borderColor": "#eb2cbd",
    "start": "2018-09-10 09:00:00",
    "end": "2018-09-10 10:00:00"
},

Working demo at: http://jsfiddle.net/qxLuLhsf/135/

user_59470430
Related