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

Question

我正在使用_.uniqWith(students, _.isEqual)库来处理日历。

我需要同时显示多个const students = [ { name: 'Mark', age: 21 }, { name: 'Williams', age: 27 }, { name: 'Mark', age: 21 } ] console.log(_.uniqWith(students, _.isEqual)); 。 我没有找到任何相关的解决方案。

想要像正常事件一样将背景事件显示为Fullcalendar。

我尝试了什么？

我添加了这个Background Event否定词，以不同方式显示事件并同时将它们分开。它适用于“诺玛”事件，但不适用于side-by-side

但这不适用于slotEventOverlap

Background event

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

Fiddle here

Answer 1

更新 您需要在单独的事件中使用rendering: 'background'，仅使用开始和端点。像这样

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,。

查看演示以获取更好的信息

DEMO

这是这些代码提供的并排事件的输出。

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

html, body {
  margin: 0;
  padding: 0;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 900px;
  margin: 40px auto;
}

#calendar a.fc-event {
  color: #fff; /* bootstrap default styles make it black. undo */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/moment@2.24.0/min/moment.min.js"></script>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/fullcalendar@3.10.1/dist/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div id='calendar'></div>

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 
}

因此，当您在前端进行检索时，它将像这样显示

我很早以前就遇到了同样的问题，并设法解决了这个问题。