blocks|key|1757649|text|老实说，我真的不知道您在说什么，但是jQuery+UI+fullcalendar小部件使用CSS类.fc-today来设置当前的样式。如果您的更改不可见，请尝试使用!important+- it，这可能是许多其他类中的一个在其他地方覆盖了您的样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1757650|entityMap|0|LINK|mutability|MUTABLE|url|http://arshaw.com/fullcalendar/^0|1D|9|2A|A|I|M|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

I honestly don't really know what you're talking about, but the <a href="http://arshaw.com/fullcalendar/" rel="noreferrer">jQuery UI fullcalendar</a> widget uses the CSS class <code>.fc-today</code> to style the current day. If your changes aren't visible, try to use <code>!important</code> — it might be that one of the many other classes overrides your styles elsewhere.

blocks|key|2274207|text|您可以使用以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2274208|.fc-today+{
++++background:+#FFF+!important;
++++border:+none+!important;
++++border-top:+1px+solid+#ddd+!important;
++++font-weight:+bold;
}+|code-block|syntax|javascript|2274209|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

you can use following code

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

blocks|key|5802260|text|如果您没有使用主题，这适用于我使用FullCalendar+2.3.1|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5802261|.fc-unthemed+.fc-today+{
++background:+....;
}|code-block|syntax|javascript|5802262|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you aren't using a theme, this worked for me using FullCalendar 2.3.1

<pre><code>.fc-unthemed .fc-today {
 background: ....;
}
</code></pre>

blocks|key|2274372|text|完整日历>=+5|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2274373|在fullcalendar+>=+5中，他们将类名改为.fc-day-today。但是，您需要增加选择器的特异性，以覆盖样式，或者在覆盖的属性上使用!important+(如果没有它就不适用)。|CODE|2274374|注意--我还没有看过API是否支持更本机的东西。如果是这样的话，可能是一个更好的长期解决方案。|2274375|entityMap^0|0|8|0|R|D|22|A|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|P|8|@$9|Q|A|R|B|H]|$9|S|A|T|B|H]]|D|@]|E|$]]|$1|I|3|J|5|6|7|U|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|L|$]]

Full Calendar &gt;= 5
In fullcalendar &gt;= 5, they changed the class name to <code>.fc-day-today</code>. However, you'll need to increase the specificity of that selector to override the styles OR use <code>!important</code> on the attribute you're overriding if it doesn't apply without it.
Note - I have NOT looked if the API supports something more native. If it does, probably a better long term solution.

blocks|key|2274261|text|我有多个日历，所以这行得通：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2274262|#calendar+.fc-today+{
++++background:+#FFF+!important;
}

#calendar-two+.fc-today+{
++++background:+#FFF+!important;
}|code-block|syntax|javascript|2274263|使用#calendar-favorite+.fc-unthemed+.fc-today+{+...+}不起作用，因此请记住删除.fc-unthemed部件。|offset|length|style|CODE|2274264|也可以查看jquery的方法:使用dayRender的https://stackoverflow.com/a/17930817/1066234|2274265|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/17930817/1066234^0|0|0|2|1D|1R|C|0|H|9|R|18|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@$I|14|J|15|K|L]]|9|@$I|16|J|17|1|18]]|A|$]]|$1|O|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I had multiple calendars so this worked: 

<pre><code>#calendar .fc-today {
 background: #FFF !important;
}

#calendar-two .fc-today {
 background: #FFF !important;
}
</code></pre>

Using <code>#calendar-favorite .fc-unthemed .fc-today { ... }</code> did not work, so remember to remove the <code>.fc-unthemed</code> part.

Also check out the jquery way: <a href="https://stackoverflow.com/a/17930817/1066234">https://stackoverflow.com/a/17930817/1066234</a> using <code>dayRender</code>

blocks|key|1755156|text|要在dayview中更改完整日历的当前日期的颜色/背景，请添加以下CSS类，并确保它在所有css样式之后加载。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1755157|++.fc-view-basicDay+.fc-today+{
+++++color:....;
+++++background:....;
++}+|code-block|syntax|javascript|1755158|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To change color/background of fullcalendar's current day in dayview, add the following CSS class and make sure it is loaded after all css styles.

<pre><code> .fc-view-basicDay .fc-today {
 color:....;
 background:....;
 } 
</code></pre>

blocks|key|2274163|text|对我来说，它是.ui-state-highlight.fc-today|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2274164|entityMap^0|7|S|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

for me it was <code>.ui-state-highlight.fc-today</code>

blocks|key|5802519|text|将此关键字!important添加到行尾分号之前，以覆盖为css类.fc-day-today设置的默认规则。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5802520|使用jQuery的.js文件|BOLD|5802521|<script>

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

</script>|code-block|syntax|javascript|5802522|.css文件|5802523|.cell-background+{
++++background-color:#D9FFE1+!important;
}|5802524|这适用于fullCalendar+v5.8.0。您可以将相同的概念应用于不同的。|5802525|entityMap^0|5|A|X|D|0|9|3|0|0|0|4|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|13|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|14|8|@$9|15|A|16|B|H]]|D|@]|E|$]]|$1|P|3|Q|5|K|7|17|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|18|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|U|$]]

Add this keyword <code>!important</code> to the end of the line just before the semicolon to override the default rules set for the css class <code>.fc-day-today </code>
.js file using jQuery
<pre><code>&lt;script&gt;

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

&lt;/script&gt;
</code></pre>
.css file
<pre><code>.cell-background {
 background-color:#D9FFE1 !important;
}
</code></pre>
This worked for fullCalendar v5.8.0. You can apply the same concept for different.

blocks|key|4386768|text|这对我在FullCalendar+3.6.1中很有效。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4386769|#calendar-id+.fc-widget-content:not(.fc-axis)+{
+++++++background:+#FFF+!important;
}|code-block|syntax|javascript|4386770|entityMap^0|4|I|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

This work for me in <code>FullCalendar 3.6.1</code>

<pre class="lang-css prettyprint-override"><code>#calendar-id .fc-widget-content:not(.fc-axis) {
 background: #FFF !important;
}
</code></pre>

blocks|key|1757745|text|今天的这项工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1757746|.fc-timeGridDay-view+{
++.fc-widget-content:not(.fc-axis)+{
++++.fc-today+{
++++++background:+red;
++++}
++}
}|code-block|syntax|javascript|1757747|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This work in today

<pre><code>.fc-timeGridDay-view {
 .fc-widget-content:not(.fc-axis) {
 .fc-today {
 background: red;
 }
 }
}
</code></pre>

blocks|key|2274343|text|很好的答案。但在FullCalender中是否也有启用/取消当前日期指标的选项？原因是，我使用不同类型的日历，并且想要一次显示当天的颜色，而不是在另一个视图上。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2274344|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Good answers. But is there also an option in FullCalender to enable/disbale the current day indicator? Reason is, I use the calender in different types and want once to show the current day color but not on the other view.

blocks|key|4386945|text|使用SCSS在v5的时间线视图中突出显示今天|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4386946|//+make+today+highlight+in+red
.fc-day-today+{
++border:+1px+solid+red+!important;
++.fc-timeline-slot-frame+{
++++++border-top:+1px+solid+red+!important;+
++}
}
.fc-day-today+%2B+.fc-day-future+{
++border-left:+1px+solid+red+!important;
}|code-block|syntax|javascript|4386947|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

To highlight today in timeline view in v5 with SCSS
<pre><code>// make today highlight in red
.fc-day-today {
 border: 1px solid red !important;
 .fc-timeline-slot-frame {
 border-top: 1px solid red !important; 
 }
}
.fc-day-today + .fc-day-future {
 border-left: 1px solid red !important;
}
</code></pre>

blocks|key|2274457|text|这是v5.9.0中的工作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2274458|当天：|2274459|#calendar+.fc-day-today{
background-color:+#ff0000+!important;
font-size:+80%25;
}|code-block|syntax|javascript|2274460|对于月份：|2274461|#calendar+.fc-day{
background-color:+#ff0000+!important;
font-size:+80%25;
}|2274462|id+(#calender)来自|2274463|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

that's work in v5.9.0
for the current day:
<pre><code>#calendar .fc-day-today{
background-color: #ff0000 !important;
font-size: 80%;
}
</code></pre>
for month:
<pre><code>#calendar .fc-day{
background-color: #ff0000 !important;
font-size: 80%;
}
</code></pre>
the id (#calender) is from

I would like to change the color of the current day but only when the calendar is in the day agenda view. My users say they're having a hard time seeing the lines or something. I looked through the documentation as well as the css/js and didn't find a quick way of doing it. Is this even possible without major code changes?

How to set the current day color in FullCalendar?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想要更改当天的颜色，但仅当日历在日程表视图中时。我的用户说他们很难看清线条之类的东西。我浏览了文档和css/js，但没有找到一个快速的方法。在不进行重大代码更改的情况下，这是可能的吗？

问如何在FullCalendar中设置当天的颜色？
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在FullCalendar中设置当天的颜色？EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在FullCalendar中设置当天的颜色？
EN