How to set the current day color in FullCalendar?

Question

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?

He is probably referring to jQuery UI's "fullcalendar" widget. — Pekka, Jan 22 '11 at 18:45

score 18 · Answer 1 · edited Apr 09 '22 at 10:33

18

you can use following code

.fc-day-today {
    background: #FFF !important;
    border: none !important;
  
}

edited Apr 09 '22 at 10:33

Community

1
1

answered May 24 '16 at 08:48

Sunny Luthra

301
2
5

score 18 · Answer 2 · answered Jan 22 '11 at 21:49

18

I honestly don't really know what you're talking about, but the jQuery UI fullcalendar widget uses the CSS class .fc-today to style the current day. If your changes aren't visible, try to use !important — it might be that one of the many other classes overrides your styles elsewhere.

answered Jan 22 '11 at 21:49

polarblau

17,649
7
63
84

The current day is yellow whereas all the other days are white. My users are having a hard time seeing the lines on the day agenda view for the current day because it is yellow. Sorry I should have been more specific and I believe that will fix my issue. I can change the css property for .fc-today with jquery while on the daily agenda view for the current day and back when not on the current day. Thanks! – Kirrilian Jan 24 '11 at 19:12
If only want to use css then do as follows: in version 3.9.0 : `.fc-agendaDay-view .fc-today { background: white !important; } ` – RolandoCC Apr 07 '18 at 00:48
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. – Mitch Oct 23 '20 at 11:55

score 6 · Answer 3 · answered Apr 22 '15 at 17:36

6

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

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

answered Apr 22 '15 at 17:36

Brant

1,456
14
14

Works great on version `2.9.0` – Thiago Pereira Aug 08 '16 at 21:40
.fc-bg .fc-state-highlight{ background-color:#009688 !important; } I used this to get the correct result. Fullcalender version 3.4.0 – Rajesh Nadar Aug 01 '17 at 05:57

score 6 · Answer 4 · answered Oct 26 '20 at 13:06

6

Full Calendar >= 5

In fullcalendar >= 5, they changed the class name to .fc-day-today. However, you'll need to increase the specificity of that selector to override the styles OR use !important 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.

answered Oct 26 '20 at 13:06

karns

5,391
8
35
57

1

"I have NOT looked if the API supports something more native. If it does, probably a better long term solution" It doesn't matter. FullCalendar is famous for changing completely the API in each new version. – Ivan Jan 29 '21 at 10:05

score 4 · Answer 5 · edited May 23 '17 at 12:17

4

I had multiple calendars so this worked:

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

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

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

Also check out the jquery way: https://stackoverflow.com/a/17930817/1066234 using dayRender

edited May 23 '17 at 12:17

Community

1
1

answered May 25 '16 at 09:02

Avatar

14,622
9
119
198

score 1 · Answer 6 · answered May 29 '13 at 11:29

1

for me it was .ui-state-highlight.fc-today

answered May 29 '13 at 11:29

kneidels

956
6
29
55

score 1 · Answer 7 · answered Jul 13 '21 at 14:56

Add this keyword !important to the end of the line just before the semicolon to override the default rules set for the css class .fc-day-today

.js file using jQuery

<script>

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

</script>

.css file

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

This worked for fullCalendar v5.8.0. You can apply the same concept for different.

score 1 · Answer 8 · answered Jul 28 '11 at 17:56

1

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.

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

answered Jul 28 '11 at 17:56

Rams Kannan

71
1
8

1

in version 3.9.0 use: `.fc-agendaDay-view .fc-today { background: white !important; } ` – RolandoCC Apr 07 '18 at 00:47

score 1 · Answer 9 · answered Jun 01 '22 at 04:17

1

This works for Vue Component of FullCalendar v5!

:deep( .fc-daygrid-day.fc-day-today ){
    background-color: #FFFFFF;
}

:deep( .fc-timegrid-col.fc-day-today) {
    background-color: #FFFFFF;
}

answered Jun 01 '22 at 04:17

hirakei1203

31
2

score 0 · Answer 10 · edited Feb 08 '19 at 18:40

0

This work for me in FullCalendar 3.6.1

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

edited Feb 08 '19 at 18:40

letsintegreat

3,328
4
18
39

answered Feb 08 '19 at 18:23

Fellipe Fonseca

1
2

score 0 · Answer 11 · edited Jun 09 '20 at 14:44

0

This work in today

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

edited Jun 09 '20 at 14:44

jiwopene

3,077
17
30

answered Jun 09 '20 at 12:45

Andriy Danylko

129
1
4

score 0 · Answer 12 · answered Oct 23 '20 at 11:54

0

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.

answered Oct 23 '20 at 11:54

Mitch

160
10

ihor.eth · Answer 13 · 2021-04-12T15:11:24.923

0

To highlight today in timeline view in v5 with SCSS

// 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;
}

edited Apr 12 '21 at 15:11

answered Mar 13 '21 at 18:35

ihor.eth

2,207
20
27

score 0 · Answer 14 · answered Aug 17 '21 at 11:40

0

that's work in v5.9.0

for the current day:

#calendar .fc-day-today{
background-color: #ff0000 !important;
font-size: 80%;
}

for month:

#calendar .fc-day{
background-color: #ff0000 !important;
font-size: 80%;
}

the id (#calender) is from

answered Aug 17 '21 at 11:40

NTIC TECH

116
1
9

score 0 · Answer 15 · edited Jul 26 '22 at 11:10

0

In my case, it was:

.fc .fc-timegrid-col.fc-day-today {
  background-color: white;
}

But for yourself, it's better to follow the path of the console by turning on the display of the week

edited Jul 26 '22 at 11:10

Tyler2P

2,324
26
22
31

answered Jul 22 '22 at 09:45

Alexandr Zabirov

1
1

score 0 · Answer 16 · answered Aug 10 '22 at 12:13

0

For angular here is my solution:

:host ::ng-deep{
    .fc .fc-daygrid-day.fc-day-today {
        background: #f3533f;
     }
}

P.S.: No need to use !important

answered Aug 10 '22 at 12:13

Dev Gaud

676
6
10

score 0 · Answer 17 · answered May 19 '23 at 16:29

0

In v5.11.3 you can use the following:

:root {
    --fc-today-bg-color: #FFFFFF;
}

the default fullcalendar css uses the css variable "--fc-today-bg-color" by default.

answered May 19 '23 at 16:29

CrashM

83
1
7

How to set the current day color in FullCalendar?

17 Answers17

Linked