CalendarGrid

Responsive six-week calendar with month controls, event markers, date selection, and complete grid keyboard navigation.

InterfaceSource ready8 props documentedLive preview
Add with shadcnnpx shadcn@latest add https://www.uigrids.com/r/calendar-grid.json
Interactive preview
Interface

July 2026

Sun
Mon
Tue
Wed
Thu
Fri
Sat

Install with the CLI

# adds CalendarGrid to components/ui with the shadcn CLI
npx shadcn@latest add https://www.uigrids.com/r/calendar-grid.json

Or install the package

// npm install @uigrids/react-ui
import { CalendarGrid } from '@uigrids/react-ui'

export default function App() {
  return <CalendarGrid />
}

Props

PropTypeDefaultDescription
initialMonthunknownnew Date()Configures the initial month option.
defaultSelectedunknownnullConfigures the default selected option.
selectedDateunknown-Configures the selected date option.
eventsarray[]Configures the events option.
weekStartsOnnumber0Configures the week starts on option.
onSelectunknown-Configures the on select option.
onMonthChangeunknown-Configures the on month change option.
classNamestring''Additional CSS classes for the outer element.