Calendar Demo

A beautiful, fully customisable calendar component built for Framer.

Stop wrestling with shadcn, Radix, or clunky date pickers that don't fit your design. This component is self-contained, zero-dependency, and wired up with Framer's native property controls — so you can tweak every visual detail without touching a single line of code.

What you can control from the Framer panel:

• Background color

• Text color (day numbers, headers, and labels all update together)

• Accent color — selected date, today indicator, footer label

• Border — toggle on/off, choose color, width, and corner radius

• Shadow — toggle on/off, with full control over color, X, Y, blur, and spread

• Default selected date

Built for real projects:

• No external dependencies — works out of the box in any Framer project

• Fully typed TypeScript with clean, readable code

• Smooth hover and selection transitions

• Today indicator with accent dot

• Month navigation with year rollover

• Selected date shown in the footer

Works great for booking flows, event pickers, dashboards, portfolio sites, and any project where you need a date picker that actually looks like it belongs.