Color for available days in “Year Availability” view

[Marco Molinari]

I tried to play with the CSS of the plugin, but I am unable to change the colors of my calendars. I tried to apply my changes both to style.css and style.min.css, without success.

I would be interested in understanding how to manually edit any of the colors to my liking.
More precisely, I would like to use a color to highlight the days that are not booked in the “Year Availability” view. It is important that booked days have a different color from the free days.

I started by trying to modify the CSS code to edit manually the “.ics-calendar-widget-grid td.has_events .day, .ics-calendar-year-availability-grid td.has_events .day” class in the style.css file, but it doesn’t show any result. With the same method, I would like to add a background color also to the days that have no events.

I would like to write this in the CSS directly, as – for example – the empty days don’t have a standard coloration option in the settings.

What file do I have to modify to obtain these results?

Thanks in advance!

[room34]

I may need to see your page to give you optimal advice on this, but first I want to clarify something: it sounds like your days that are booked do not have a color, is that correct? They should, that’s how it’s designed. If they don’t, then it’s something in your theme CSS that’s conflicting.

If the booked dates do have a color, and you just want the free dates to also have a different color, you can do that with this CSS selector:

.ics-calendar-year-availability-grid td.empty .day

Note though that this does not affect the “half” dates (with the diagonal background color). The CSS for this is a bit more complicated, as it involves the CSS linear-gradient function, and also because that CSS is inserted dynamically to accommodate feed color coding. I am planning in an upcoming update to add an option to set the “empty” date background color for these views, which would handle the linear-gradient as well.

[room34]

I decided to work on this update today. Version 4.4.8 of ICS Calendar Pro is now available. The Calendar Builder has a new option under the Advanced tab called “Empty Day Background Color” that does what I described in CSS in my previous reply. It also does the linear-gradient.

[Author]

Posts