加载2个JSON事件源的不稳定行为（一个必须是后台事件）

Posted 2021-04-07

当我加载两个eventSources时，我收到了事件的不稳定行为，其中一个是使用渲染定义的：background。

生成的JSON是正确的，因为在使用正常渲染定义两个eventSources时，一切都正常。

指示的行为包括以下症状：

• 一些未呈现的事件（它们总是从不是后台的日历中消失而不会出现在DOM中）
• 显示为正常事件的背景事件
• 在每个上一个/下一个按下时，行为可能不同。

这是我加载事件的代码：

$('#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'
  }

});

这里附上错误的屏幕截图，按下生成按钮和预览按钮（无重新加载页面）。

behavior 1

behavior 2

重复：如果我在两个事件源中使用正常渲染，则不会发生此问题。

提前致谢。

---编辑---

FullCalendar v3.9.0

Here is the background JSON

Here is the normal events JSON

谢谢！

答案

好的，我找到了。

您的两个数据源之间存在ID冲突。在“普通”（非背景）数据中，您有5个ID为1到5的事件。在“后台”源中，您还有4个ID为2到5的事件。这些事件与其他数据源中的ID冲突。看起来这会导致fullCalendar感到困惑，并假设它们与具有相同ID的“普通”数据源中的事件相关联，因此它似乎决定它们不能呈现为后台事件。

这是否是fullCalendar中的错误我不完全确定 - 你必须向程序员询问他们的意图是什么。在fullCalendar中，当然可能有多个具有相同ID的事件，并且有几个场景，这是有用的。

但是，如果在您的情况下事件完全不相关，那么给它们提供相同的ID可能不是一个好主意。一旦更改ID，问题就会消失：

修改后的背景事件示例：

{
    "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"
},

工作演示：http://jsfiddle.net/qxLuLhsf/135/