How can I display the "Happening tonight" section on my Webflow home page based on the current day of the week without assigning actual dates to the events?

Published on
September 22, 2023

To display the "Happening tonight" section on your Webflow home page based on the current day of the week without assigning actual dates to the events, you can follow these steps:

  1. Create a Collection: Start by creating a Collection in Webflow to hold the events. Navigate to the Collections tab in the Webflow Designer and click on the "+ New Collection" button. Give your Collection a name, such as "Events," and add any additional fields you need for each event, such as a title, description, and image.

  2. Add a Date Field: In the Collection settings, add a new Date field to the Collection. Name it something like "Event Date" or "Day of Week." This field will hold the day of the week for each event.

  3. Populate the Collection: Create new items in the Collection for each event you want to display. In the "Event Date" field, select the appropriate day of the week for each event. It could be a dropdown or text field, depending on your preference.

  4. Display the Events: Navigate to your home page in Webflow and design the "Happening tonight" section. Use a Collection List element to display the events dynamically.

  5. Filtering by Current Day: In the Collection List element settings, enable filtering based on the "Event Date" field. Set the filter to display only the events where the "Event Date" matches the current day of the week.

  6. Display the Current Day: Optionally, you can add some custom code to display the current day of the week above the "Happening tonight" section. This can be achieved using JavaScript by targeting an HTML element and updating its contents with the current day dynamically.

By following these steps, your "Happening tonight" section will display events based on the current day of the week without assigning actual dates to the events. This allows you to easily update and manage your events without worrying about specific dates.

Additional Questions:

  • How can I create a dynamic event calendar in Webflow?
  • Can I use the same Collection for different sections of my site?
  • Is there a way to automatically sort the events in chronological order on my Webflow site?