fetaUI
GitHub

Calendar Schedule

A month with its events in the grid, and the picked day's agenda beside it.

FreeWeb and MobileMotion

Preview

npx shadcn add @fetaui/calendar-schedule
Playground
October 20268 events this month
Day selected
October 20268 events this month
Icons animation
Motion

Installation

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

Accessibility

  • Each day reads its date and its event count.
  • The agenda is a live region.

Motion

  • The agenda rises 8 px in 400 ms, and rows stagger by 40 ms.
  • With reduced motion, it appears at once.

Responsive behavior

  • Chips and a 248 px agenda on Web. Dots with the agenda below on Mobile.

Performance

  • Events are grouped by day in a memoized map, and the day list is memoized by month.
  • The agenda remounts on a new day, so only it animates.

Note for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Import CalendarSchedule from @/components/fetaui/calendar-schedule. It composes IconButton.
  • month and events are required. Pass today so the server and client agree.
  • Each day shows two chips, then +N more. tone is ink, success, warning or danger.
  • onAdd gets the selected day, and the demo adds nothing. time and place are plain text.
/docs/components/calendar-schedule/markdown
PreviousTip Selector
NextMeeting Finder

Related

CalendarComponentPick a date, a range, or a date and a time. Six rows always, so the height never jumps.Calendar EventComponentAn event block for week views: colour tag, title, time and attendees.Day StripComponentPick a day from a strip of soft capsules. The selected day grows and fills with ink.Slot PickerComponentBook a time by placing a block on a day. It snaps to 15 minutes and avoids busy time.App · Team CalendarProBlockA team calendar app with sidebar, Calendar and a day, week or month of Calendar Events.