CODEWITHSUNDEEP
javascriptjquerycssfullcalendar
Kirrilian
Kirrilian

Reputation: 311

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 even possible without major code changes?

Upvotes: 21

Views: 50783

Answers (17)

CrashM
CrashM

Reputation: 85

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.

Upvotes: 0

Dev Gaud
Dev Gaud

Reputation: 844

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

Upvotes: 0

Alexandr Zabirov
Alexandr Zabirov

Reputation: 1

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

Upvotes: 0

hirakei1203
hirakei1203

Reputation: 51

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

Upvotes: 2

Sunny Luthra
Sunny Luthra

Reputation: 321

you can use following code

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

Upvotes: 20

NTIC TECH
NTIC TECH

Reputation: 116

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

Upvotes: 0

Nelson Katale
Nelson Katale

Reputation: 1539

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.

Upvotes: 1

ihor.eth
ihor.eth

Reputation: 2420

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

Upvotes: 0

karns
karns

Reputation: 5847

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.

Upvotes: 8

Mitch
Mitch

Reputation: 160

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.

Upvotes: 0

Andriy Danylko
Andriy Danylko

Reputation: 139

This work in today

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

Upvotes: 0

Fellipe Fonseca
Fellipe Fonseca

Reputation: 1

This work for me in FullCalendar 3.6.1

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

Upvotes: 0

Avatar
Avatar

Reputation: 15166

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

Upvotes: 4

Brant
Brant

Reputation: 1446

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

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

Upvotes: 6

kneidels
kneidels

Reputation: 914

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

Upvotes: 1

Rams Kannan
Rams Kannan

Reputation: 71

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

Upvotes: 1

polarblau
polarblau

Reputation: 17734

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.

Upvotes: 20

Related Questions