I successfully implemented it using the eventAfterAllRender callback method.
https://i.sstatic.net/3tRyv.png
eventAfterAllRender: function (view) {
jQuery.each($calendar.fullCalendar('clientEvents'), function () {
var event = this;
var $start = $calendar.find('td.fc-day[data-date="' + event.start.format('YYYY-MM-DD') + '"]');
var $end = $calendar.find('td.fc-day[data-date="' + event.end.format('YYYY-MM-DD') + '"]');
if (event.rendering === 'background') {
if ($start.hasClass('fc-backgroundeventend')) {
$start.removeClass('fc-backgroundeventend').addClass('fc-backgroundeventendstart');
} else {
$start.addClass('fc-backgroundeventstart');
}
for (var d = event.start.clone().add(1, 'day') ; d < event.end; d.add(1, 'day')) {
$calendar.find('td.fc-day[data-date="' + d.format('YYYY-MM-DD') + '"]').addClass('fc-backgroundevent');
}
if ($end.hasClass('fc-backgroundeventstart')) {
$end.removeClass('fc-backgroundeventstart').addClass('fc-backgroundeventendstart');
} else {
$end.addClass('fc-backgroundeventend');
}
} // /event.rendering === 'background'
}); // /each
} // /eventAfterAllRender
In addition, I utilized the following CSS classes:
.fc-backgroundevent {
background-color: #ff8a8a;
}
.fc-backgroundeventendstart {
background: linear-gradient(135deg, rgba(255,138,138,1) 49%,rgba(255,138,138,1) 49%,rgba(255,255,255,1) 49%,rgba(255,255,255,1) 49%,rgba(255,255,255,1) 51%,rgba(255,138,138,1) 51%,rgba(255,138,138,1) 51%);
}
.fc-backgroundeventstart {
background: linear-gradient(to left top, #ff8a8a 50%, #FFFFFF 50%) !important;
}
.fc-backgroundeventend {
background: linear-gradient(to right bottom, #ff8a8a 50%, #FFFFFF 50%) !important;
}
Furthermore, to achieve the desired effect, I had to adjust the background color of the backGroundEvent to transparent:
.fc-bgevent {
background-color: transparent !important;
}