javascript - 周末颜色不能使用 bootstrap-year-calendar 重叠

Question

我正在使用bootstrap-year-calendar

下面的代码是从数据库收集数据:

var dataSource = [];
<c:forEach items="${newCalendar}" var="newCalendar">
    var startDate = new Date(${newCalendar.calendarStartYear},${newCalendar.calendarStartMonth -1},${newCalendar.calendarStartDay});
    var endDate = new Date(${newCalendar.calendarEndYear},${newCalendar.calendarEndMonth-1},${newCalendar.calendarEndDay});
    var newData = {
        id: ${newCalendar.calendarId},
        name: '${newCalendar.calendarType}',
        location : '${newCalendar.calendarDesc}',
        startDate: startDate,
        endDate: endDate,
        color: '${newCalendar.calendarColor}'
    };
    dataSource.push(newData);
</c:forEach>     

下面的代码是渲染日历的，但是当我已经在周末添加了事件时，周末的颜色无法被数据源的颜色替换。

$('#calendar').calendar({
    style:'background',
    enableContextMenu: true,
    customDayRenderer: function(element, date) {
        if (date.getDay() === 6 || date.getDay() === 0) {
            $(element).css('background-color', '#e4edec');
            $(element).css('border-radius', '15px');
        } 
    },
    dataSource: dataSource

Answer 1

这是库的默认行为，它将覆盖数据源(颜色)中指定的任何样式自定义。

简单解释:如果您在 customDayRenderer 中覆盖元素的样式，它将“覆盖”您在数据源中指定的样式。

无论如何，您可以使用customDataSourceRenderer重写样式。请按照以下步骤操作:

1. 将样式更改为“自定义”。
2. 添加customDataSourceRenderer

完整示例如下:

...
$('#calendar').calendar({
    style:'custom',
    enableContextMenu: true,
    customDayRenderer: function(element, date) {
        if (date.getDay() === 6 || date.getDay() === 0) {
            $(element).css('background-color', '#e4edec');
            $(element).css('border-radius', '15px');
        } 
    },
    customDataSourceRenderer: function(element, date, event) {
        // This will override the background-color to the event's color
        $(element).css('background-color', event[0].color);
        $(element).css('border-radius', '15px');
    },
    dataSource: dataSource
...

警告:仅当您当天只有 1 场事件时，此问题才会得到解决。如果同一天有重叠的事件，您将需要寻找其他方法。