Customizations to Events Navigation Bar

[Jonathan Goldford]

I’m looking to do two different things to theme our calendar’s events navigation bar:

1.) Under the “Events In” and “Events From” filters the dates are showing as yyyy-mm and yyyy-mm-dd respectively, which is not how we need it since we’re in the US. Instead we need it to be mm-yyyy and mm-dd-yyyy. How can I make this change?

2.) We only have two different views for “View As” so using a dropdown doesn’t make the most sense for us. Instead, we’d like to use two buttons side by side, just as you had it in older versions of the plugin. What is the best way to go about this?

Thanks a lot. I appreciate the help.

Jonathan

[Jonah]

Hi wiredimpact,

I’m not actually sure myself and will need to check with one of our developers. Stay tuned for another update soon. Have you looked at the themer’s guide (https://theeventscalendar.com/support/documentation/events-calendar-themers-guide/)?

– Jonah

[Kyle]

Hi wiredimpact,

Unfortunately, it is currently not possible to change the date format in the event bar’s datepicker, as the view changing relies on this format to pass proper url paramaters when changing the date and views. It is something we are aware of, and we may include the option to change the date format in a future update.

Modifying the appearance of the “View As” will be easiest when running the latest version of the plugins (version 3.0.2 of the core plugin and 3.0.4 of Events Calendar Pro) as we introduced new markup for the views selector, as well as a way to load custom styles alongside our own.
To load the new styles, follow the directions following “Loading Custom Styles for The Events Calendar” in the themer’s guide here: https://theeventscalendar.com/support/documentation/events-calendar-themers-guide/

Putting this css in that file should get you started:
#tribe-bar-views li.tribe-bar-views-option {
display: list-item;
float: left;
width: 50%;
margin: 0;
}

It will obviously need style tweaking to get it to display as you like. I hope this points you in the right direction!

Cheers,
Kyle

[Jonathan Goldford]

Thanks for the help Kyle. I’ve got the formatting all squared away. The only issue I’m having now is that when a user clicks on the non-selected view it switches to the first position in the list before the page reloads. The isn’t necessary since the page reloads. Is there anything I can do to remove this?

Thanks again.

Jonathan

[Jonathan Goldford]

Just checking in. Thanks for the help.

[Rob]

Hey wiredimpact! Thanks for the follow-up; I’m not sure if Kyle saw your reply so I just made him aware of it. Expect a reply very shortly and thanks for your patience so far.

[Jonathan Goldford]

Just wanted to check in on this again. Thanks a lot.

[Kyle]

Hi wiredimpact!

Your request is a difficulty one to fulfill as it’s simply not how the bar is built to function. We have implemented javascript that reorders the list based with the current view first, and preventing this javascript from firing is not currently possible.

Our team is always in discussions on how to make our plugin more extensible and customizable. One thing that may help is a maintenance release that we are releasing in the coming days that adds unique CSS selectors to each view option – once this releases, I should be able to give you a CSS solution that won’t prevent the buttons from being re-ordered in the source code, but will display them in a way where they will at least always display in the correct order. A tricky solution to a tricky problem 🙂

Keep your eye out for the next release and let me know when you have upgraded and I’d be happy to try a solution for you.

Cheers,
Kyle

[Jonathan Goldford]

Thanks Kyle. I just updated to the new version and this seems to be fixed. Have a good day.

[Rob]

Excellent to hear that got you sorted, wiredimpact! Thanks for confirming as much. If we can do anything else down the road please don’t hesitate to let us know.

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts