An interactive calendar date picker with an integrated event card panel. Visitors can navigate through months, click on specific dates to instantly view scheduled events, see multi-event indicators, and launch event links.
Full source code (.tsx), ready to paste
Framer remix link with the demo project
README with step-by-step setup
Free lifetime updates
Support within 24 hours
Events: title, date, time, description, image, accent color, button label, link
Layout: horizontal/vertical stacking, container background, outer container radius, outer padding, gap, calendar width/height, events width/height
Calendar Panel: background color, text & muted colors, selected date color, event dot indicator color, font settings for month label, weekdays, and day numbers
Event Cards: card background, text color, corner radius, padding, item spacing, title font & weight, meta font, description font, empty state text & font
Media & CTA: image height and image corner radius controls, button background/text colors, font, radius, and 4-side padding
Month Navigation: arrow icon size, color, and circular background styling
Remix or paste the code into Framer
Drag the component onto your canvas
Edit your events, dates, and visual styles directly in the properties panel
Code component for Framer, not a standalone download
No external libraries to install
Fallback SVG image placeholders automatically display if no custom image is uploaded
Fully responsive across desktop (horizontal stack) and mobile (vertical stack)
Animation and interactions run seamlessly in Preview and on the published site (the canvas shows a static renderer view)