Javascript 周末颜色不能使用引导年份日历重叠

我正在使用

以下代码用于从数据库收集数据：

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>     

---

库的默认行为将覆盖datasource（颜色）中指定的样式自定义

简单解释： 如果覆盖

customDayRenderer

中元素的样式，它将“覆盖”您在数据源中指定的样式

不知何故，您可以使用

customDataSourceRenderer

重写该样式。通过以下步骤：

将

样式更改为“自定义”

添加

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

警告：

---

只有当您当天只有一个活动时，此问题才会解决。如果在同一天发生任何重叠事件，则需要找到另一种方法。

库的默认行为将覆盖datasource（颜色）中指定的样式自定义

简单解释： 如果覆盖

customDayRenderer

中元素的样式，它将“覆盖”您在数据源中指定的样式

不知何故，您可以使用

customDataSourceRenderer

重写该样式。通过以下步骤：

将

样式更改为“自定义”

添加

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

警告：

---

只有当您当天只有一个活动时，此问题才会解决。如果在同一天发生任何重叠的事件，您需要找到另一种方法。

此代码将分割一天的背景色，以防该天发生多个事件

calendar=新日历（“#日历”{
数据源：事件，
样式：'自定义'，
customDataSourceRenderer:函数（元素、日期、事件）{
if（event.length==1）{
$（元素）.css({
背景：事件[0]。颜色
});
}else if（event.length==2）{
$（元素）.css({
背景：“-webkit渐变（线性、左上、右下、颜色停止（50%，“+事件[0]。颜色+”）、颜色停止（50%，“+事件[1]。颜色+”）
});
}else if（event.length==3）{
$（元素）.css({
背景：“线性渐变（向右，“+事件[0]。颜色+”33%，“+事件[1]。颜色+”33%66%，“+事件[2]。颜色+”66%）”
});
}否则{
$（元素）.css({
背景：“-webkit径向梯度（蓝色、黄色、红色、绿色）”
});
}
}
}

如果一天中有多个事件，此代码会分割一天的背景色

calendar=新日历（“#日历”{
数据源：事件，
样式：'自定义'，
customDataSourceRenderer:函数（元素、日期、事件）{
if（event.length==1）{
$（元素）.css({
背景：事件[0]。颜色
});
}else if（event.length==2）{
$（元素）.css({
背景：“-webkit渐变（线性、左上、右下、颜色停止（50%，“+事件[0]。颜色+”）、颜色停止（50%，“+事件[1]。颜色+”）
});
}else if（event.length==3）{
$（元素）.css({
背景：“线性渐变（向右，“+事件[0]。颜色+”33%，“+事件[1]。颜色+”33%66%，“+事件[2]。颜色+”66%）”
});
}否则{
$（元素）.css({
背景：“-webkit径向梯度（蓝色、黄色、红色、绿色）”
});
}
}
}

请添加完整代码或创建更好的小提琴请添加完整代码或创建更好的小提琴