CODE

List Past or Future Events based on Start Date

List all past Events, future Events, or Events by a set date range, including Liquid date calculations.

v1.0.0

  1. Using the searchScope parameter and Liquid date variables we can easily filter Events to display based on their start or end dates.

    Below are some examples and how to configure your Event component tag.

    EXAMPLE #1

    This example will display only past Events (from today’s date):

    <!-- Treehouse CODE v1.0.0 -->
{% assign todayDate = "now" | date: "%Y-%m-%d" %}
{% component source: "Event", layout: "List", searchScope: '{"prop_EventDateStart_Max":"{{todayDate}}"}', sortBy: "EventDateStart", sortOrder: "DESC", type: "module" %}

    EXAMPLE #2

    This example will display only future Events, plus 2 hours (eg; let’s say you don’t want to accept Event bookings 2 hours before an Event is due to start):

    <!-- Treehouse CODE v1.0.0 -->
{% assign todayDate = "now" | date: "%Y-%m-%dT%H:%M" | date_add: 2, "hour"" %}
{% component source: "Event", layout: "List", searchScope: '{"prop_EventDateStart_Min":"{{todayDate}}"}', sortBy: "EventDateStart", sortOrder: "DESC", type: "module" %}

    EXAMPLE #3

    This example will display Events between 2 dates (eg: for the month of January):

    <!-- Treehouse CODE v1.0.0 -->
{% component source: "Event", layout: "List", searchScope: '{"prop_EventDateStart_Min":"2023-01-01", "prop_EventDateStart_Max":"2023-01-31"}', sortBy: "EventDateStart", sortOrder: "DESC", type: "module" %}

    EXAMPLE #4

    Based on the example above, we can automate displaying Events for the current month (note; the day is omitted from the date object):

    <!-- Treehouse CODE v1.0.0 -->
{% assign todayDate = "now" | date: "%Y-%m" %}
{% component source: "Event", layout: "List", searchScope: '{"prop_EventDateStart_Min":"{{todayDate}}", "prop_EventDateStart_Max":"{{todayDate | date_add: 1, "month" | date_add: -1, "day"}}"}', sortBy: "EventDateStart", sortOrder: "DESC", type: "module" %}

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.