Hide/show cms items based on current day

Hi!
I’m trying to filter out cms items based on if the current day matches the multi-reference “Dagar”.

Because it’s recurring events based on weekdays rather than specific dates I cannot use the native Webflow filtering system. I also can’t use the embedded code editor because the collection list is on a static page so I cant add a multi-reference field dynamically in the editor.

I have tried to find a solution in webflow but with no success. So if anybody has any suggestions on how to solve this issue it would be much appreciated.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Here is my live site: Live site

1 Like

Hello.
When they are recurring events can’t you put them in the Dagar CMS ?

Dagar cms contain only the weekdays. In the program cms, there is a multi-reference to the Dagar cms depending on when a show is going to air. Some shows are airing multiple days every week.

You removed the Share a read-only link, so hard to tell.

The link is working for me.
Link

Im I correct that you want to ‘loop’ the CMS list items?
So today list item 1, tomorrow number 2 etc.?

Not really. Every show has a multi-reference to “Dagar” which means weekdays. So a show can be scheduled every Friday for example and when it’s Friday I wish to display only the shows that are referenced to Friday.

I’m aware that i’m having a hard time formulating what I mean but I hope that is clear enough.

Why do you need to use a multi-reference field? If you want to set the days why not have fields for the weekdays (e.g. switch field) or use your own data format in a text or option field so that you can embed code to handle the visibility for the day. If you want to use the native Webflow filters you will need to publish updates to the items since the ‘today’ filter works with the date/time field.

The reason I used a multi-reference field is that some shows are scheduled on multiple days. But I’m open to trying other solutions.

The goal is to automate the daily schedule. I only want to display the shows that are scheduled for today whatever today is.

So far I’ve managed to get the current day and turn it into a string with this code below:

var date = new Date();
var day = date.getDay();
var weekday = new Array(7);
	weekday[1] = "Måndag";
	weekday[2] = "Tisdag";
	weekday[3] = "Onsdag";
	weekday[4] = "Torsdag";
	weekday[5] = "Fredag";
	weekday[6] = "Lördag";
	weekday[0] = "Söndag";
var today = weekday[day];

So my idea is to somehow make an If statement using the “today” variable. But unfortunately, this is as far as I’ve managed to come. Now I need to match it with a cms field that is supported in the embedded code editor and also supports multiple options.

hi @AdRaKaLi I was waiting if guys in will come with code you need. If you do not mind I can give you my solution to your request but I believe that there are another ways how to solve it.

You have to have two collection loops one for events and one for days of each day. So my approach is to first hide all events (display: none) elements in WF and then run loop over events days place them to separate array and then display only these that match current day. I took your init code and improve it a bit.

here is code I come up with on the end.

const date = new Date();
const day = date.getDay();
const weekday = new Array(7);
	weekday[1] = "Monday";
	weekday[2] = "Tuesday";
	weekday[3] = "Wednesday";
	weekday[4] = "Thursday";
	weekday[5] = "Friday";
	weekday[6] = "Saturday";
	weekday[0] = "Sunday";
let today = weekday[day].toLowerCase();

const allEvents = Array.from(document.querySelectorAll(".event-item"))

let todayEvents = [];

allEvents.forEach(event => {
    const days = Array.from(event.querySelectorAll("#day-txt"))

    days.forEach(day => {
        const eventDay = day.innerText
        if(today == eventDay){
            todayEvents.push(event)
            }
     })
})

todayEvents.forEach(todayEvent =>{
    todayEvent.style.display = "block"
})

here is RO - EXAMPLE to better understand what I mean.

I have set for tomorrow (SUNDAY) two events that will be displayed.

  1. Eum Beatae
  2. Repellendus Quasi Sint Magnam

Hope that will give you an idea how to solve it or someone come with better solution.

LIVE

1 Like

Wow, thank you so much for taking your time to help me out! I really appreciate that.
It worked perfectly!

But does this work with swedish letters? Because in the events page I want to display the days in swedish.

Hi @AdRaKaLi as this code compare string it should work. I have used english words as I do not have swedish keyboard. :wink: Do not forget to set in your page settings main page language to Swedish. Just in case.

1 Like

This is great. I am hoping to use it for an existing collection (Menu Items). From a change perspective, other than creating the days of the week collection, what would need to be modified to connect to my Menu Items collections. I have the same multi-ref collection created and connected. Also I notice that the text you have in this post (where you create an array of the days of the week) isn’t the same as the script that is in FILTER JS embedded code editor. Have you modified the project since the post?

Thanks!

hi @John_Jackovin reason I have showed this code was only for easy understanding and applying into already written code. Solution in example is just simplified version but both return identical result.

Is is possible to make a cloneable version? I have tried to set this up on my side (with some tweaks) but I have menu items not events and something I’ve done isn’t quite right. Thanks!

| Stan Community Specialist
June 2 |

  • | - |

hi @John_Jackovin reason I have shoved this code was only for easy applying into already written code. Solution in example is just simplified version but both have identical result.

Hi @John_Jackovin I have send PM

Great. I never sent a PM through this platform, but I think I did it right.