Skip to Content (Press Enter)
UserImage.jpg
Daniel Zhang
238Views
8Comments
Solved
Changing FullCalendar Color
Question
CSS

Hello,


I'm currently having troubles with changing the color of "today" on the FullCalendar2 Web Block.


I've tried the following css codes, but it does not override the default one:

SyntaxEditor Code Snippet

.fc-today{background: palegreen !important}

.fc-unthemed .fc-today {
  background: palegreen !important;
}

.fc-unthemed td.fc-today {
  background: palegreen !important;
}

Much appreciated for any help!

0
0
28 Oct 2019
Copy Link
UserImage.jpg
Daniel Zhang
Solution

Update: one of the codes works, I had to clear my cache and hard reload my browser!

See solution in context
0
0
30 Oct 2019
Copy Link
UserImage.jpg
Luciano Sodré

Daniel Zhang wrote:

Hello,


I'm currently having troubles with changing the color of "today" on the FullCalendar2 Web Block.


I've tried the following css codes, but it does not override the default one:

SyntaxEditor Code Snippet

.fc-today{background: palegreen !important}

.fc-unthemed .fc-today {
  background: palegreen !important;
}

.fc-unthemed td.fc-today {
  background: palegreen !important;
}

Much appreciated for any help!

Hi Daniel, try that.

th.fc-widget-header.fc-mon.fc-today {
    background-color: palegreen;
}


I used the fullcalendar demo page:

http://grazina.outsystemscloud.com/FullCalendarDemo/CalendarResources.aspx?(Not.Licensed.For.Production)=

see ya.


0
0
29 Oct 2019
Copy Link
UserImage.jpg
Daniel Zhang

Luciano Sodre wrote:

Daniel Zhang wrote:

Hello,


I'm currently having troubles with changing the color of "today" on the FullCalendar2 Web Block.


I've tried the following css codes, but it does not override the default one:

SyntaxEditor Code Snippet

.fc-today{background: palegreen !important}

.fc-unthemed .fc-today {
  background: palegreen !important;
}

.fc-unthemed td.fc-today {
  background: palegreen !important;
}

Much appreciated for any help!

Hi Daniel, try that.

th.fc-widget-header.fc-mon.fc-today {
    background-color: palegreen;
}


I used the fullcalendar demo page:

http://grazina.outsystemscloud.com/FullCalendarDemo/CalendarResources.aspx?(Not.Licensed.For.Production)=

see ya.



Hi Luciano,


I gave this a try and it still didn't work. I inspected the CSS of the loaded webpage and found it is loaded as a source (not sure what this means, sorry). I'm currently pasting the CSS code in the CSS section of my weblock that contains the FullCalendar weblock - is this the correct location for it? I've also tried placing it in the CSS for the entire app, but the color remains the same.

0
0
29 Oct 2019
Copy Link
2019-12-07 16-12-59
CristianPumaEs6

hi @Daniel,

I recommend that you inspect the DOM with Chrome dev, and validate if there is any css property that is changing the color you want.

luck!

1
0
29 Oct 2019
Copy Link
UserImage.jpg
Daniel Zhang

Cristian Angel Puma Villalva wrote:

hi @Daniel,

I recommend that you inspect the DOM with Chrome dev, and validate if there is any css property that is changing the color you want.

luck!


Hi,

 this is the element that controls the color:

But as shown before, when I put the CSS code to override this, it does not change the color on my calendar

0
0
29 Oct 2019
Copy Link
UserImage.jpg
Daniel Zhang
Solution

Update: one of the codes works, I had to clear my cache and hard reload my browser!

0
0
30 Oct 2019
Copy Link
2019-10-24 16-06-14
Alejandro Giraldo Duque

Hi, you can inspect in your browser and capture the class of table for example



Then in outsystem something like that

However in the background you can edit your background so #anycolor !important.


Regards.

0
0
30 Oct 2019
Copy Link
2019-12-07 16-12-59
CristianPumaEs6


Daniel Zhang wrote:

Good, as Alejandro Giraldo Duque says, maybe a screenshot could help us.

but in theory inspecting and coupled with toolsDev could edit the css

Hi, you can inspect in your browser and capture the class of table for example



Then in outsystem something like that

However in the background you can edit your background so #anycolor !important.


Regards.



1
0
05 Nov 2019
Copy Link
2025-11-19 06-14-01
Miguel Verdasca
Champion

Hi,


While it seems that there is no official way of doing this, you could use the events to pass the dates and use CSS to style. Here is some idea: https://stackoverflow.com/questions/31406727/pikaday-mark-or-highlight-certain-dates


Best regards,

Nuno Verdasca

0
0
30 Oct 2019
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.