fetaUI
GitHub

Calendar Event

An event block for week views: colour tag, title, time and attendees.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/calendar-event
Playground
default
Design review10:00 to 10:45
Design review10:00 to 10:45
Design review10:00 to 10:45
Design review10:00 to 10:45
selected
Design review10:00 to 10:45
Design review10:00 to 10:45
Design review10:00 to 10:45
Design review10:00 to 10:45
now
Design review10:00 to 10:45
Design review10:00 to 10:45
Design review10:00 to 10:45
Design review10:00 to 10:45
Tone
State
Icons animation
Motion

Installation

Terminal· bash
 npx shadcn add @fetaui/calendar-event

Accessibility

  • With onSelect it is a button with a pressed state.
  • Tone is never the only signal: the title carries the meaning.

Motion

  • Hover widens the tag to 3 px and fans the attendees out.
  • With onSelect it lifts 1 px, presses to 0.97 and pops when selected.
  • now breathes the tag. It pauses offscreen and with animated off.
  • Reduced motion keeps the colour changes only.

Responsive behavior

  • 140 wide. Fills its column in a grid.

Performance

  • Its breathing tag runs in CSS only in the now state, and stops offscreen or with reduced motion.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import CalendarEvent from @/components/fetaui/calendar-event.
  • title and time set the copy. people sets attendees.
  • tone picks neutral, accent, success or warning. state picks default, selected or now.
  • With onSelect it is a button with aria-pressed, otherwise it is not interactive.
/docs/components/calendar-event/markdown
PreviousAvailability Strip
NextTooltip

Related

App · Team CalendarProBlockA team calendar app with sidebar, Calendar and a day, week or month of Calendar Events.CalendarComponentPick a date, a range, or a date and a time. Six rows always, so the height never jumps.Calendar ScheduleComponentA month with its events in the grid, and the picked day's agenda beside it.Timeline ItemProChartA 20 px marker on a 2 px rail, a title, a time and one line of detail. Four states.Availability CellComponentOne month of availability, used six at a time in the Availability Strip.