Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Calendar blocks

Pro

Event Details Calendar Block for React Aria

One event page with its time restated for Lisbon, New York or Tokyo, a collapsible description, a real .ics download, a copyable link, a guest list with a reply summary and a reply control.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Give an event its own page with this event details calendar for React with React Aria. A hairline frame with a plus mark on each corner splits in two: at the start the facts as a description list (when, where, host), an "In 10 days" Badge, a NativeSelect named "Show time in" that restates the start and end for Lisbon, New York or Tokyo with a line saying whether the day shifts, and a Collapsible description. Two outline Buttons do real work: "Add to calendar" saves a one-event .ics file with UTC times, and "Copy link" puts the address on the clipboard. At the end the guest list gives each person initials, a glyph and a word for their reply, under a summary worked out from the list ("5 going, 2 maybe, 1 declined, 1 waiting"). A SegmentGroup in the foot changes your own row and the summary at once. The bands are ruled by Guides. It's built from NativeSelect, Collapsible, SegmentGroup, Avatar, Badge, Button and Guides, with a CSS entrance only. For event pages, ticketing apps and any product that shows who is coming.

FAQ

How do I use my own event?

Edit the constants at the top: START_UTC and END_UTC are ISO moments in UTC, EVENT_TITLE, EVENT_PLACE and EVENT_LINK are text, ABOUT is the description, and GUESTS holds each guest's name, initials and reply (going, maybe, declined or waiting). The summary and the guest count are worked out from that list.

Why is today always 14 October?

Nothing in the block reads the clock. AS_OF is the one moment it treats as now, and every day count, derived date and ring comes from it, so the block looks the same on any day and in a screenshot. To follow the real date, set AS_OF from your own clock or server and keep the rest as it is.

How are the other time zones worked out?

Each zone in ZONES has a typed offset in minutes from UTC for this date, so the block adds it to the UTC start and end and reads the day and time from the result. There are no daylight saving rules: if the date you use falls near a clock change, check the offsets. The line under the select says whether the day is the same, later or earlier than in Lisbon.

What does Add to calendar save?

A real calendar file made in the browser: one VEVENT with a typed UID and stamp, the start and end in UTC, the title and the place, with CRLF line endings. Nothing is uploaded. The status line says the file was saved.

What if copying is not allowed?

Some browsers refuse clipboard access outside a secure page. The block then says so in its status line, and the link is always shown in full under the buttons so it can be selected by hand.

What stays local, and how do I wire it up?

Your reply only changes your own row and the summary in the page and resets on reload; nothing is sent to the host. To make it real, save the reply from pickReply to your own API and start mine from what it returns.

All 100 calendar blocks