如何在FullCalendar中设置当前日期颜色？

Question

我想更改当天的颜色，但仅在日历位于日期议程视图中时才会更改。我的用户说他们很难看到线条或其他东西。我查看了文档以及css / js，但没有找到快速的方法。如果没有重大代码更改，这是否可行？

Answer 1

老实说我真的不知道你在说什么，但是jQuery UI fullcalendar小部件使用CSS类.fc-today来设置当天的样式。如果您的更改不可见，请尝试使用!important - 可能是其他许多类中的一个会覆盖其他地方的样式。

Answer 2

您可以使用以下代码

.fc-today {
    background: #FFF !important;
    border: none !important;
    border-top: 1px solid #ddd !important;
    font-weight: bold;
} 

Answer 3

如果您没有使用主题，这对我使用FullCalendar 2.3.1

.fc-unthemed .fc-today {
  background: ....;
}

Answer 4

我有多个日历，所以这有效：

#calendar .fc-today {
    background: #FFF !important;
}

#calendar-two .fc-today {
    background: #FFF !important;
}

使用#calendar-favorite .fc-unthemed .fc-today { ... }无效，请记得删除.fc-unthemed部分。

同时使用dayRender

查看jquery方式：https://stackoverflow.com/a/17930817/1066234

Answer 5

要在dayview中更改fullcalendar当前日期的颜色/背景，请添加以下CSS类，并确保在所有css样式之后加载它。

  .fc-view-basicDay .fc-today {
     color:....;
     background:....;
  } 

Answer 6

对我来说是.ui-state-highlight.fc-today

Answer 7

完整日历> = 5

在全日历> = 5中，他们将类名称更改为.fc-day-today。但是，您需要提高该选择器的特异性以覆盖样式，或者如果没有覆盖，则在要覆盖的属性上使用!important。

注意-我没有看过API是否支持其他本机。如果可以，那么可能是一个更好的长期解决方案。

Answer 8

这项工作在FullCalendar 3.6.1

中为我工作

#calendar-id .fc-widget-content:not(.fc-axis) {
       background: #FFF !important;
}

Answer 9

今天的作品

.fc-timeGridDay-view {
  .fc-widget-content:not(.fc-axis) {
    .fc-today {
      background: red;
    }
  }
}

Answer 10

好的答案。但是FullCalender中是否还有启用/禁用当前日期指示器的选项？原因是，我将压延机用于不同的类型，并且希望一次显示当前的日期颜色，而不能在其他视图上显示。

Answer 11

使用 SCSS 在 v5 的时间轴视图中突出显示今天

detail_order

Answer 12

将此关键字 !important 添加到分号之前的行尾以覆盖为 css 类 .fc-day-today 设置的默认规则

.js 使用 jQuery 的文件

<script>

    $('.fc-day-today').addClass('cell-background');

</script>

.css 文件

.cell-background {
    background-color:#D9FFE1 !important;
}

这适用于 fullCalendar v5.8.0。您可以将相同的概念应用于不同的地方。