Calendar - Event Detail

These blocks cover what happens around a single event. They take typed props with fictional events and people, and everything they change, like deleting an event or sending an RSVP, only updates local state. Replace the handlers with calls to your own API.

The photos come from Unsplash and the avatars are placeholders from Pravatar. Dates are ISO strings handled in UTC and times are plain HH:mm strings.

Style One

Event chips on a week row that open a popover with the time, place, description, attendees and join, duplicate and delete actions.

Style Two

Full event page with a cover image, schedule, location, an about section and a sticky ticket card with a quantity stepper and a share button.

Style Three

RSVP card with going, maybe and can not go options, a guest stepper, a dietary note and counts that update with your answer.

Style Four

Attendee list with search, status tabs with counts, role and status badges and an actions menu for each person.

Style Five

Create event dialog with an all day switch, start and end time checks, guest chips, color swatches and a repeat select. New events appear in the list.