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

Posted 2021-04-07

使用fullcalendar.io v2。

我怎样才能使用一些回调和/或jquery，将backgroundEvent中的第一个和最后一个单元格切成一半，如附加图像？或者可以将不同的css应用于该单元格

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

我试过eventRender但没有运气..也许是因为它是backgroundEvent ?!

                eventRender: function (event, element) {
                if (event.date === event.start) element.css('background-color', 'yellow');
            }

答案

我用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;
}