Fullcalendar colorize back

by amamar

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.min.css">
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.1.0/main.min.js"></script>
<div id='calendar'></div>

CSS

/* Clear out the default background color on the regular event */
.fc-h-event {
  background-color: rgba(0, 0, 0, 0.1);
  border: 0px solid black;
}

/* Override background color / opacity for background events */
.fc .fc-bg-event {
  background-color: red;
  opacity: 0.7;
}

/* Override font color and style on background events */
.fc .fc-bg-event .fc-event-title {
  color: white;
  font-style: normal;
  padding-top: 20px; /* Using this to move the text away from the date */
}

/* Make text wrap for event titles */
.fc-daygrid-event {
  white-space: normal;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth',
    initialDate: '2020-07-02',
    //eventBackgroundColor: "#ff0000",
    eventClick: function(info) {
      var eventObj = info.event;
      console.log('Clicked ' + eventObj.title);
      alert('Clicked ' + eventObj.title);
    },
    events: [{
      // NORMAL EVENTS FROM MY DATABASE
      "allday": "",
      "title": "Event 1 has a really long title to see what wrapping looks like",
      "start": "2020-07-02T08:30:00",
      "end": "2020-07-02T09:30:00",
      display: 'block',
    }, {
      "allday": "",
      "title": "Event 2",
      "start": "2020-07-06 08:30:00",
      "end": "2020-07-20 09:30:00",
      display: 'block',
    }, {
      // DUPLICATE EVENTS FROM MY DATABASE
      "allday": "true",
      "title": "", //Removed title so that this wouldn't display
      "start": "2020-07-06",
      "end": "2020-07-21", // Had to add a day to the end to get it to fully colorize this date
      display: 'background',
    }, {
      "allday": "true",
      "title": "",
      "start": "2020-07-02",
      "end": "2020-07-02",
      display: 'background',
    }, {
    // Events that show only in the background - these are clickable
      "allday": "",
      "title": "Another event to show multi-day and is clickable",
      "start": "2020-07-22",
      "end": "2020-07-24",
      display: 'background',
    }, {
      "title": "Another clickable background event",
      "start": "2020-07-28",
      "end": "2020-07-28",
      display: 'background',
    }],
  });
  calendar.render();
});