Use a calendar search to create an upcoming event listing

This tutorial takes you through the steps to create an upcoming event listing using a Calendar Events Search Page asset.

In this tutorial, you configure the page to look for events under a certain root node and list them in order of the closest starting date. Events with start dates in the past are not listed.

Prerequisites

  • Create calendar events with start dates in the future. These events display in the calendar search listing once you complete the configuration.

To see a working solution for this tutorial (including calendar entries), you can Download tutorial assets used in this tutorial and import them into your Matrix system using the Import Assets from XML tool.

Creating the calendar events search page

  1. Create a Calendar Events Search Page asset named Upcoming Events.

Create the asset somewhere where you can preview the page on the frontend.
  1. Go to the Details screen and click Edit to begin editing.

  2. Scroll down to the Root Nodes section and set the location of the root node under which you want to store calendar events.

If you imported the tutorial assets, select the Events folder asset as the root node.
  1. Optionally choose which statuses to include in the listing under the Asset Statuses to List field.

    The events are not yet published, so select all statuses in the list except for Archived.

    Matrix typically shows live assets only on the frontend. Include the Under construction status to list events that are not published yet.
  2. Click Save to save your configuration settings.

You have now specified where to store calendar event assets. The next step is to configure the search parameters.

Configuring the search settings

Configure the Calendar Events Search Page to act as an upcoming event listing.

  1. Go to the Search Fields screen of the Upcoming Events asset.

  2. Within the Events Date Filter Configuration section, add a new events date filter named listing-type inside the Events Filter Fields fields.

  3. Click Save to load more configuration settings.

  4. The event date filter you created displays in a table. To the right of the listing, a drop-down is available for choosing the Filter type. Select Fuzzy Date from the drop-down.

  5. Click Save to load more configuration settings.

  6. You now have a selection of Fuzzy Date options available. From this list, select only the Upcoming Events option.

  7. Click Save to load more configuration settings.

  8. The Event Horizon setting lets you restrict how many events display in the Event Listing. You may not want to list every single upcoming event if there are events that are not scheduled to happen for a very long time.

    In this tutorial, you configure events to occur in the distant future. Set the Event Horizon value to 999.

  9. Click Save to finalize your changes to the Search settings.

Configuring the stored search settings

Now that you have configured how the search fields display calendar events, you can set the Search page to behave like a listing page. You do this by telling the search page to show the results by default. When users land on this page, the page does an instant search for upcoming events using the listing-type setting.

  1. Go back to the Details screen of the search page.

  2. Scroll down to the Stored Query Location table in the Stored Search section.

  3. Select the following values:

    Parameter

    Date Filter: listing-type

    Source

    Set Value

  4. Click Save.

  5. You now have a text box under the Source column to enter a value. In this tutorial, you want to search for upcoming events, so type upcoming_events into this box.

    See the date filter configuration documentation for a complete list of values for the Fuzzy Dropdown field.
  1. Set Show the Results page to Yes to show the search results straight away.

  2. Click Save.

  3. Preview the Upcoming Events page.

Notice how the calendar events you created (or imported) are listed using the default listing format, similar to this example:

calendar search page upcoming events preview

Summary

You have successfully configured an Upcoming Event Listing on your site and used the search function to show results instantly when the page loads.

© 2015- Squiz Pty Ltd