Is it possible to sort a CMS collection in Webflow where upcoming events are displayed in ascending order followed by past events in descending order?

Published on
September 22, 2023

Yes, it is possible to sort a CMS collection in Webflow where upcoming events are displayed in ascending order followed by past events in descending order.

To achieve this, you can follow these steps:

  1. Start by creating a new CMS collection or editing an existing one in your Webflow project. Make sure you have a date field that determines whether an event is upcoming or in the past.

  2. In the Collections panel, click on the "Add Field" button to add a new field called "Event Date" or something similar. Select the "Date" field type.

  3. Next, populate your CMS collection with events, adding their respective dates to the "Event Date" field.

  4. Now, go to the page on which you want to display the events. Drag and drop a Collection List element onto the page and link it to your CMS collection.

  5. With the Collection List selected, navigate to the right-hand sidebar and click on the "Sort Order" dropdown menu.

  6. In the "Sort Order" dropdown, select "Custom" to define your own sorting order.

  7. To display upcoming events in ascending order, enter the following {{currentDateTime}} in the "descending" field. This will compare the event date with the current date and time, sorting them in ascending order based on their proximity to the current date.

  8. To display past events in descending order, enter {{currentDateTime}} in the "ascending" field. This will place past events at the top of the list and sort them in descending order based on their proximity to the current date.

  9. Save your changes and publish your website to see the events sorted in the desired order.

By following these steps, you can effectively sort your CMS collection in Webflow, displaying upcoming events in ascending order followed by past events in descending order. This allows for a more intuitive and user-friendly event listing on your website.

Additional questions:

  1. How can I sort a CMS collection in Webflow?
  2. What are the options for sorting CMS collections in Webflow?
  3. Can I sort CMS collections based on multiple criteria in Webflow?