Can you add CSS class to each event to allow JS filtering by past / future?

Hi,

For one-day events this is not that hard, just compare start date with today’s date and add a certain class to every event. So I can do this. But what about multi-day events? Have you thought about that as well?

Guido

I was thinking about following the same logic used in the shortcodes (unless there is a better thought). So if an event would only show up in past-events shortcode, put past-event and if it only shows in the future events, future-event. If something shows up that it would show in multiple filters, include both classes.

Hi,

It can meet multiple conditions, so yes, multiple classes will be added. Guess this is doable for me. Otherwise it will be quite difficult; which class has priority.
Will take a look at this the next couple of days.

Guido

I appreciate it. This should allow people to add very simple jQuery filters to create buttons to show and hide events based on timing.

Thanks!
Phillip

Hi Phillip,

Have worked on this today.
If I follow the same structure as my shortcodes, then a multi-day event with a start-date before today and an end-date after today gets 2 tags: “current” and “upcoming”. Because you can visit this event today but also after today.
Will this work for you?

Guido

That sounds good to me. Thank you.

-Phillip

Hi Phillip,

Have updated plugin today, I hope you can now filter the events properly..

Guido

PERFECT!

To show my use, I used this shortcode:

[vsel-all-events event_cat=”studio-calendar” order=asc]

And then added this CSS to start by hiding the past events and color them a bit different (could extend this piece a lot more if needed)

.vsel-past { display: none; background-color: #ccc; }

Then just simple jQuery to toggle the past events that will show and hide at the top of the list with a span that is surrounding the Show / Hide Text with ID show_hide_past_events

<script type=”text/javascript”>
jQuery(‘#show_hide_past_events’).click(function(){ jQuery(‘.vsel-past’).toggle(); });
</script>

Hi Philip,

Have just tested this myself and must say it works like a charm! Simple and effective.

Guido

ps. thanks for the nice review of VSEL ??