Dev Design Library

Calendar

Month grid on DayPicker v10 for a single day or a range: one fluid hover highlight across one or two months that follows keyboard focus, a range band that previews the end under the pointer, booked (struck through) and unavailable days, ISO.

Calendar preview
Library
Fluid Functionalism
Framework
React
Type
ui
License
MIT
Dependencies
@daypicker/react@~10.0.2, lucide-react, motion
Install
npx shadcn@latest add @fluid/calendar
Files
  • registry/default/calendar.tsx
  • registry/default/lib/utils.ts
  • registry/default/lib/omit.ts
  • registry/default/lib/springs.ts
  • registry/default/lib/font-weight.ts
  • registry/default/lib/shape-context.tsx
  • registry/default/lib/size-context.tsx
  • registry/default/lib/type-scale.ts
Source
https://github.com/mickadesign/fluid-functionalism

Categories

More from Fluid Functionalism