I need help with nesting events into days based on a collection date picker. I was going to use Finsweet Attributes to nest CMS items within CMS items as I’ve done this before but because the date picker within Webflow collections isn’t a collection Finsweets nesting solution doesn’t work for my needs.
For some context, I’m working on a client website which has an event schedule for a festival that happens every year across 4 days. There are roughly 30-40 activities/sessions that happen across each day. Because the event takes place on a different set of 4 days each year, the most flexible method for scheduling these events on the website is using a start and end date picker within the collection list so they have flexibility. For the website user I would like to group the various scheduled activities into days using the start date so there are 4 chucks of activities with a clear day of the week heading for each. Is there an easy way of dynamically adding in a heading for each day and nesting the relevant events within those headings?
I hope that all makes sense. Unfortunately, I’m unable to share a link to the project as it contains some sensitive information currently but I’ve attached a wireframe of what I’m trying to explain.
I think you’re saying that your events are date-ranged, but that you want to be able to list the events relevant to a specific date?
So if an event runs Mon Dec 1 to Wed Dec 3 then your Mon, Tues, and Wed groups would all contain that event?
If my parsing is accurate then what you need is a kind of event duplicator. You’d display your 4-day event schedule, and then have some custom code that matches your collection list-stored events to those pages and clones elements into them.
It’s not especially difficult but it’s all custom code.
Basically, I’d approach it by putting the date as a custom attribute on the container, and then do the same for your start and end dates on the events. The rest is JS coding work to match, duplicate, and place your elements in the DOM.
You may run into issues with Webflow’s date formats and parsing them in JS, in which case i get a bit more creative with embed and a modified embed tag in order to get a standardized ISO8601 date.
I build these types of solutions, so if you’re needing help with the actual programming, you can click my name to DM me and I can send you my rates.
