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!

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.


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.

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!

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

Solution

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

Solution

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.

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


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.