fullcalendar v2在backgroundEvent上剪切了第一个和最后一个单元格

Question

使用fullcalendar.io v2。

我如何使用一些回调和/或jquery，在backgroundEvent上将第一个和最后一个单元格切成一半，如附加图像？或者可以对该单元格应用不同的CSS

我知道我可以在包含时间的情况下渲染事件，但我需要allDay事件来填充表格单元格的背景颜色。

我试过了eventRender但没有运气..也许是因为它是backgroundEvent？！

DELETE t1 FROM incompatible AS t1
INNER JOIN incompatible AS t2 ON t1.codeA = t2.codeB AND t2.codeB = t1.codeA 
WHERE t1.codeA > t1.codeB

Answer 1

我使用eventAfterAllRender回调做到了。

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

和css类：

.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;
}

我必须将backGroundEvent的颜色更改为透明：

.fc-bgevent {
    background-color: transparent !important;
}