Display CMS Item Based On Day Of Week

Design help CMS
1

Hi All,

Im creating a page for a bar that has weekly events on repeat.

Sunday Funday
Monday Karaoke
Tuesday Trivia
etc

I want to be able to display do the home page “Happening tonight” based on which day of the week it is but I can’t seem to find a way to do that other than assigning actual dates to the event, and I want to basically just set this and forget this.

Any recommendations or guidance would be greatly appreciated.

Daniel

Here is my public share link: LINK
(how to access public share link)

2

Follow the instructions and add the attributes.
Your filter function would look something like this;

<script>
  function isTodaysWeekday(item) {
    
    var today = new Date();
    var weekday = $(item).find("data").attr("weekday"); 
    
    // Check to see if weekday number = today
    // https://www.w3schools.com/jsref/jsref_getday.asp
    if (today.getDay() == weekday)
      return true;
   
    return false;
  }
</script>

In your CMS collection, you’d have a Weekday column, numeric, and specify the weekday for each item as;
0 = sunday, 1 = monday, etc…

3

Thanks so much for this!

Its definitely getting me in the right direction.

I’m having an issue though.

I followed the directions and its now filtering everything out completely (which is progress)

  • I created the weekday column

  • assigned the days 0-6

  • added the head and body reference URLS

  • added the script

  • Added wfu-filter-func and isTodaysWeekday custom attribute to the collection list item

But its still not working. Can you take a look?

https://preview.webflow.com/preview/gaythering-hotel?utm_medium=preview_link&utm_source=designer&utm_content=gaythering-hotel&preview=10cf753b9c1c84e518910a6786f11d73&workflow=preview

4

Two things,

I’d get rid of that extra space before data at the start, though it shouldn’t cause a problem, some browsers may not handle that well.

The attribute date needs to match the code. so in your case I’ve called that attribute weekday.

image

This is the code in the filterFunc that is retrieving that weekday value for the filter test.

var weekday = $(item).find("data").attr("weekday");

5

It worked!!! Thank you so much!!! :smile:

6

I have a question similar to this one, but in my case the same event happens on 3 different days of the week (say, Mon, Wed, Fri). Is there a way to assign more than one day of the week to the same event?
Thank you!

7

You haven’t given much context to work with, but, let’s assume;

  • You’re also using the CMS
  • You also have a bunch of events
  • The recurring weekdays each event is on can vary, from 1 to 7 days
  • On a given weekday you only want the relevant events to show
  • This should all be manageable by the client

I’d probably do something like;

  • Add 7 checkbox fields, Mon, Tues, Wed… etc.
  • Populate them accordingly
  • Use the new CMS-bound custom attributes feature to make bound attributes like day-mon, day-tues etc.

Your resulting collection item would be something like;

<div class="my-event" day-mon="true" day-tues="false" day-wed="true" ... >

Use the Sygnal Attributes filter lib above, put those custom attributes on the collection item as well, and write the filter function accordingly to filter based on those attributes.

1 Like
8

Thank you so much! I think this does it.