Event listing with dynamic month dividers and pagination support

Hey, how can you achieve this event listing in Bricks without doing it entirely in PHP? The events are provided as custom post type ‘event’.

Precondition

  • When a new month starts, it should automatically show a heading, which groups the events of a month visually.
  • Pagination support is needed, e.g. 12 events per page.
  • Conditionally avoid output of day number and week day (left column)

Problems
I run against several obstacles, which are

  • adding the month heading/divider
  • and don’t output the day prominently for all subsequent events of the same day

I finally managed to overcome the issue of Bricks query loops - one root element - with a workaround using the /frontend/render_element to group posts of the same month and add the heading.

Something as simple as that should not take a workaround, PHP to add all the grouping HTML and 10+ hours to avoid all side effects of render_element on an an item that is looped.
Quite hard to maintain and cumbersome, but at least it works for now.

I have to correct myself. This is not possible in combination with WP Grid Builder filtering and looks like the next limitation, that you run into, when circumventing the limitation of the single loopable element.

Quite frustrating …

so many ways to solve it

1 - if you just have couple month like 3-5 months make 1 loop per month

2 - show all months names on left but only show the first month name and hide the rest with js or css nth-child …etc or with js

I can think like 2-3 more methods but this 2 methods are the best ones for you probably

It needs to be dynamic, automatic and not worse than I the already perfect integration I had in Oxygen.

That’s not a maintainable solution, nor a solution, that supports pagination or filtering.
Update: Okay, JS is a workaround that will do the trick, but I don’t want to hide stuff with JS or CSS and pollute the DOM with irrelevant tags. I want to use PHP to directly create the proper HTML.

The only viable solution I can think of is one query with condtions, which in the worst case need to be implemented fully in PHP instead of the Bricks UI.

second method I wrote is very simple to implement and completely native and fully dynamic and pagination possible because only one loop (you will need couple line of js thats it)

I am pretty sure because I already developed couple similar loops before

Show me an example please.

The easiest JS solution is reading the date of each post and on each month change add the month divider and the HTML container, that wraps it.
Then you need to make sure that updates are triggered with WP Grid Builder filters and pagination.

@sinanisler Looks like you built the perfect solution for this problem without the need for JS :star_struck: