Custom link button to filter the calendar

[Lois]

Hello support team,

I would like to create our web page with a row of buttons above the calendar Month view to filter the events by category or cities in place of the Filter Bar. The filtered result would be displayed as a List view or Photo view. How can I do this? Do I need to code?
I know there is the filter add-on but it is a bit over kill to us for now in terms of functionality.

Secondly, how can I increase the bottom inner border of the preview event in the Month view ?
The bottom border is thinner than the left border and I would like to make it thicker. Pls see attached pic

If you need more information please let me know.

Thanks for your help,
Lois

[Victor]

Hi Lois!

Thanks for reaching out to us and for using our plugins! 🙂

First off, I do want to note that we are fairly limited in how much we can support custom development questions like this.

That said, I’d be happy to at least point you in the right direction as best I can. We also have a <u>list of freelancers</u> who we would happily recommend for this level of help.

I would like to create our web page with a row of buttons above the calendar Month view to filter the events by category or cities in place of the Filter Bar. The filtered result would be displayed as a List view or Photo view. How can I do this? Do I need to code?

I guess you could accomplish something like that but it will surely require some custom coding. To add content below the main calendar or modify / add content to the month view template I recommend you take a look at our Themer’s Guide.

Shortcodes are another thing that might be useful if you want to embed full calendar views in places other than the main calendar page and they can also be customized to show certain categories, dates and several other things. > https://theeventscalendar.com/knowledgebase/embedding-calendar-views-tribe_events-shortcode/

how can I increase the bottom inner border of the preview event in the Month view ?
The bottom border is thinner than the left border and I would like to make it thicker

You could try adding the following css snippet to your theme’s styles:

.tribe-events-calendar .tribe-events-tooltip {
padding-bottom: 12px;
}

If it doesn’t chage anything you may need to add !important to the property.

I hope that helps and let me know if you have other questions.

Best!
Victor

[Lois]

Hi,

I could change the bottom padding – thanks! and for the custom coding, I will check what help is possible to take.

May I add another request,
On the same preview event of the month view, the excerpt is shown on the right of the picture. How to make it appear on the top of it just below the title and date?
thanks again

Best regards
Lois

[Lois]

And also, how to display the Filter Bar at the bottom of the month view ? – Thank you !

[Victor]

Hey Lois!

I’m glad the css snippet worked for you!

Let me help you with your other questions.

On the same preview event of the month view, the excerpt is shown on the right of the picture. How to make it appear on the top of it just below the title and date?

Absolutely, that’s totally possible! I would suggest overriding the tooltip.php template to make that happen. You can learn more about overriding calendar templates in our <u>Themer’s Guide</u>, but it basically boils down to this:

• Make a copy of the tooltip.php template. It is located at wp-content/plugins/the-events-calendar/src/views/month/tooltip.php
• Make a new folder in your theme called tribe-events
• Make a new folder in that one called month
• Drop your copied tooltip.php file in that last folder

Now that the template is in your theme, you can modify it to suit your needs. In this case, you’ll need to switch the order in which the image and the excerpt appear. So from line 20 to 27 you want to have the code like this >

[[ if(excerpt.length) { ]]
<div class="tribe-event-description">[[=raw excerpt]]</div>
[[ } ]]
[[ if(imageTooltipSrc.length) { ]]
<div class="tribe-events-event-thumb">

</div>
[[ } ]]

And also, how to display the Filter Bar at the bottom of the month view ?

This is also possible by doing a template override of the month.php template file which is located at /wp-content/plugins/the-events-calendar/src/views/

Once copied inside the /tribe-events folder you should change the order in which the tribe bar and the month calendar are called. The code should look like this from line 18 to 22 >


// Main Events Content
tribe_get_template_part( 'month/content' );
// Tribe Bar
tribe_get_template_part( 'modules/bar' );

Will this work for you? Please let me know. 🙂

Cheers!
Victor

[Lois]

Thank you, it all worked except that filter bar is still appearing at the top of calendar view displayed in a custom page (the bar is now effectively at the bottom of the main calendar view however).
Should the css be inserted in another template?

Also, I would like to hide the excerpt displayed in the calendar list view (not the widget list)

Thanks again for your help

Lois

[Victor]

Hi Lois!

I’m glad you could work that out! 🙂

Unfortunately, those changes will only apply to the main calendar. If you are also displaying the calendar using the [tribe_events] shortcode inside a custom page, then you’ll have to customize the shortcode output by using one of the available hooks.

The ‘tribe_events_pro_tribe_events_shortcode_output’ will let you alter the shortcode HTML before it’s sent to the browser. With a little string manipulation, you could relocate the bar.

Further steps on this will require custom coding that is out of the scope of this support, so I hope you can understand this, as we are limited in how much support we can give for this.

I would like to hide the excerpt displayed in the calendar list view (not the widget list)

You can do this by overriding the single-event.php template file that is in /wp-content/plugins/the-events-calendar/src/views/list/ and commenting out or removing line 75 where the tribe_events_get_the_excerpt() function gets called.

I really hope that helps. Let me know if you have other questions.

Best!
Victor

[Support Droid]

Hey there! This thread has been pretty quiet for the last three weeks, so we’re going to go ahead and close it to avoid confusion with other topics. If you’re still looking for help with this, please do open a new thread, reference this one and we’d be more than happy to continue the conversation over there.

Thanks so much!
The Events Calendar Support Team

[Author]

Posts