How to set the current day color in FullCalendar?

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 eve开发者_如何学编程n possible without major code changes?

---

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.

---

you can use following code

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

---

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

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

---

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.

---

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

---

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:....;
  } 

---

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

---

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.

---

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

---

This work for me in FullCalendar 3.6.1

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

---

This work in today

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

---

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.

---

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

---

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

---

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

---

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