Display CMS Item Based On Day Of Week

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)

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…

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

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");

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