Topic: Color for available days in “Year Availability” view

Home Pro Support Forums CSS and Design Color for available days in “Year Availability” view

Tagged: , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #6493
    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!


    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.


    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.