Support

Home Forums Events Calendar Add-on Missing CSS class for cancelled event?

Missing CSS class for cancelled event?

Posted: April 27, 2022 at 5:28 am

Viewing 3 reply threads


Marco

April 27, 2022 at 5:28 am

Hi support,

I’m using the Events Calendar Add-on to display events. I’ve added some custom css in my child theme so events that are sold out or are expired have a grey background-color on the Calendar.

a.fc-event.fc-event-hori.fc-event-start.fc-event-end.sold-out, a.fc-event.fc-event-hori.fc-event-start.fc-event-end.expired {
background-color: #777!important;
border-color: #777!important;
opacity: 0.6;

This is very useful for mobile visitors. This way a visitors can see directly on the Calendar whether or not it’s (still) possible to book a ticket for a workshop, without having to click/navigate to the single event page.

So far so good.

Sometimes I need to cancel a workshop. In that case I also want to grey out that particular cancelled event on the Calendar. I’ve looked carefully but was not able to find out what CSS class targets a cancelled event on the Calendar (for example: a.fc-event.fc-event-hori.fc-event-start.fc-event-end.cancelled)

Can you please provide me the CSS class I should use? Thanks!


Tony

  • Support Staff

April 28, 2022 at 9:37 am

Hi there,

By default, cancelled events do not add a separate class to the events on the calendar but it can be done using a snippet like this:

https://gist.github.com/Pebblo/6d8d9bad97911f63f0a21f8872c10898

You can add that to a custom functions plugin on your site, we have some documentation on creating one here:

https://eventespresso.com/wiki/create-site-specific-plugin-wordpress-site/

That should add a ‘cancelled’ class to those elements and allow the above to work for you.


Marco

April 28, 2022 at 11:30 am

The snippet you provided works like a charm Tony. Thanks!

Marco


Tony

  • Support Staff

April 28, 2022 at 1:43 pm

Awesome, I’m glad that worked for you 🙂

Viewing 3 reply threads

The support post ‘Missing CSS class for cancelled event?’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso