Squarespace Events by Month

Question

I’m attempting to create a custom list of events for my Squarespace website. I would like to show the events separated by the month in which they are happening. For example, I will have a header that says “June” and then list all of the events that are happening in June below it. I would love to do this in the template code rather than by using an archive block so that I can customize the list to show the exact elements that I need. The code below shows my attempt to display the items that I want from events that happen in June however, the other image is my result. My .equal? predicate isn’t working in the way that I intended. If anyone could help me with this, I would greatly appreciate it.

<div class="events_month_loop">
 {.repeated section items}
   {.equal?:{startDate|date %B:"June"}
     <div id="events-{id}">
       <div class="event_info">
         <a href="{fullUrl}">Event Link</a>
       </div>
      </div>
    {.end}
  {.or}
    <p>No events in June</p>
  {.end}
</div>

score 1 · Answer 1 · answered Jan 16 '20 at 13:24

1

A tip that Brandon gave me a long time ago was to use limit="0" on the squarespace:query to just get the upcoming events, otherwise the query will get the past events too! Very handy.

<squarespace:query collection="events" limit="0">

answered Jan 16 '20 at 13:24

summitdigitaluk

21
1

Brandon · Accepted Answer · 2019-10-18T13:17:28.890

You'll want to use the var directive to accomplish this.

<squarespace:query collection="events">
  <div class="events_month_loop">
   {.repeated section items}
     {.var @smonth startDate|date %B}
     {.equal? @smonth "June"}
       <div id="events-{id}">
         <div class="event_info">
           <a href="{fullUrl}">Event Link</a>
         </div>
        </div>
      {.end}
    {.or}
      <p>No events in June</p>
    {.end}
  </div>
</squarespace:query>

One note: I'm assuming this is in a squarespace:query. If this is in a .list file, then some changes would be required.

Also, the above works in the case where you are hard-coding the month, as in your example code.

If you wanted to dynamically compare to the current month, I think the closest you could get would be to compare it to the last date the website content was modified. In many cases, that would be sufficient:

<squarespace:query collection="events">
  <div class="events_month_loop">
   {.var @cmonth website.contentModifiedOn|date %B}
   {.repeated section items}
     {.var @smonth startDate|date %B}
     {.equal? @smonth @cmonth}
       <div id="events-{id}">
         <div class="event_info">
           <a href="{fullUrl}">Event Link</a>
         </div>
        </div>
      {.end}
    {.or}
      <p>No events in {@cmonth}</p>
    {.end}
  </div>
</squarespace:query>

You're correct, I did use this in a squarespace:query. This worked perfectly — Nadia Nutgrass, Jun 07 '19 at 14:42

Squarespace Events by Month

2 Answers2