How to show Background rendering and Event background at a same time slot in Fullcalandar?

Question

I am working on Calendar using a Fullcalendar library.

I need to show multiple Background Event at the same time slot. I didn't find any related solution for it.

Want to show background event as side-by-side like a normal event.

What I have tried?

I have added this slotEventOverlap negative to show the events differently and separate them at the same time. it works for "Norma" event but not for Background event

But this is not working on Background Events

 slotEventOverlap:false,  

Please pass your valuable response to resolve this.

Answer 1

Update You need to use the rendering: 'background' in separate events with just starting and endpoint. like this

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

And when you want to show other event inside this colored block you need to define new events like this.

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'
      },
    ]

I think you need to use eventOverlap: false, instead of slotEventOverlap: false,.

Check the demo for better info

DEMO

So this is the output of side by side events that these codes provide.

$(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/[email protected]/dist/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/[email protected]/min/moment.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/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

I'm supposing that you have three events like this

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

try to Merge all three events into one by date and time and append all title into one title like this

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

so when you will retrieve on the front end it will be showing like this

I was facing the same issue long before and managed to solve like this.