|
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
|
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
|
April 28, 2022 at 1:43 pm
Awesome, I’m glad that worked for you 🙂
|
