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

时间:2011-01-22 18:29:04

标签: javascript jquery css fullcalendar

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

12 个答案:

答案 0 :(得分:12)

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

答案 1 :(得分:7)

您可以使用以下代码

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

答案 2 :(得分:5)

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

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

答案 3 :(得分:3)

我有多个日历,所以这有效:

#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

答案 4 :(得分:1)

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

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

答案 5 :(得分:1)

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

答案 6 :(得分:1)

完整日历> = 5

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

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

答案 7 :(得分:0)

这项工作在FullCalendar 3.6.1

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

答案 8 :(得分:0)

今天的作品

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

答案 9 :(得分:0)

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

答案 10 :(得分:0)

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

detail_order

答案 11 :(得分:0)

将此关键字 !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。您可以将相同的概念应用于不同的地方。