如何更改 Fullcalendar 列上的光标

Question

TL;DR：我想要 光标指针 在 绿色单元格 和 灰色单元格

上的光标已禁用

我正在构建一个使用 Fullcalendar 的应用程序，但我遇到了一个我无法解决的问题：
我尝试直接在单元格（不是事件）上修改光标我尝试以 « .fc-future »、« .fc-today » 和 « .fc-past » fullcalendar 类为目标并应用类似 « cursor: pointer » 或 « cursor: not-allowed » 的样式任何成功。

这是我的截图：

有谁知道如何更改列上的光标？
感谢您的帮助！

我的项目：

全日历 2.8.0

Answer 1

<div class="fc-scroller-canvas"> 包含两个 div，一个带有 fc-content class，另一个带有 fc-bg class。您正在为 fc-bg 中的元素设置背景。为 fc-bg 中的相同元素设置 cursor CSS 属性。

然后，为了通过fc-content显示光标，您需要为fc-content div设置pointer-events: none;。这将使鼠标指针透明，以便您可以将鼠标悬停或单击底层 div 中的元素。这意味着您将能够看到您需要的光标。

显然，这可能会禁用您可能需要的某些功能，因此您需要 pointer-events: auto; 对您需要的东西进行设置，例如事件本身（如果您对 eventClick 进行任何操作，例如).

Answer 2

感谢您的快速回复！

我不知道如何按照您在 post 中的说明进行设置。所以我找到了解决方法。
在 Fullcalendar 中，我添加了一个后台事件对象：

{
  start: moment().startOf('isoWeek'), # beginning of week
  end: moment().utc().endOf('day'), # end of current day
  rendering: 'background',
  className: 'disabled-cell'
}

这 "fake event" 禁用从一周开始到当天结束的全天。

对于光标，我创建了一个 css class:

// Sass code
.disabled-cell
  background-color: gray
  opacity: 1
  &:hover
    cursor: not-allowed

.fc-view
  td
    cursor: pointer

如何更改 Fullcalendar 列上的光标

How to change cursor on Fullcalendar columns

css

cursor

fullcalendar