• Resolved e-commerce-concept

    (@e-commerce-concept)


    hello

    I’d like to change the color of busy and available days. For example, busy days are red and available days are green.
    Is this possible with CSS?

    Thank you for your help

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Hi, since ICS Calendar was not initially designed to be used as a booking tool, it only shows events in the calendar, not free time. You could use the color parameter to make the events red, although it wouldn’t change the appearance of the free days.

    There are CSS classes on the <td> tags in the calendar table that indicate whether or not that day has any events. You could use that to color-code the entire table cell for each day. That would look something like this:

    .ics-calendar-month-grid td.has_events { background: red; }
    .ics-calendar-month-grid td.empty { background: green; }

    That’s just a super-simple example; I don’t think those colors are exactly what you’re going to want, and you’d probably also need to change the text to white, if the background colors are dark. But it’s the basic idea.

    There are more options with the Pro version that are more suitable for booking calendars, but we’re not supposed to discuss paid plugins here, so please use the support request form for additional details.

    Thread Starter e-commerce-concept

    (@e-commerce-concept)

    Thank you, it’ ok

    best regards

    I’ve added this as a suggestion on the CSS Tips and Tricks page on the ICS Calendar website.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘change color based on availability’ is closed to new replies.