使用bootstrap-year-calendar遇到周末颜色重叠问题求助

嘿，我来帮你搞定这个周末底色和日程颜色重叠的问题～ 咱们先从基础检查和几个实用方案入手：

第一步：先确保你的数据源正确生成 #

看你贴的代码，发现两个关键小问题：

1. 每个newData对象里没包含start和end日期属性，这是calendar渲染事件的必要参数；
2. 没有把生成的newData推到dataSource数组里，这样日历根本拿不到事件数据。

修正后的代码应该是这样：

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.location}', // 补全你的location字段内容
  start: startDate,
  end: endDate
};
dataSource.push(newData); // 一定要把事件加入数据源数组
</c:forEach>

第二步：解决颜色重叠的几种方案 #

数据源没问题后，咱们来处理样式冲突：

方案1：降低周末背景的透明度 #

bootstrap-year-calendar默认给周末单元格加了.weekend类，咱们可以把它的背景调透明，让日程颜色透出来：

.calendar .weekend {
  background-color: rgba(245, 245, 245, 0.3) !important; /* 数值越小越透明，按需调整 */
}

方案2：让日程事件覆盖周末背景 #

给日程事件设置更高的层级，确保它显示在周末背景之上：

.calendar .calendar-event {
  position: relative;
  z-index: 10; /* 只要比周末背景的层级高就行 */
}

方案3：给涉及周末的日程加特殊样式 #

用日历的eventRender回调，判断事件是否包含周末，然后给这些事件单独加样式：

// 初始化日历时加上这个回调
$('#your-calendar-id').calendar({
  dataSource: dataSource,
  eventRender: function($eventEl, event) {
    // 检查事件日期范围内是否包含周末
    let hasWeekend = false;
    let tempDate = new Date(event.start);
    while (tempDate <= event.end) {
      const day = tempDate.getDay();
      if (day === 0 || day === 6) { // 0是周日，6是周六
        hasWeekend = true;
        break;
      }
      tempDate.setDate(tempDate.getDate() + 1);
    }
    if (hasWeekend) {
      $eventEl.addClass('weekend-event');
    }
  }
});

然后自定义这个特殊类的样式：

.calendar .weekend-event {
  background-color: #2ECC71; /* 选一个和周末背景区分度高的颜色 */
  color: #fff;
  border-radius: 4px;
}

方案4：直接去掉周末的默认背景 #

如果你不需要周末的底色，直接清空：

.calendar .weekend {
  background-color: transparent !important;
}

你可以根据自己的需求选其中一种方案试试，先把数据源的问题搞定，再调样式应该就能解决重叠问题啦～

内容的提问来源于stack exchange，提问作者meowcheeze