FullCalendar中如何更改日期选择的颜色

Question

这其实是一个双管齐下的问题。根据我尝试过的项目，初始化后没有更改全日历“selectable/selectableOverlap”的方法。我想这样做的原因是，在页面上添加一个切换按钮，让用户指示是否希望在日历控件上选择或不选择。

鉴于此，由于“select”回调仅在释放选择时调用(且我希望防止可视化选择)，我的想法是将所选单元格的不透明度设置为0，使其不可见，并在执行选择回调时取消选择。然而，我找不到一种修改所选单元格颜色或CSS属性的方法，如下图所示：

是否有一种方式可以更改所选单元格的CSS属性，或者第一种动态更改选择功能的方法？

谢谢 -

- James F

Answer 1

选定单元格的颜色是在 .fc-highlight 中定义的。 要更改选择的颜色，只需这样做：

$("#calendar").fullCalendar({
  select: function(start, end){
    // other code here
    // ..
    $(".fc-highlight").css("background", "red");
  }
});

- worrawut

---

谢谢，我有同样的问题，不过似乎您的答案适用于在选择单元格后更改单元格颜色，而不是在选择期间更改单元格颜色。您知道用于在选择期间更改单元格颜色的CSS类吗？ - Eskim0

它对我起作用了。颜色在拖动时甚至发生了变化，但由于其他CSS属性的缘故，它略微半透明。 - Aamir Jamal

Answer 2

我通过覆盖现有的 CSS 类使其正常工作。

.fc-event-main-frame {
  background-color:lightblue !important;
  color: blue;
  border: none;
  outline:none;
}

.fc-event-main {
  border: none;
  outline:none;
  background-color:lightblue !important;
}

div.fc-timegrid-event-harness {
  border: none;
  outline:none;
  background-color:lightblue !important;

}

a.fc-timegrid-event {
  border: none;
  outline:none;
  background-color:lightblue !important;

}

.fc-event-time {
  border: none;
  outline:none;
  background-color:lightblue !important;
}

注意：这是一种RPG方法，可能可以避免一些轮廓/边框放置为无，但我没有时间检查它们全部。我认为我仍然会分享，因为我找不到答案。

- Aldeen