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.

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.

• javascript
• jquery
• fullcalendar

• 1 This is not possible. A background event loses its shape and just changes the colour of the whole area of the calendar where its time period. There is no setting to change this. – ADyson Commented Nov 13, 2019 at 8:25
• 1 By the way your screenshots are a bit confusing. Background events have no text in them, yet your screenshot shows text over the top. Did you add that yourself with some extra code? It's not clear. When asking a question here it's always best to show the code and data as well so that we can fully understand how the result you are showing has occurred. – ADyson Commented Nov 13, 2019 at 8:25
• @ADyson in my case this is an appointment of a related doctor so I have added the text related to that. actually there is 3 different appointment for 3 different users at 9 to 1-time slot. – always-a-learner Commented Nov 13, 2019 at 9:50
• 1 @ADyson so I am thinking of showing 3 background events for each at that timeslot. (as we see it will only show one - in left side) when it bees background event. – always-a-learner Commented Nov 13, 2019 at 9:52
• 1 @ADyson ok I understand thanks sir for your valuable ments. – always-a-learner Commented Nov 13, 2019 at 11:07

2 Answers 2

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./bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg./[email protected]/dist/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://unpkg./[email protected]/min/moment.min.js"></script>
<script src="https://unpkg./[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg./[email protected]/dist/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div id='calendar'></div>

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.