LogoLogo
Siteglide.comAdminRoadmap
  • 👋Welcome
  • Get Started
    • 🚀Quickstart Guides
    • ❔Support & FAQs
      • â„šī¸Siteglide Support Policy
      • â„šī¸Siteglide Technology Stack
      • â„šī¸External Resources
      • â„šī¸Front-end Browser Support
  • Portal
    • Account
    • Sites
      • 🚀Quickstart: Create a Site
      • â„šī¸Site Details
      • â„šī¸Site Users
      • 📋Install & Manage Modules
      • đŸ’ŗGo Live
      • đŸ’ŗSubscription
      • 🌍Domains
        • 📋Add a Fully Delegated Domain
        • 📋Add an External Domain
        • đŸ’ģSubdomain on a separate instance
        • 📋How to setup a multi domain start page
      • â˜ī¸Site Backups and Disaster Recovery
    • Users
      • 📋User Roles
      • 📋Invite & Manage Users
    • Billing
      • đŸ’ŗBilling Setup
      • đŸ’ŗSubscriptions and Changes
      • đŸ’ŗAutomatic Site Upgrades
      • đŸ’ŗInvoices
    • Tickets
    • Marketplace
    • Agencies
      • 👩‍đŸ’ģAgency Account
      • 👩‍đŸ’ģClients
      • 👩‍đŸ’ģSite Copies
      • 👩‍đŸ’ģAgency Whitelabelling
  • Developer Tools
    • CLI
      • 🚀Quickstart: CLI
      • â„šī¸About
      • 📋Site Setup
      • ❔Troubleshooting
      • đŸ’ģReference
      • đŸ›ŗī¸CLI Changelog
      • đŸ§™â€â™‚ī¸Go Further: CLI
        • Creating WebApps via CLI
    • Liquid
      • â„šī¸About
      • đŸ’ģReference
      • Accessing Data in Liquid Variables - Tutorial 1 - Using Dot Notation
      • Accessing Data in Liquid Variables - Tutorial 2 - Iterating over Arrays and Objects
      • Using Collections with WebApps and Modules
      • Accessing Data from the Global Context Variable
      • Truthiness - Using Liquid to determine if a field is empty or blank
      • 📋Alternatives to Storing and Executing Liquid from Database Items
    • GraphQL
      • â„šī¸About GraphQL
      • 📋Tutorials
        • Tutorial 1 - Your First Query
        • Tutorial 2 - Pagination
        • Tutorial 3 - Filtering the Results
        • Tutorial 3 - (Answers)
        • Tutorial 4 - Advanced Filtering
        • Tutorial 4 - (Answers)
        • Tutorial 5 - Using Liquid to run GraphQL queries on your Site
        • Tutorial 6 - Variables
        • Tutorial 6 - (Answers)
        • Tutorial 7 - Sorting
        • Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
        • Tutorial 9 - Using Mutations to Create New Records
        • Tutorial 10 - Using Mutations to Edit a Record
        • Tutorial 11 - Using Mutations to Delete an Item
        • Tutorial 12 - Related Records and Datasources
    • Configuration
      • â„šī¸Field Types
      • â„šī¸Custom Field IDs
    • Zapier Integration
      • â„šī¸Formatting arrays correctly
    • Developer Marketplace
      • â„šī¸About Building Modules
      • â„šī¸Module Setup
      • â„šī¸Site Template Modules - and How to Make Your Own
      • â„šī¸Create Folder Structure
      • â„šī¸Updating Modules
      • â„šī¸Submit Module for Approval
      • â„šī¸Adding Payment to a Module
      • â„šī¸Theme Module Example
      • â„šī¸Data & UI Module Example
      • đŸ’ģReference
      • đŸŒŗFile Structure
    • Release Notes
      • đŸ›ŗī¸Siteglide Admin/API - Changelog
      • đŸ›ŗī¸Module - System Files - Changelog
      • đŸ›ŗī¸Module - eCommerce - Changelog
      • đŸ›ŗī¸Module - Menu - Changelog
      • đŸ›ŗī¸Module - Slider - Changelog
      • đŸ›ŗī¸Module - Secure Zones - Changelog
      • đŸ›ŗī¸Module - FAQ - Changelog
      • đŸ›ŗī¸Module - Events - Changelog
      • đŸ›ŗī¸Module - Blog - Changelog
  • SiteBuilder
    • Build Sites Faster
      • 🚀Quickstart: SiteBuilder
      • About
      • Site Setup
        • đŸ—ī¸Marketplace Themes & Templates
        • đŸ—ī¸Create Site From Template
        • đŸ—ī¸Install SiteBuilder Module
        • đŸ—ī¸Create a Page Template
        • đŸ—ī¸Set Up Tailwind CSS with the recommended CLI method
      • Styling
        • đŸ—ī¸Editing Tailwind CSS using the recommended CLI method
        • đŸ—ī¸Tailwind CSS Themes - Choosing a Build Method
        • đŸ—ī¸Tailwind CSS - Preview Mode
        • đŸ—ī¸Tailwind's JIT Compiler Via CDN (deprecated)
        • đŸ—ī¸Theme Presets
        • đŸ—ī¸Example Tailwind Project Setup
      • Layouts
        • đŸ—ī¸Insert Static Layouts
        • đŸ—ī¸Installing Dynamic Layouts
        • đŸ—ī¸Editing Dynamic Layouts
        • About Layouts
          • đŸ—ī¸Dynamic Layouts
          • đŸ—ī¸Static and Dynamic Form Layouts
          • đŸ—ī¸Sliders
      • đŸ’ģReference
    • Advanced Features
      • 🧞SiteBuilder Live Updates API
        • 👀Live Updates Reference
        • 🔹Live Updates Markup Example
        • 📋Steps to Setting Up Live Updates API in a Module/WebApp Layout
        • 🔹Live Updates Example - Enforcing Filters
        • 📋Steps to Use Live Updates Methods
        • 📋Steps to Initialise Live Updates with JS
        • đŸ—“ī¸Live Updates Changelog
      • â„šī¸SiteBuilder JavaScript
        • â„šī¸Forms JS
        • â„šī¸Social Sharing JS
        • â„šī¸Sliders JS
        • â„šī¸Dark Mode JS
        • â„šī¸Cookie Settings JS
      • â„šī¸SiteBuilder Liquid Includes
        • â„šī¸Pagination
      • â„šī¸SiteBuilder Liquid Functions
        • â„šī¸Detail Page Valid
        • â„šī¸Field Mapping
        • â„šī¸Get Table Config
        • â„šī¸Case From Order ID
      • đŸ—“ī¸SiteBuilder Changelog
    • Extend SiteBuilder
      • â„šī¸Create SiteBuilder Themes
      • â„šī¸Create Marketplace Modules
      • â„šī¸Adding Dynamic Layouts to Themes & Modules
      • â„šī¸Adding Static Layouts to your Theme
      • đŸ’ģReference
  • CMS
    • Dashboard
    • Pages
      • 🚀Quickstart: Pages
      • â„šī¸Studio
      • â„šī¸Code View & Toolbox
      • â„šī¸About Pages
        • â„šī¸Page Settings
        • â„šī¸Custom Fields in Pages
        • â„šī¸Pages with Siteglide CLI
      • â„šī¸About Page Templates
        • â„šī¸Page Templates with Siteglide CLI
        • Preventing Duplicate Content
      • â„šī¸System Pages
      • đŸ’ģReference
      • đŸŒŗFile Structure
    • Content Sections
    • File Manager
      • 🔹About Assets
      • 🔹Linking to Assets Explained
      • 🔧Assets Troubleshooting
      • 🔹Siteglide Scripts Explained
      • đŸ’ģAssets with CLI
      • đŸ”ŧMigrating Assets
      • 📋Steps to Optimise Images on the Fly with Cloudinary
      • 🔹siteglide_head_scripts and siteglide_footer_scripts Explained
      • đŸŒŗAssets File Structure
      • 👀Tags for Assets
    • Forms
      • Quickstart: Forms
      • â„šī¸About Forms
      • 📋Guides: Forms
        • 📋Steps to Using Separate Fields for First Name and Surname in a Form
        • 📋Steps to Programmatically Redirecting after a Form Submission
        • 📋Steps to Adding Form Confirmation Pages
        • 📋Steps to Adding a Progress Bar
        • 📋Steps to Changing Form Styling on Submission Using CSS
        • 📋Steps to Using Custom Field Set fields in a Form's Custom Layout
      • đŸ§™â€â™‚ī¸Go Further: Forms
        • â„šī¸Migrating Forms
        • â„šī¸Explained - Preventing Spam Form Submissions and Captchas
        • â„šī¸Explained - Show Clearly When a User is Already Logged in When Submitting a Form
        • â„šī¸Forms Error Callback and Validation
        • â„šī¸Forms Success Callback
        • â„šī¸File Upload Previews
      • đŸŒŗForms File Structure
      • đŸ’ģReference
      • ❔Troubleshooting
    • Automations
      • 🚀Quickstart: Automations
      • â„šī¸About
        • â„šī¸Email Templates
        • â„šī¸Email Automations and Email Templates with Siteglide CLI
      • 📋Guides
        • â„šī¸Integration Automations
        • â„šī¸A Transactional Email Example
        • â„šī¸An API Call Action Example
        • â„šī¸A Custom Liquid Action Example
        • 📋Steps to Testing Emails on a Staging Site
        • 📋Steps to Authenticating Sendgrid Emails on Live Sites
      • đŸ§™â€â™‚ī¸Go Further
      • đŸ’ģReference
      • đŸŒŗFile Structure
    • Categories
      • 🚀Quickstart: Categories
      • â„šī¸About
        • â„šī¸Outputting Categories on WebApp / Module / eCommerce Layouts
        • â„šī¸Filtering WebApps and Modules by Categories Using Liquid Parameters
      • đŸŒŗFile Structure
      • đŸ’ģReference
    • Company Information
      • â„šī¸About
      • đŸ’ģReference
      • ❔Troubleshooting
    • URL Redirects
  • Modules
    • Core Modules
      • MenuBuilder
        • 🚀Quickstart: Menu Builder
        • â„šī¸About
      • Secure Zones
        • 🚀Quickstart: Secure Zones
        • â„šī¸About
          • 📋Dynamically Assign a Secure Zone during Form Submission
        • đŸ§™â€â™‚ī¸Go Further
          • â„šī¸Secure Zones with Siteglide CLI
          • â„šī¸Using the context.current_user object
      • Media Downloads
        • 🚀Quickstart: Media Downloads
        • â„šī¸Layouts
        • đŸ’ģReference
      • Blog & Authors
        • 🚀Quickstart: Blog & Authors
        • 🔹Blog Archive & Date Filtering
        • 🔹Blog Search
        • 🔹Blog Filter by Category
        • 🔹Blog Filter by Author
        • đŸŒŗFile Structure
        • đŸ’ģReference
      • Events
        • 🚀Quickstart: Events
        • â„šī¸Standard List View
        • â„šī¸Getting Started with Event Filtering & Searching
        • â„šī¸Filter by Category
        • â„šī¸Filter By Host (Author)
        • â„šī¸Filter by Event Dates
        • â„šī¸Datasourcing the Event Host
        • â„šī¸Search
        • â„šī¸Map List View
        • â„šī¸Calendar List View
      • FAQ
        • 🚀Quickstart: FAQ
        • đŸ’ģReference
      • Testimonials
        • 🚀Quickstart: Testimonials
        • đŸ’ģReference
      • Slider
        • 🚀Quickstart: Slider
        • đŸ’ģReference: Slider
    • Community Modules
      • đŸ—ī¸SiteBuilder
      • 🚀CRM Sync
        • â„šī¸About CRM Sync Module
        • 📋Steps to Set Up CRM Sync on an Automation
        • đŸ—“ī¸CRM Sync Changelog
    • Go Further: Modules
      • â„šī¸Front-end Submit Modules
  • WebApps
    • 🚀Quickstart: WebApps
    • WebApp Items
      • 📋Create WebApp Items
      • 📋Importing and Exporting
    • Layouts
      • â„šī¸WebApp List Layout
      • â„šī¸WebApp Detail Layouts
    • Go Further: WebApps
      • 📋Searching by Location
      • 📋Searching - Advanced Filtering
      • 📋Searching - By Keyword
      • 📋Front End Create Forms
      • 📋Front End Update Forms
      • 📋Front End Delete
  • WebApp Troubleshooting
  • eCommerce
    • 🚀Quickstart: eCommerce
    • Get Started
      • 💡About the eCommerce Module
      • Settings
      • 📂Cart, Checkout and Quotes
        • 💡About Cart, Checkout and Quotes
        • 📋Steps to Implement a Guest Checkout Flow
        • 📂Product Views
          • 🔹Product Layouts
          • 🔹Product List Layout
          • 🔹Product Detail Layout
          • 🔹Add to Cart Button
          • 📋Steps to Datasource and Display Related Products
          • 🔹Dynamic Product Layouts based on Categories
          • 📂Attribute Selection
            • 🔹Attribute Layout - Presenting the Choice to the Customer
            • 🔹Attributes - Changing Product Price after Change
          • 📂Discount Selection
            • Discount Codes Layout
            • Minimum Payments
          • 📂Shipping Selection
            • Shipping Options Layout
        • Managing Products
          • Creating and Editing
          • Securing Products
          • Location
          • Custom Fields
          • Edit Module Structure
          • Product Custom Field Sets
          • Inventory
          • Managing Attributes
          • Pricing
          • Product Categories
          • Open Graph Fields
          • SEO Fields
          • Standard Fields
          • Product Import and Export
          • Discounts
        • 📂Cart
          • 🔹Cart Layouts
          • Checking Inventory in Cart
          • Updating Quantity in Cart
          • Updating Displayed Cart Quantity
        • 📋How to Set Up a Shopping Cart and Guest Checkout - Tutorial
        • 📂Checkout Forms
          • 🔹Checkout Form Layouts
          • 🔹Checkout Forms with PayPal
        • 📂Orders
          • Order Confirmation
          • Re-Ordering
          • 🔹Orders Layouts
        • 📋Steps to Add Secure Zones and User Orders View to your Checkout Flow
        • Quotes
        • Selling Digital Products
        • 🔹Volume Pricing
        • 📋Steps - Alternatives to Product Grouping
      • 📂Basic Payment Forms
        • 💡About Basic Payment Forms
        • 📋Steps to Set up a Basic Payment Form (with a Fixed Payment Amount)
        • 📋Authorize.net Basic Payment Forms
        • 📋PayPal Basic Payment Forms
        • 📋Steps to Allow User to Decide Amount they Will Pay
        • 📋Step-by-step Basic Payment Confirmations
        • 👀Basic Payment Forms Reference
        • â„šī¸ecommerce/basic_payment
      • 📂Payment Gateways
        • đŸ’ģBuilding a Custom Payment Gateway
          • 📋Steps to Support Basic Payment Forms with your Custom Payment Gateway
          • 📋Steps to Support Checkout with your Custom Payment Gateway
        • 🔹Paypal Custom Parameters
        • 🔹Styling Stripe Card Elements
        • 💡About Payment Gateways
        • 📋Steps to Switching Payment Gateway
        • 🔹Test Cards
      • 📂Currency and Tax
        • 💡About Tax Codes
        • Currency Changer
        • Tax Code Changer
        • Formatting Currency
      • 📂Subscriptions
        • 💡About Subscriptions
        • Managing Subscriptions
          • Creating Subscription Products
          • Changing Price and Billing Interval
          • Creating a Form for Signing Up and Changing Payment Details
          • Subscription Order Status Explained
          • Terms and Conditions (Good Practice)
        • 📋Subscriptions Payment Gateway Setup
        • Subscriptions List Layout
        • Subscriptions Detail Layout
        • User's Active Subscriptions
        • Subscription Action Required
        • Cancelling Subscriptions
      • đŸŒŗBasic Payment Forms Folder Structure
      • đŸŒŗCart and Checkout Folder Structure
  • CRM
    • 🚀Quickstart: CRM
    • Users
      • User Details
      • User Secure Zones
      • How Users Edit their Email and Password Front End
      • Custom Field Sets & CRM Custom Fields
      • Storing User's Favourite WebApp / Module Items
    • Companies
    • Cases
      • User's Form Submissions (Cases)
  • Site Manager
    • Code Editor
    • Templates (Pages & Email)
    • Headers & Footers
    • Code Snippets (Includes)
      • 🔧Includes Troubleshooting
      • 👀constants_json
      • 👀constants
      • đŸŒŗIncludes File Structure
      • đŸ’ģIncludes with Siteglide CLI
      • 🔧Tags for Includes
    • System Pages
      • Automatic Site Maps
    • System Emails
    • Data Management
    • Admin Menu Editor
    • Integrations
  • Reporting
    • 🚀Quickstart: Reports
  • Miscellaneous
    • System Features
      • Pagination on Liquid Tags
      • Custom Pagination Layouts
      • Timezones in the Siteglide Admin and on the front-end of your Site
      • Module/WebApp Caching
      • Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
      • Translating Dates
      • Site Search
      • About Site Search
      • AI Tools for the Rich Text Editor
      • Cookies on Siteglide Sites
    • Front-End Performance
      • Video Embeds
      • Forms Above the Fold
Powered by GitBook
On this page
  • Prerequisites
  • Introduction
  • Add "use_adv_search" parameter to include for Event List View
  • Past Events and Future Events
  • Filter by Past Events
  • Filter by Future Events
  • Using Liquid Logic to "Toggle" between Past and Future Events
  • Including the Archive Navigation Feature
  • Parameters
  • Events Archive Layouts
  • Browse by Month
  • Browse by Months, organised into Years
  • Search Events between two dates
  • Custom Layouts
  • Feedback for the User - Displaying the currently applied filter

Was this helpful?

Export as PDF
  1. Modules
  2. Core Modules
  3. Events

Filter by Event Dates

This option allows you to provide the User with links to months when Events are happening - or let them Search between any two dates.

Prerequisites

  • You've installed the Events Module

  • You've updated your System Files to at least version 2.4.4.0

Introduction

This article will show:

  • How to add a parameter to the main Events Module "include" Liquid Tag to enable advanced filtering by Event Start and Event End dates.

  • How to include the Archive Navigation Feature

  • An explanation of the three main sub-Layouts available in in the Default Layout: (1) Search Between Two Dates (2) Browse By Months (3) Browse by Months under Year Header.

  • How to give User Feedback about Search Results

Add "use_adv_search" parameter to include for Event List View

The "use_adv_search" parameter is needed to allow filtering from the URL to apply to your Event Items, this can be added to the include for Event List like so:

{%- include 'module'
    id: '12'
    layout: 'default'
    per_page: '20'
    show_pagination: 'true'
    sort_type: 'created_at'
    sort_order: 'desc'
    use_adv_search: 'true' 
-%}

Past Events and Future Events

By default, the List View will show all Events that are enabled, released and not yet expired.

If you just want to filter the List so it either shows Events that have already happened in the Past- or those Events which will happen in the Future, it may not be necessary to include the entire Archive Feature.

Filter by Past Events

{% assign now = "now" | date: "%s" %}


<a href="{{context.headers.PATH_INFO}}?range_field=events&range_type=future&range_gt={{now}}">Future Events</a>

Filter by Future Events

{% assign now = "now" | date: "%s" %}
<a href="{{context.headers.PATH_INFO}}?range_field=events&range_type=past&range_lt={{now}}">Past Events</a>

Using Liquid Logic to "Toggle" between Past and Future Events

{% assign now = "now" | date: "%s" %}
{% if context.params.range_type == "past" %}
  <h2>Past Events</h2>
  <a href="{{context.headers.PATH_INFO}}?range_field=events&range_type=future&range_gt={{now}}">Future Events</a>
{% elsif context.params.range_type == "future" %}
  <h2>Future Events</h2>
  <a href="{{context.headers.PATH_INFO}}?range_field=events&range_type=past&range_lt={{now}}">Past Events</a>
{% else %}
  <h2>All Events</h2>
  <a href="{{context.headers.PATH_INFO}}?range_field=events&range_type=past&range_lt={{now}}">Past Events</a>
{% endif %}



Including the Archive Navigation Feature

Firstly, you will need to provide the following Liquid to include your Archive layout:

{%- include 'modules/siteglide_events/get/get_events_archive'
    archive_layout: "design_system/1/archive"
    archive_layout_type: "sidebar_years_and_date_search" 
-%}

Parameters

  • archive_layout-The layout parameter refers to the main layout folder followed by a path to the folder storing any archive layouts you are using. In the example, an /archive folder is used.

  • archive_layout_type- The type parameter refers to the name of the Archive Layout file.

In the default/archive/ folder we have 3 different optional types of Archive Layout you can choose by entering their names in the type parameter. We will show the liquid tag for including each.

Include: Browse By Months

{%- include 'modules/siteglide_events/get/get_events_archive'
    archive_layout: "design_system/1/archive"
    archive_layout_type: "sidebar" 
-%}

Include: Browse By Months Under Years Header

{%- include 'modules/siteglide_events/get/get_events_archive'
    archive_layout: "design_system/1/archive"
    archive_layout_type: "sidebar_years"
-%}

Include: Search Events Between Two Dates

{%- include 'modules/siteglide_events/get/get_events_archive'
    archive_layout: "design_system/1/archive"
    archive_layout_type: "sidebar_years_and_date_search" 
-%}

Events Archive Layouts

The following examples will take you through the different options:

Browse by Month

<h2>Archive</h2>
<ul>
  {% for month in events_archive_months %}
    <li>
      <a href="{{context.headers.PATH_INFO}}?range_gt={{month.start}}&range_lte={{month.end}}&range_type=month&range_field=events">
        {{month.start | date: "%b-%y" }}
      </a>
    </li>
  {% endfor %}
</ul>

In this example, we use the events_archive_months object and loop over the array. For each iteration, a URL link is outputted which has three range parameters:

  • `range_gte` = An epoch format date for midnight on the beginning of the first day of the selected month

  • range_lt = The date above + 1 month. We don't use lte because the date is the first valid date in the next month- we want every date up until then.

  • range_field =events - This parameter is important as it makes sure that the Event Start and Event End fields are used instead of Release Date for the filtering.

Browse by Months, organised into Years

This Layout does not just organise the Months available under the relevant Year Headers, it also will skip any Years without an Event.

<h2>Archive by Years</h2>
<ul>
  
{% for year in events_archive_years %}
    <li>{{year.start | date: "%Y"}}</li>
    <ul>
      {% assign months_by_year = events_archive_months | group_by: "year"  %}
      {% for month in months_by_year[year.start] %}
        <li>
          <a href="{{context.headers.PATH_INFO}}?range_gte={{month.start}}&range_lt={{month.end}}&range_type=month&range_field=events">
            {{month.start | date: "%b" }}
          </a>
        </li>
      {% endfor %}
    </ul>
  {% endfor %}


</ul>

</div>

This example uses the same links as the previous one. However, it also organises the links into the years in which they belong by first looping over the years in the events_archive_years and then using the group_by liquid filter and another loop to output the month links grouped under the current iteration's year. Learn more about this Liquid at the pOS docs:

Search Events between two dates

In the Default Layout, this Option also includes the Previous "Browse by Months Organised into Years" Option for convenience- though the code can be simply removed if you prefer. We have removed it in this article's example.

It also adds a Form for directly manipulating the URL parameters to find the exact dates the User is interested in.

<div class="row no-gutters">
  <div class="col-12">
    <h2>Archive by Years</h2>
    <ul>
      
{% assign events_archive_years = events_archive_years | sort: "start" %}
      {% for year in events_archive_years %}
        <li>{{year.start | date: "%Y"}}</li>
        <ul>
          {% assign months_by_year = events_archive_months | sort: "start" | group_by: "year"  %}
          {% for month in months_by_year[year.start] %}
            <li>
              <a href="{{context.headers.PATH_INFO}}?range_gte={{month.start}}&range_lt={{month.end}}&range_type=month&range_field=events">
                {{month.start | date: "%b" }}
              </a>
            </li>
          {% endfor %}
        </ul>
      {% endfor %}
    </ul>
  </div>
</div>
{% assign now = "now" | date: "%s" %}
<div class="row no-gutters">
  <div class="col-12">
    <h2><a href="{{context.headers.PATH_INFO}}?range_field=events&range_lt={{now}}">All Past Events</a></h2>
  </div>
</div>
<div class="row no-gutters">
  <div class="col-12">
    <h2><a href="{{context.headers.PATH_INFO}}?range_field=events&range_gte={{now}}">All Future Events</a></h2>
  </div>
</div>
<div class="row no-gutters">
  <div class="col-12">
    <h2>Search by Date</h2>
    <form title="Search events by Date" id="events-archive-search">
      <div class="form-group">
        <label for="range_gt">Start Date</label>
        <input data-sg-events="start-date" id="range_gt" name="range_gt" type="date">
      </div>
      <div class="form-group">
        <label for="range_gt">End Date</label>
        <input data-sg-events="end-date" id="range_lte" name="range_lte" type="date">
      </div>
      <input value="Search" class="btn btn-primary" type="submit" data-slug="/module-12" 
      onclick="s_events_date_search(s_events_date_search_error)">
    </form>
  </div>
</div>
{% comment %}
Add your custom error message here- it can be renamed by changing its name in the argument for the s_events_date_search function and in the definition below.
{% endcomment %}


<script>
  function s_events_date_search_error() {
    alert("Please enter valid dates before searching.");
  }
</script>

</div>

In this example a form is used to take user input. The Siteglide function automatically adds the dates to the URL parameters in the correct format. You can rewrite the error function to customise the way the form handles invalid dates entered.

***A note about Date Entry Inputs on different Browsers ***Different Browsers may display the Date Input fields very differently. 3rd party Javascript Plugins are available for making sure these display with your desired Design.

Custom Layouts

This is a relatively complex feature, so some understanding of Liquid will be necessary to understand how to create a Custom Layout. The best way to start would be to copy one of the Default layouts and edit it to provide the changes you need.

Any Layouts included with the above Liquid will get access to the events_archive_years and events_archive_monthsarrays, which contain detailed data about the years and months respectively which contain valid Events. This can be used to generate dynamic buttons to the User so they can browse.

events_archive_years

{% for year in events_archive_years %}
  {{year.start}} <!-- Outputs Epoch time at start of Year -->
  {{year.end}} <!-- Outputs Epoch time at end of Year -->
{% endfor %}



events_archive_months

{% for year in events_archive_years %}
  {{year.start}} <!-- Outputs Epoch time at start of Year -->
  {{year.end}} <!-- Outputs Epoch time at end of Year -->
{% endfor %}



The following URL Parameters will cause Results in the List to Filter:

  • range_gt - greater than

  • range_gte - greater than or equal to

  • range_lt - less than

  • range_lte - less than or equal to

For the above to work, remember to set the use_adv_search: true parameter (see start of article)!

The pOS documentation website has some useful tips on how to use liquid to convert date formats and manipulate dates and times. See the following useful filters, and browse the docs for more:

Feedback for the User - Displaying the currently applied filter

In the examples, you may notice another URL parameter is used: range_type. The s_events_date_search Siteglide function for filtering Events by user-inputted dates adds the parameter range_type="between". This would allow the following liquid on the List Layout to identify that this search is between two dates:


{% if context.params.range_type == "between" %}

  Events between {{context.params.range_gt | date: "%d-%b-%y"}}
  {{context.params.range_gte | date: "%d-%b-%y"}} 
  and 
  {{context.params.range_lt | date: "%d-%b-%y"}}
  {{context.params.range_lte | date: "%d-%b-%y"}}

{% endif %}



Whereas, you could use another range_type to indicate that different feedback should be given to the User. e.g. the parameter month in this example changes the sentence structure from "Events between" to "Events in" to communicate the different kind of filtering that is now taking place.

{% if context.params.range_type == "month" %}

  Events in {{context.params.range_gt | date: "%b-%y"}}
  {{context.params.range_gte | date: "%b-%y"}}

{% endif %}

Note- in both of these examples- the gte and gt dates are both outputted- this is because only one is expected to be available. The Layout is designed to accept either

PreviousFilter By Host (Author)NextDatasourcing the Event Host

Last updated 6 months ago

Was this helpful?

In order to filter the Events List by date, you need to refresh the Page URL with parameters in the format.

â„šī¸
group_by filter
for loop
Unix Epoch time
localize
date
add_to_time