How I Created a Custom Webflow CMS Feature with AI in Under 3 Hours

Today I am going to show you how I build a dynamic CMS calendar using the Webflow CMS and ChatGPT. It’s a completely custom CMS solution that I couldn’t solve natively or through any third-party tools.

But with a few prompts, I managed to get it up and running in less than three hours.

Here’s what we’re going to cover:

1. How I created a dynamic CMS calendar that automatically shuffles CMS items (from one collection) into the correct day of the calendar.
2. How I automatically update the calendar daily so it always displays today’s weekday first.
3. How I optimize this daily calendar for both web and mobile devices.
4. Some quick tips for prompting the AI to get the best results fast.

If you are a Webflow Developer, you do not want to miss this—it will make your life 10x easier and help you make more money.

What I Was Trying to Build With Webflow CMS (And Why I Couldn’t Do It Natively)

I wanted a weekly schedule on my new directory site The Running Directory that would automatically group and reorder run club events based on the current day.

But Webflow couldn’t handle it. It only lets you filter CMS items within separate Collection Lists, and I needed everything in one place.

Here are the Webflow limitations that blocked me:

• You can’t dynamically group CMS items inside a single list (must use multiple lists).
• Managing multiple lists for each day is too complicated.
• Extra Collection Lists can slow down your site and hurt SEO.

I wanted something simpler—a single CMS Collection that always updates itself. Since I couldn’t do that with just Webflow, I looked for other solutions.

When Webflow CMS Fails, Finsweet Is the First Place to Turn

Finsweet Attributes usually solves many advanced CMS needs in Webflow. They offer scripts that you can add to your site to handle special tasks you can’t do natively.

Three common use cases for Finsweet Attributes:

• Advanced Filtering and Sorting: Show or hide certain CMS items based on user choice.
• CMS Slider: Turn a CMS Collection into a slider with next/prev controls.
• Load More or Infinite Scroll: Display a few items at first, then load more on click or scroll.

In my situation, I wanted to group events by weekday and then reorder them so today’s day was first. That was too narrow for any existing Finsweet script. So I decided to see if ChatGPT could help me build my own solution.

Step 1: Create a Static Calendar and Dynamically Place CMS Items Into Each Day-Wrapper

My idea came from Finsweet’s CMS Slider approach. Normally, you have a static slider in Webflow, then place a CMS Collection below it. The script automatically puts each CMS item into the slider.

I did something similar with a calendar:

1. Static Calendar: I built a calendar with seven nested divs for the weekdays. Each weekday div had a header for the day name and numeric date.
2. CMS Collection Below: I created a Webflow CMS Collection for my events. Each event had a “weekday” field.
3. Script from ChatGPT: I asked ChatGPT to sort items by their weekday field and place them into the correct weekday div. It told me how to add custom attributes and gave me the JavaScript code to paste into the </body>.

When I published my site, it worked flawlessly. Events appeared under the right day, with no extra collections needed.

Step 2: Reordering the Days So “Today” Is Always First

After I got the basic grouping by day, I wanted the page to reorder the weekdays so that whenever someone visits, the current day shows up first. I also wanted day labels and numeric dates to update themselves.

Here’s what I asked ChatGPT to do:

• Detect the current weekday when the page loads.
• Move that weekday div to the front so today is always first.
• Update the weekday labels and numeric dates to match the current date.

The script arrived, and it worked right away. Now the day you visit is at the front of the schedule, and the remaining days follow in order. I didn’t have to edit or reorder anything by hand each day.

Step 3: Optimizing the Layout for Desktop and Mobile

My initial calendar worked but took up a lot of space. I wanted something more user-friendly.

1. Desktop Slider: I asked ChatGPT to make a 3-day slider for large screens. It gave me code for a simple slider with next/prev buttons. Now users on desktop can see three days at a time and click or tap to move to the next days.
2. Mobile View: Sliders can be clunky on phones, so I requested a stacked layout for smaller screens. The code showed two days by default, then added a button to expand the rest of the week.

This made the calendar easier to navigate on all devices.

Step 4: Limiting the Number of Events Per Day (With a “View More” Button)

The last big issue was days with too many events. Some days had nine or more, which stretched the layout. I needed a limit on how many events show by default.

ChatGPT’s solution was:

• Display the first three events per day.
• Add a “View More” button if there are extra events.
• Reveal the remaining events when the button is clicked.

That meant the calendar stayed neat, and visitors could still see everything if they wanted to.

Debugging and Iteration: How AI Helped Fix Issues

Not everything worked on the first try. I had to iron out a few problems:

1. Use GPT o1: It explains its thought process more clearly and makes fewer mistakes than GPT 4o.
2. Paste Your Source Code: Show ChatGPT your Webflow page structure, class names, and IDs. It will write code that matches perfectly.
3. Explain the Unexpected: If something looked off, I pasted my code back into ChatGPT and described what happened. It broke down the script step by step and showed me where to fix it.

After that, I ended up with a fully functioning, dynamic, mobile-friendly schedule that updates itself. And I did it all without manually touching the calendar each day.

‍

And just like that I managed to build a custom Webflow CMS feature in a bit under three hours using ChatGPT. I had to stop myself from going on because now I have a ton of ideas for new features and layouts.

Here is what we covered:

• Grouping and reordering CMS items can happen in one collection if you leverage AI and a bit of custom code.
• Automated updates save you from daily tweaks, so you can focus on bigger things.
• Responsive layouts keep your site looking great on desktop and mobile alike.
• AI (ChatGPT) + Webflow is where the magic really happens. Don’t limit yourself to native tools or plugins—experiment with AI for creative, time-saving solutions.

The main point is that using AI with Webflow unlocks features you didn’t know were possible, all without needing a dedicated developer. If this post got you inspired, keep experimenting—you might be surprised at what you can build next.

‍