Pencil In

An events calendar for Framer that keeps its own time. Type each date and time the way people write them, Sat 14 March 2026, 14 - 16 March 2026, 7:30pm or 19:30 - 22:00, set your venue's time zone once, and it orders the programme and writes every date into the page as a real date.

After the page loads, from each visitor's own clock, past events leave the list (or stay, marked, after what is to come), the next is marked, one running now says so, and a weekly event moves on to its next date, at the same wall clock time when the clocks change. A visitor in another zone also sees their own time.

A month calendar sits beside the list, or above it below a width you choose (the component's own width, not the screen's). Pressing a day with events lists that day.

Each event can be added to a visitor's calendar as an .ics file, at the right moment in any time zone, and the programme is written into the page as schema.org Event data, the format search engines read for events.

An ordered list with real headings and dates, every event in the page's HTML. A date or time it cannot read, or a weekday that does not match its date, is flagged on the canvas, never guessed.

Each event takes a title, date, time, weekly repeat, place, text, tag, highlight and link. Fonts, a 12 or 24 hour clock, the week's first day and every colour are controls.

After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.

Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev