Custom display of event type

Ask the Community Customization
1

Did this ever get resolved? I’m making a certain event type selected by default in an additional embed of my calendar widget, but wondering if it is possible to hide all event types EXCEPT the one selected by default? For this second installation, it is only to highlight a specific type of program, so we don’t want to clutter it with all of the other types.

2 Likes
2

Hi there, @kt_at_LINCC :waving_hand:

Could you please send me a link to the page with the 2nd installation of your Event Calendar? I’ll be happy to check what can be done :slightly_smiling_face:

1 Like
3

Yes!

What I’m hoping to do here is to ONLY display events with the OBOC type. I’m also wondering if there is a way to change the heading in this separate installation, and if not, is there a way to hide it?

I’m also kind of thinking – the way I will be adding events to this calendar is by uploading a CSV on weekly basis that will be the results of a webform populated by my staff, so it actually wouldn’t be too much trouble to create a separate widget, then only upload the events I want to include. This way I’d be able to manage the entire customization without worrying about CSS.

2 Likes
4

Thanks! To pre-select the OBOC events only, you need to replace the widget’s installation code on the page you’ve shared with this one:

<script src="https://elfsightcdn.com/platform.js" async></script>
<div class="elfsight-app-ef082153-449d-4c6b-bd79-c3e00d456415" data-elfsight-app-lazy data-elfsight-app-filter-event-type="OBOC"></div>

To hide the other event types from the filters and add a custom twidget title for thos page only, please add this code next to the widget’s installation code:

<style>
[data-type="eventType"] .es-more-less-button-button {
 display: none;
}

[data-type="eventType"] .es-filter-button-button:not(:last-child) {
 display: none;
}

.eapp-events-calendar-events-calendar-title {
 font-size: 0;
}

.eapp-events-calendar-events-calendar-title::after {
 content: "New Title";
 font-size: 56px;
}
</style>

Currently, the OBOC event type is the last option in the filters and this code displays only the last event type option in the filter popup. If you’re going to add more event types, keep OBOC on the last place and the code will be working fine.

To set up a different widget title, replace New Title in the code with your custom title:

image
image596×287 15.8 KB


Give it a try and let us know if it worked :wink:

2 Likes