How to filter Framer CMS items depending on today's date?

— Framer doesn't support natively a way to filter your CMS entries with a dynamic date. Let's solve this with a simple manipulation.

Feb 28, 2025

Looking for a Framer solution to show upcoming events only, instead of showing all your events at once (including past ones)?

There are multiple ways to tackle this issue — the most advanced way would be to retrieve the CMS Collection ReactJS props, dig inside for the correct CMS Date field (which name can vary), and alter the output to filter out irrelevant entries.

But there’s a much easier way thanks to Framer components and a small piece of code.

Here is a screenshot of a simple CMS Collection. We’re currently 28th Feb 2025, and it’s showing all entries whether it’s BEFORE or AFTER today.

My goal is to filter all blog entries which have a date in the past.

This is purely an example, but the logic here is to apply that to an EVENTS page and show ONLY the future events instead.

Let’s proceed.

1. Turn your CMS collection into a component

First, wrap your CMS Collection inside a parent frame:

Select your CMS collection in the Layers tree
Press CTRL/CMD + Enter (or Right Click > Add Frame)
Optional: rename it My CMS Collection for clarity

Then turn this parent frame into a component:

Select the My CMS Collection frame in the Layers tree
Press CTRL/CMD + ALT + K (or Right Click > Create Component

2. Add a date variable to this component

Edit this new component (double click)
Press Variables at the top
Add a new Date variable named Today (this time, the naming is important)

Important: leave the default value 01/01/1970 and head back to the component itself.

3. Add a conditional visibility

Back in our new component now, we’re going to add a visibility condition and link it to our new Today variable.

in the Layers tree, click on the CMS item (make sure you’re not clicking on the CMS Collection itself)
in the right panel, add a Visibility condition by selecting your CMS Date field and the Is After condition

Now a new modal should appear, where you can input the date it will be compared with
Instead of inputting that manually, click +Value on the left
Now select the Today variable we created previously

Make sure you save all of that, and head back to your main page.

4. Create a small code override

At this stage, the Today variable is not yet dynamic. Let’s fix that by creating this small Code Override in the Assets Panel:

Copy/paste the code below, save and exit.

import type { ComponentType } from "react"

export function withTodaysDate(Component): ComponentType {
    return (props) => {
        const today = new Date().toISOString().split("T")[0] // YYYY-MM-DD format

        return <Component {...props} today={today} />
    }
}

This will help us pass today’s date dynamically to our CMS component.

5. Apply the Code Override

Back to our page containing the CMS Collection (which is now nested inside a component), let’s apply the code override to pass dynamically the value of Today to the CMS collection:

Select the component in the Layers tree

In the right panel, apply our new Code Override

This has the effect of changing the default Today value (01/01/1970) to the actual date of today — calculated dynamically by the browser of your visitors (and therefore relevant to their timezone)

6. Try it!

The filtering won’t appear in Framer’s canvas. Instead, you’ll need to preview your page or simply publish it online.

7. Support us

If this article helped you solve your issue, consider one of the following method to support us: