How would I wrap List View events after month separator in a div?

[Tristan]

In the list view, my client wants 3 events to a row on larger screens. I’m finding it difficult to do this without a containing div that doesn’t also include the span for the month separator. I’ve tried finding the markup for this in the plugin but to no avail, and I’ve also tried adding a closing and opening div tag with jQuery, but jQuery won’t allow me to open a div without automatically closing it.

Can anybody help please? The site in the URL is unfinished but it’ll give you enough of an idea.

[Andras]

Hello Tristan,

Thanks for using our plugins and welcome to the forums!

Great question you have there! Let me try to help you with this.

I believe the easiest would be to create a template override for the list view itself.

Here are 2 posts to get you started on template overrides for our plugins:

https://theeventscalendar.com/knowledgebase/themers-guide/
https://theeventscalendar.com/knowledgebase/template-overview/

 

If I’m not mistaken, then you will need to create an override for one of the below 2 files:

wp-content\plugins\the-events-calendar\src\views\list\content.php

or

wp-content\plugins\the-events-calendar\src\views\list\list.php

depending on where exactly you want to put the extra div.

This should get you started, let me know if this helps and if you have any further questions regarding this.

Cheers,
Andras

[Tristan]

Hi Adras,

Thanks for that!

The code in question is located in wp-content\plugins\the-events-calendar\src\views\list\loop.php. It’s not as simple as wrapping any code there in a div, as the function tribe_events_list_the_date_headers() only inserts the month span if the date has changed, and the documentation on that function is pretty sparse.

For now I’m just going to copy that template file to my theme and comment out the function which outputs the month headers, but it would be great if someone at Modern Tribe could figure this out.

Thanks,

Tristan

[Andras]

Hi Tristan,

I’m sorry, I cannot quite imagine what you are trying to achieve here. Can you send a screenshot / mockup with the result that you want to get? I might be able to better help you with this then.

Cheers,
Andras

[Tristan]

Hi Adras,

What I’m trying to achieve is the following, so that there’s a div wrapping all events after each month/year header:

<div class=”tribe-events-loop”>

<!– Month/Year Headers –>
<span class=”tribe-events-list-separator-month”><span>March 2017</span></span>

<div class=”my-wrapper-div”>

<!– Event –>
<div id=”post-763″ class=”type-tribe_events post-763 tribe-clearfix tribe-events-first”>

// everything inside the event div

</div>

<!– Event –>
<div id=”post-764″ class=”type-tribe_events post-764 tribe-clearfix tribe-events-first”>

// everything inside the event div

</div>

<!– Event –>
<div id=”post-765″ class=”type-tribe_events post-765 tribe-clearfix tribe-events-first”>

// everything inside the event div

</div>

</div><!– end my wrapper div –>

<!– Month / Year Headers –>
<span class=”tribe-events-list-separator-month”><span>April 2017</span></span>

<div class=”my-wrapper-div”>

<!– Event –>
<div id=”post-766″ class=”type-tribe_events post-766 tribe-clearfix tribe-events-first”>

// everything inside the event div

</div>

</div><!– end my wrapper div –>

</div>

[Andras]

This snippet should get you started on this:

function wrapper_callback( $string ) {

if ( isset ( $string ) && $string != "" ) {
$string = '</div><!– end my wrapper div –>' . $string . '<div class="my-wrapper-div">';
}
return $string;
}
add_filter( 'tribe_events_list_the_date_headers', 'wrapper_callback' );

Unfortunately this is not perfect as it will include the closing div before the first date header, so the HMTL markup will be totally bad.

Also you will need to figure a way to close the div at the end of a page.

Let me know if this helps, or if you have further questions.

Cheers,
Andras

[Tristan]

Hi András,

Thank you very much, that’s very helpful.

Tristan

[Andras]

Cool, I’m stoked to hear that helped get you started.

Since this is marked resolved I am going to close this ticket, but if you need anything else related to this topic or another please post a new one in the forum and we will be happy to help you out.

Good luck with your project!

Cheers,
Andras

PS: If you like our plugins, and you didn’t yet do so 🙂 we would be happy to receive a review in the wordpress.org repository. Thanks!
https://wordpress.org/support/plugin/the-events-calendar/reviews/
https://wordpress.org/support/plugin/event-tickets/reviews/

PS2: We’d be also grateful if you would give us feedback on your satisfaction with support. Just click on one of the classy looking emojis below. 🙂 If you can spare a few words, that’s even better. Doublethanks!

 

[Author]

Posts