Custom List Layout with Week Days listed on top

[Chad]

Hello.

I would love to get a developer’s input on this ticket.

I’m trying to create a calendar for a festival that takes place over one week each year.

I would like to reproduce the layout seen here: https://theeventscalendar.com/showcase/christ-church/

I have read through previous forum posts which as the same question. Some answers reference a 3rd party theme and modules. I have looked at these themes and modules and they do not share the layout referenced above.

My questions is: what would be the best approach in recreating this layout? A few options I have come up with include:

1) Using the filterbar, extend the Tribe__Events__Filterbar__Filter class and create a new displayFilter() function to replace the current ‘day’ layout. Would love to be able to select multiple days by styling the existing checkboxes as divs. Pros: ajax loading. Cons: I would have to separate out the other filters that I still want to display elsewhere.

2) Use the top of a standard “week” view (where it lists day of the week) and somehow create a list view below it. Pros: don’t have to mess with the filter bar. Cons: no ajax loading.

3) Use the tribe_get_events function to pull the events I need and create all templates, ajax, etc from scratch. Pros: don’t have to deal with overriding existing code Cons: lots more work.

Maybe there are other options? It would be great to have a developer give me their opinion so I don’t waste a lot of time going down the wrong rabbit hole.

Thanks,
DC

[Trisha]

Hi Chad,

Thanks for writing in, I’d love to help you out here.

I did a super quick test of your 2nd option just to see how it would fare. The constraints are pretty tight within that template and it could be a challenge.  I’m happy to share that with you if you’re interested but keep in mind I didn’t attempt that tabs for the days of the week. It’s more of a proof of concept than a fleshed out solution.

I feel the same thing is probably true for your first options (using the Filterbar) although that is untested on my end.

This is clearly opinion on my part, but I prefer working where the need to over write existing code is minimal. The layout itself isn’t super complicated so the bulk of the work would involve the Ajax. Perhaps you can utilize the jQuery UI tab interface as it’s already available in WordPress.

I hope this helps! Let me know if you have any other questions or if you want to see my bit of code  for that template 😉

Cheers,
Trisha

[Chad]

Hi Trisha,

Thanks for helping me out with this. It wouldn’t hurt for me to see your code, so please send that.

I’ll may end up going with option #3. Are you envisioning a single custom page template that uses tribe_get_events to populate the jQuery tabs?

The big issue there is that I don’t want to lose the filterbar functionality – I need to filter on other fields besides just the day of the week.

What would be your approach?

Thanks!

[Trisha]

Hi Chad,

My suggestion does involve a single custom page.

I’m not totally clear what your needs are as far as the Filter Bar placement in this context. Integrating the Filter Bar on that page is certainly possible but it is quite an advanced customization.

In the end I think the best path forward is the one you’re most comfortable with building and maintaining. As you’ve mentioned, they all have their pros and cons.

You can find the adjustments I made to the widget code here:

https://gist.github.com/trishasalas/563e903a22b05da2c3347a2c46c86b61

Hopefully this will help jump start your efforts. Let us know how it turns out, we love to see cool customizations like this!

Cheers,
Trisha

[Chad]

Hi Trisha,

Thanks so much for putting in extra effort on this! I realize it’s beyond the normal scope of “support”.

Unfortunately I don’t think I have the time to flesh out the idea on my current project. Seems like it’s going to require a lot of extra effort.

I’m just going to outline a few issues in the solution, in case someone else looks this up.

1) I wasn’t able to predefine a start and end date with the following code:

tribe_get_template_part( 'pro/widgets/this-week/nav', 'header', array( 'start_date' =>$current_active_festival_start_date, 'end_date' => $current_active_festival_end_date )

2) This solution doesn’t integrate the filterbar, which is important in my case.

3) The solution utilizes a widget while I was hoping to replace the default /events/ page. I imagine there’s probably an easy solution to this.

4) Although the solution did display the weekdays up top, the list view below showed all events for the entire week. My goal was to be able to click on any of the weekdays up top, and see a list view for that particular day below. Even better would be able to select multiple days (as you can with the filterbar checkboxes) and have the selected days display below in list view.

5) The ajax loading gif is permanently displayed.

Thanks again Trisha!

[Trisha]

Hi Chad,

Thanks for the follow up!

To be clear I never intended this as a final solution, I’m sorry for the confusion. It obviously needs a great deal of work to do what you envisioned.  I also should have clarified that I used the shortcode for this directly on the page, my apologies for that omission. I didn’t have an issue with the spinner and the fact that I used a shortcode may be the difference (although that would need to be tested).

I’m going to go ahead and close this out but feel free to reach out with any further questions. Again, I appreciate your letting me know what your final decision was! 🙂

Cheers,
Trisha

[Author]

Posts