CMS Events Kit · Documentation · Version 1.0
Your events from the CMS, past ones gone on their own.
How to connect your CMS events, how times and time zones work, the four layouts, Add to calendar, search data, every setting, and four looks to start from.
01
Start here.
Add it to your project. Open the link in your purchase email (or the Marketplace page) and drop CMS Events Kit on the page. In the canvas it shows demo events dated from today, so you can design right away.
Connect your events. Put a Collection List of your events collection on the same page, with an Event Item inside its item, and connect the fields. The next section shows how.
Set the time zone. Write where the events happen, like Europe/Madrid, in Time zone. Times are shown in that zone and events end in it, wherever the visitor is.
Pick a layout and make it yours. List, Cards, Compact or Calendar, then your fonts and colours. Publish, and past events leave the page on their own.
02
How it works.
Framer’s CMS filters can compare a date with a fixed date, but not with today. So a list of events either keeps showing the ones that are over, or you have to unpublish them by hand.
CMS Events Kit reads your events from Event Items in a Collection List, works out which ones haven’t ended yet in the venue’s time zone, sorts them by date and shows them in its own layout. The page keeps checking while it’s open, so an event that ends while someone is reading leaves the list.
CMS. Your events live in a Framer CMS collection. One Event Item per Collection List item hands each event to the kit. The list itself takes no space on the published site.
Manual. No CMS? Type the events in the panel instead and switch Source to Manual.
No API keys, no backend, no tracking. The component makes no network requests. Images load from Framer like any image on your site.
Live component with typed events. On your site it reads them from the Framer CMS through Event Items.
03
Connect your CMS events, step by step.
Create an Events collection. The only required fields are a title (text) and a date (date). Useful extras: Start and End (text, like 19:30), End date (date, for events over several days), Place, Address, Category, Price and Summary (text), Image (image), Tickets (link). Event pages work too: the title links to them.
Add a Collection List anywhere on the same page, connected to Events.
Put an Event Item inside its item and connect each field: Title, Date, Start time, End time, End date, Place, Address, Category, Price, Summary, Image, Link and Tickets. Link can point to the event’s own CMS page.
Use the same Kit name on the kit and on the Event Item. “events” is the default on both. With two kits on one page, like concerts and workshops, give each its own name and their Event Items the matching one.
Set the kit’s Source to CMS and its Time zone.
On the published site, Event Items show nothing and take no space. Set the Collection List’s gap and padding to 0 so the list itself takes no space either. In the canvas, each Event Item shows a small dashed label, like “Event Item · Wine evening · 2026-10-31 19:00”, so you can check it reads the right date.
The Collection List decides which events reach the kit. Its own filters (a category, a venue) and limit apply first. Then the kit hides what’s over, sorts by date and applies Max events. Leave the list’s limit high enough to include future events.
04
Dates, times and when an event ends.
Dates. Connect Date to a CMS date field. A date on its own is an all-day event. If your date field also holds a time and Start time is empty, the kit uses that time, read in the kit’s time zone.
Times. Start time and End time accept 19:30, 7:30 pm, 19.30 or 19h30. They’re shown the way the page’s language writes times: 19:30 in Spanish, 7:30 PM in English.
Time zone. Write the zone where the events happen, like Europe/Madrid, America/New_York or Asia/Tokyo. A visitor in New York sees a Madrid dinner at its Madrid time, and it leaves the list when it ends in Madrid. Empty uses each visitor’s own zone, which is only right for online events.
When an event ends. At its end time, or at the end of its last day when there’s no end time. A 19:00 concert with no end time stays listed until midnight. An end time earlier than the start, like 21:30 to 00:30, runs past midnight. An event with an End date runs over several days and marks each of them in the calendar.
Labels. Events today and tomorrow say Today and Tomorrow. An event that has started and not ended says Happening now.
05
Layouts
One row per event, with a date block, title, time and place, summary and buttons. Month titles group them. On narrow widths the buttons move under the text.
A grid of cards with the image, a date chip, title, time and place, summary and buttons. Card width sets the smallest card; columns follow the space. Feature first gives the next event two columns, with its photo beside the text, on wide layouts.
Date and title on one line each, without images or buttons. For a footer, a sidebar or the bottom of a menu.
A month view. With Day photos on, days with events show the event’s image. Beside it decides what goes with the calendar: Cards: the month’s events as cards, next to the calendar on wide layouts and below it on narrow ones. A tap on a day narrows them to that day; All dates goes back to the whole month. · Day list: one day’s events below the calendar, as rows.
The arrows move between the months that have events, and Week starts sets Monday or Sunday.
Date. Block shows a big day number with weekday and month. Text writes the date in the time line instead.
Show more. Per page shows that many events, then a Show more button adds the same number again. 0 shows them all, up to Max events.
Show. Upcoming is the default. Past lists events that are over, newest first, for an archive page. All shows both, with past events dimmed.
06
Prices
Write the price the way you want it shown, like €65, 65 €, $40 or Free. It appears after the time and place. When it has a currency (€, $, £, ¥ or a code like EUR), it also goes into the search data, so Google can show it. Turn Price off in the panel to hide it.
07
Add to calendar.
Each upcoming event has an Add to calendar button with two options:
Opens Google Calendar with the event filled in: title, time in the venue’s time zone, place and address, summary and a link back to the event.
Downloads a calendar file built in the visitor’s browser. It opens in Apple Calendar, Outlook and most other calendar apps.
Timed events without an end time get one hour in calendars. With a Tickets link, a Tickets button shows next to it. Turn either button off in the panel.
08
Search data.
With Search data on, the kit adds schema.org Event data for the upcoming events it shows: name, start and end with the time zone offset, place and address, image, summary, the event’s page and the tickets link. Search engines that run the page’s code, like Google, can read it and show your events in their results.
Fill Place and Address for the best results. Search data is never added in the canvas.
09
Customize the look.
Card
Card, Text, Muted and Lines set the card, its text, secondary text and borders.
Accent colours the date block, the Happening now label and the calendar. Accent text is the text on it.
Button and Button text colour the main button.
Shape
Border, Shadow, Radius, Gap and Padding.
Type
Title font, Text font, Date font and Button font. Title tag sets the HTML tag of each title, H3 by default, for a page that already has its own headings.
Recipes
Layout List · Date Block · Accent your brand colour · Month titles on · Border off · Shadow on
Layout Cards · Card width 300 · Image ratio 3:2 · Summary lines 2 · Tickets on
Layout Compact · Max events 5 · Month titles off · Text colours of your footer
Layout Calendar · Beside it Day list · Week starts Monday · Accent your brand colour · Summary off
Layout Calendar · Beside it Cards · Day photos on · Card width 260 · Image ratio 3:2
10
Settings reference.
Data
CMS or Manual.
CMS only. The same as the Event Items that feed it.
Manual only. Title, Date (like 2027-03-14), Start time, End date, End time, Place, Address, Category, Summary, Image, Link, Tickets.
Where the events happen, like Europe/Madrid.
Upcoming, Past or All.
Up to 100.
Events before a Show more button. 0 shows them all.
Layout
Layout — List, Cards, Compact or Calendar.
Month titles — List and Compact.
Beside it — Calendar only: Cards or Day list.
Day photos — Calendar only: event images on their days.
Week starts — Calendar only.
Card width, Image ratio, Image, Feature first — Cards only.
Date — Block or Text. List and Cards.
Title tag — H2, H3, H4 or P.
Summary, Summary lines, Place, Price, Category.
Add to calendar, Tickets button.
Search data — schema.org Event data for upcoming events.
When empty — show a message, or hide the component.
Style
Card, Text, Muted, Lines, Accent, Accent text, Button, Button text.
Border, Shadow, Radius, Gap, Padding.
Title font, Text font, Date font, Button font.
Text
Empty text, Today text, Tomorrow text, Now text, All day text, Tickets text, Calendar text, Google option, File option, More text.
List name — read by screen readers.
Previous month, Next month — Calendar only.
All dates text, Empty month — Calendar with Cards.
Pick a day — Calendar with Day list.
Event Item
The same as the kit it feeds.
Required. Events without them are skipped.
Optional.
Optional.
The event’s page. Tickets — shows a Tickets button.
11
Languages
Every label is a property, so Framer Localization translates it like any other text.
Weekdays, months and times follow the page’s language: “sáb 14 nov” and 19:30 in Spanish, “Sat 14 Nov” and 7:30 PM in English.
Event titles and texts show as you wrote them. Translate them with Framer Localization on your CMS fields.
12
Privacy
The component sends nothing anywhere. It makes no network requests, stores nothing in the visitor’s browser and sets no cookies. The .ics file is built in the visitor’s browser. The Google Calendar option is a plain link: Google only receives the event’s own title, time, place and summary when the visitor opens it.
13
Accessibility
Events are a list, with a heading for each title and the date and time in a time element.
Buttons have names that include the event, like “Add to calendar: Natural wine evening”.
The calendar menu opens with the keyboard and closes with Escape. Calendar days with events are buttons that say the full date and the events on it.
Focus is always visible, in the accent colour.
14
Troubleshooting
The canvas shows demo events because no Event Item reached the kit. Check that the Collection List is on the same page, that each item holds an Event Item, and that both Kit names match.
Every event is over, or none reached the kit. Check the Kit names, the list’s filters and limit, and that Date is connected.
It has no title or no date, or it ended. Two items with the exact same title, date, times, place and links show once.
Time zone is empty or wrong, so the visitor’s own zone is used. Write the venue’s zone, like Europe/Madrid.
It runs past midnight without an end time. Add an End time, like 00:30.
Set the list’s gap and padding to 0.
There are no events in the months before or after.
None of that day’s events has an image, or Day photos is off.
It only works on the published site and in Preview.
15
Updates
New versions are free and listed here. To update, insert the component again from the Marketplace page or from the link in your Polar order, which always points to the latest version, and copy your settings across.
1.0 · October 2026 — First release, with prices and a featured first card: List, Cards, Compact and Calendar, CMS and Manual sources through Event Item, venue time zone, past events hidden on their own, Add to calendar with Google Calendar and .ics, schema.org Event data, Show more and full documentation.
16
Support and licence.
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
One licence covers one designer and unlimited client projects. Reselling or redistributing the component isn’t allowed.