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

问题描述 投票:4回答:1

当我加载两个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

谢谢!

javascript json fullcalendar id
1个回答
2
投票

好的,我找到了。

您的两个数据源之间存在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/

© www.soinside.com 2019 - 2024. All rights reserved.