javascript - FullCalendarJS : changing select event color

Question

我正在使用 FullcalendarJS，当我在周 View 上选择日期/时间时，我想要更深的颜色

正如您从上图中看到的，当我选择日期范围时，突出显示不那么明显，我希望它像今天突出显示的蓝色突出显示一样可见。

我尝试更改选择事件属性上的 CSS，但它仅在选择后更改。

这是我的代码:

 $('.calendar').fullCalendar({
  header : {
        left:   'prev,next today',
        center: 'title',
        right:  'agendaWeek,agendaDay'
    },
    timezone: 'local',
    defaultView : 'agendaWeek',
    allDaySlot : false,
    eventOverlap: false,
        select: function(start, end, event, view, resource) {
        $(".fc-highlight").css("background", "#00004c");
    }
 })

Answer 1

无需在 select 事件期间更改 fc-highlight CSS 类的颜色，只需在 中声明以下内容即可CSS 以覆盖它:

.fc-highlight {
   background-color: #00004c;
}

此外，请确保在您的 fullCalendar 配置中设置 selectable: true。因为它默认为 false - 根据 API 文档 -，如果您想通过单击或拖动进行选择，则必须为 true (我指出这一点是因为我在提供的代码片段中看不到它)。

示例:

$('.calendar').fullCalendar({
   header: {
     left: 'prev,next today',
     center: 'title',
     right: 'agendaWeek,agendaDay'
   },
   timezone: 'local',
   defaultView: 'agendaWeek',
   allDaySlot: false,
   eventOverlap: false,
   selectable: true
});

如您所见，不再需要 select 事件函数，除非您想在此时执行任何操作。

现场演示: http://jsfiddle.net/4nb4gpnL/