48 Pro components and page blocks

Get Pro
uibrik

Calendar Zoom

Pro

Preview

Customize

week
Start hour8
End hour20
15
monday

Usage

import { CalendarZoom } from "@/components/uibrik/calendar-zoom/calendar-zoom";

<CalendarZoom />

Installation

Pro

Calendar Zoom is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/calendar-zoom

Props

CalendarZoom
defaultView
Type "month" | "week" | "day"
"week"
View on mount.
startHour
Type number
8
First hour shown in the week and day views.
endHour
Type number
20
Hour the week and day views end at.
snap
Type "5" | "10" | "15" | "30" | "60"
"15"
Minutes events snap to while dragged.
weekStart
Type "monday" | "sunday"
"monday"
First day of the week.
events
Type { id: string; title: string; start: Date | string; end: Date | string; color?: string }[]
sample week
Events on mount. The calendar keeps its own state from then on.
locale
Type string
"en-US"
Locale for month and weekday names.
onChange
Type (events) => void
–
Called with every event after one is moved or resized.
className
Type string
–
Classes for the wrapper. It fills its parent.