Calendar List View

Loops & Logic
1

@julia need your input. I’m struggling to figure out the proper structure for this idea and to better illustrate it i’ve created a simple Figma prototype. https://www.figma.com/proto/TJY0MnARFGn5eMq0KJ3zsa/Untitled?page-id=0%3A1&node-id=1-2&viewport=-232%2C198%2C1.41&scaling=min-zoom&starting-point-node-id=1%3A2

The prototype is only configured to paginate between Jan and February

The idea is to have a list view of the current month and the events schedule per day (if they exist). I think being able to loop through and only show 4 or 5 events per day but also counting the total events per day with a view all link would be helpful. Is it possible to paginate each month in order for users to be able to skip to the next month to see future events that have been scheduled? FYI, I’m using Beaver Builder, Beaver Themer, Loops and Logic + ACF Pro

Thanks!
Patrick

2

I think we might be spread a little thin on support so I thought I’d jump in for Julia here, but let me know if you’ve got some more in-depth questions she might be better suited to answer.

From my understanding, you want to display one month per page, right? And then within that month/page, you’d want to show a list of all the days where there are events and if ever there is one day that has more than 4 or 5 events, you’d want to show a link. Have I understood your requirements?

The way I would approach this would be something like the template below. I haven’t actually tested this myself, but I think this should at least demonstrate the basic structure I’m imagining. The basic idea here is that if you want to show one month per page, then the loop that’s actually paginated is going to be the loop of all your months and then you’ll want to add paged=1 to that loop to only show one month per page.

<Loop type=calendar_month paged=1 year=current>
  <h2><Field month /></h2>
  <Loop field=day>
    <If loop exists type=event custom_date_field=event_date_time custom_date_field_format="Y-m-d H:i:s" custom_date_field_value="{Field day}" count=5>
    <h3><Field day /></h3>
    <Loop>
      <If count is_not value=5>
        <Field title /> - <Field event_date_time />
        <Else />
        <a href="{Url current}?date={Field event_date_time}">View All</a>
    </Loop>
  </Loop>
</Loop>

<PaginateButtons />

Some caveats here:

  • You’ll need to customize how you filter your loop based on the current day in the If loop exists... part of the template. This will depend on your data structure so you might need to choose a different approach there from what I suggested above.
  • If you want a “view all” functionality, you could probably achieve this with JS (that’s beyond me) or you could add a link to somewhere where the user can view all the events on that date (that seems easier to me, but I guess it depends on your JS comfort level). If it were me, I might just link to the current page with some URL parameter that passes the clicked date. Then somewhere else in my template, I might make it so that if that URL parameter exists, show a loop of all the events on that date, otherwise show the paginated loop from the template above.
  • The template I suggested assumes you’d always want to start the main outer loop in January. If you want to do something where you’re only showing upcoming events, you might need to modify this so that the pagination on your outer loop still works. This might involve dynamically creating a list variable and then looping through that list instead of looping through calendar months/days.

Let me know if any of that doesn’t make sense or if you’ve got some more advanced questions that Julia might be uniquely equipped to answer.