如何在Fullcalandar中同时显示背景渲染和事件背景？

Question

我正在使用Fullcalendar库处理日历。

我需要Background Event在同一时隙显示多个。我没有找到任何相关的解决方案。

想要side-by-side像正常事件一样显示背景事件。

我尝试了什么？

我添加了此slotEventOverlap否定字以不同方式显示事件并同时将它们分开。它适用于“诺玛”事件，但不适用于Background event

但这不起作用 Background Events

 slotEventOverlap:false,  

请通过您的宝贵回复以解决此问题。

Answer 1

更新 您需要rendering: 'background'仅在starting和endpoint中使用单独的事件。像这样

events: [
  {
     resourceId: "a",
     start: '2019-11-16T04:00:00',
     end: '2019-11-16T10:00:00',
     rendering: 'background'
  },
]

而且，当您想在此彩色块中显示其他事件时，需要定义这样的新事件。

events: [

      // set background for a block.
      {
        resourceId: "a",
        start: '2019-11-16T04:00:00',
        end: '2019-11-16T10:00:00',
        rendering: 'background'
      },

      // Main events to show inside the colored block.
      {
        resourceId: "a",
        title: 'Business Lunch',
        start: '2019-11-16T06:00:00',
        end: '2019-11-16T08:00:00',
        color: '#551e4a'
      },
      {
        resourceId: "a",
        title: 'Meeting',
        start: '2019-11-16T06:00:00',
        end: '2019-11-16T08:00:00',
        color: '#159e4a'
      },
      {
        resourceId: "a",
        title: 'Reporting',
        start: '2019-11-16T06:00:00',
        end: '2019-11-16T08:00:00',
        color: '#159eff'
      },
    ]

我认为您需要使用eventOverlap: false,而不是slotEventOverlap: false,。

查看演示以获得更多信息

演示

因此，这是这些代码提供的并行事件的输出。

events: [
  {
     resourceId: "a",
     start: '2019-11-16T04:00:00',
     end: '2019-11-16T10:00:00',
     rendering: 'background'
  },
]

events: [

      // set background for a block.
      {
        resourceId: "a",
        start: '2019-11-16T04:00:00',
        end: '2019-11-16T10:00:00',
        rendering: 'background'
      },

      // Main events to show inside the colored block.
      {
        resourceId: "a",
        title: 'Business Lunch',
        start: '2019-11-16T06:00:00',
        end: '2019-11-16T08:00:00',
        color: '#551e4a'
      },
      {
        resourceId: "a",
        title: 'Meeting',
        start: '2019-11-16T06:00:00',
        end: '2019-11-16T08:00:00',
        color: '#159e4a'
      },
      {
        resourceId: "a",
        title: 'Reporting',
        start: '2019-11-16T06:00:00',
        end: '2019-11-16T08:00:00',
        color: '#159eff'
      },
    ]

$(function() {

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaDay'
    },
    eventOverlap : false,
    defaultView: 'agendaDay',
    resources: [
      { id: 'a', title: 'Room A' },
      { id: 'b', title: 'Room B'}
    ],

    events: [
      {
        resourceId: "a",
        start: '2019-11-16T04:00:00',
        end: '2019-11-16T10:00:00',
        rendering: 'background'
      },
      {
        resourceId: "a",
        title: 'Business Lunch',
        start: '2019-11-16T06:00:00',
        end: '2019-11-16T08:00:00',
        color: '#551e4a'
      },
      {
        resourceId: "a",
        title: 'Meeting',
        start: '2019-11-16T06:00:00',
        end: '2019-11-16T08:00:00',
        color: '#159e4a'
      },
      {
        resourceId: "a",
        title: 'Reporting',
        start: '2019-11-16T06:00:00',
        end: '2019-11-16T08:00:00',
        color: '#159eff'
      },
    ]
  });
$('#calendar').fullCalendar('gotoDate', '2019-11-16');
});

Answer 2

我假设你有三个这样的事件

{ 
id: 1,
title: "Apointments : Appointment 1",
start: "2019-10-27T10:00:00",
end: "2019-10-27T19:00:00",
allDay: false 
}
{
id: 2,
title: "Apointments : Appointment 2",
start: "2019-10-27T10:00:00",
end: "2019-10-27T19:00:00",
allDay: false 
}
{
id: 3
title: "Apointments : Appointment 3",
start: "2019-10-27T10:00:00",
end: "2019-10-27T19:00:00",
allDay: false 
}

尝试按日期和时间将所有三个事件合并为一个，并将所有标题附加到一个标题中，如下所示

{
id: 1,
title: "Apointments : Appointment 1, Appointment 2, Appointment 3",
start: "2019-10-27T10:00:00",
end: "2019-10-27T19:00:00",
allDay: false 
}

所以当你在前端检索时，它会显示如下

我很久以前就遇到过同样的问题并设法像这样解决。