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.
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.
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.
Hi @AdRaKaLi as this code compare string it should work. I have used english words as I do not have swedish keyboard. Do not forget to set in your page settings main page language to Swedish. Just in case.
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?
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!
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.