Calendar

Calendar component.

Client Only

Installation

pnpm dlx @docyrus/cli add @docyrus/ui-calendar

Required Packages(8 packages)

pnpm add motion @emotion/is-prop-valid date-fns sonner @hookform/resolvers react-hook-form re-resizable zod

UI Primitives(19 components)

npx shadcn@latest add alert-dialog avatar avatar-group badge button calendar command dialog dropdown-menu form input scroll-area select separator skeleton switch tabs textarea toggle

Usage

import {
  Calendar
} from "@docyrus/ui/components/calendar";
import type {
  CalendarProps,
  CalendarProviderProps,
  TCalendarView,
  TEventColor,
  TTimelineNavigationMode,
  TTimelineView,
  TWeekStartsOn,
  IEvent,
  IUser,
  ICalendarCell,
  CalendarFilterItem,
  TimelineColumn,
  TimelineColumnGroup,
  TimelineRow,
  TimelineSection,
  TimelineVariant
} from "@docyrus/ui/components/calendar";

<Calendar
  variant="default"
  size="sm"
  ref={...}
  events={[]}
  users={[]}
  defaultView="month"
  onCreateEvent={() => {}}
  onEventCreate={() => {}}
  onEventUpdate={() => {}}
  onEventDelete={() => {}}
  onEventClick={() => {}}
  onDaySelect={() => {}}
  onSlotClick={() => {}}
  onVisibleRangeChange={() => {}}
  onEventDrop={() => {}}
  hideAddButton
  hideHeaderAddButton
  hideCellAddButton
  hideUserSelect
  hideSettings
  hideFilter
  addButtonLabel="..."
  hideEventCount
  eventCountLabel="..."
  visibleViews="day"
  filterItems={CalendarFilterItem[]}
  onFilterChange={() => {}}
  renderFilterSelect={() => {}}
  sidebarContent={...}
  renderEventBadge={() => {}}
  searchPlaceholder="..."
  weekStartsOn={...}
  cellMinHeight={...}
  cellMinWidth={...}
  hourSlotHeight={...}
  startHour={0}
  endHour={0}
  disableHoverHighlight
  hoverHighlightClassName="..."
  timelineMaxLanes={0}
  defaultYearTimelineMode="continuous"
  defaultQuarterMode="continuous"
  isRefreshing
/>

Variants

Variant	Description
`default`	Default style
`bordered`	Bordered — `border-2`
`compact`	Compact — `text-xs`

Sizes

Size	Description
`sm`	Small — `max-w-3xl mx-auto`
`default`	Default — `max-w-6xl mx-auto`
`lg`	Large

API Reference

Prop	Type	Default
`variant`	`"default"` \| `"bordered"` \| `"compact"`	`"default"`
`size`	`"sm"` \| `"default"` \| `"lg"`	`"default"`
`ref`	`Ref<HTMLDivElement>`	—
`events`	`Array<IEvent>`	`[]`
`users`	`Array<IUser>`	`[]`
`isLoading`	`boolean`	`false`
`defaultView`	`TCalendarView`	`'month'`
`onCreateEvent`	`(date: Date) => void`	—
`onEventCreate`	`(event: IEvent) => void`	—
`onEventUpdate`	`(event: IEvent) => void`	—
`onEventDelete`	`(eventId: number) => void`	—
`onEventClick`	`(event: IEvent) => void`	—
`onDaySelect`	`(date: Date) => void`	—
`onSlotClick`	`(start: Date, end: Date) => void`	—
`onVisibleRangeChange`	`(range: { start: Date; end: Date }, view: TCalendarView) => void`	—
`onEventDrop`	`(event: IEvent, newStart: Date, newEnd: Date) => void`	—
`hideAddButton`	`boolean`	—
`hideHeaderAddButton`	`boolean`	—
`hideCellAddButton`	`boolean`	—
`hideUserSelect`	`boolean`	—
`hideSettings`	`boolean`	—
`hideFilter`	`boolean`	—
`addButtonLabel`	`string`	—
`hideEventCount`	`boolean`	—
`eventCountLabel`	`string`	—
`visibleViews`	`Array<TCalendarView>`	—
`filterItems`	`Array<CalendarFilterItem>`	—
`onFilterChange`	`(id: string) => void`	—
`renderFilterSelect`	`(context: any) => ReactNode`	—
`sidebarContent`	`ReactNode`	—
`renderEventBadge`	`(event: IEvent, defaultBadge: ReactNode) => ReactNode`	—
`searchPlaceholder`	`string`	—
`weekStartsOn`	`TWeekStartsOn`	—
`cellMinHeight`	`number \| string`	—
`cellMinWidth`	`number \| string`	—
`hourSlotHeight`	`number \| string`	—
`startHour`	`number`	—
`endHour`	`number`	—
`disableHoverHighlight`	`boolean`	—
`hoverHighlightClassName`	`string`	—
`timelineMaxLanes`	`number`	—
`defaultYearTimelineMode`	`TTimelineNavigationMode`	—
`defaultQuarterMode`	`TTimelineNavigationMode`	—
`isRefreshing`	`boolean`	—
`className`	`string`	—

Components

Component	Description
`Calendar`	Public export
`CalendarBody`	Internal — `calendar-body.tsx`
`CalendarSidebar`	Internal — `calendar-sidebar.tsx`
`CalendarProvider`	Internal — `contexts/calendar-context.tsx`
`DndProvider`	Internal — `contexts/dnd-context.tsx`
`AddEditEventDialog`	Internal — `dialogs/add-edit-event-dialog.tsx`
`EventDetailsDialog`	Internal — `dialogs/event-details-dialog.tsx`
`EventListDialog`	Internal — `dialogs/events-list-dialog.tsx`
`DraggableEvent`	Internal — `dnd/draggable-event.tsx`
`DroppableArea`	Internal — `dnd/droppable-area.tsx`
`ResizableEvent`	Internal — `dnd/resizable-event.tsx`
`CalendarHeader`	Internal — `header/calendar-header.tsx`
`DateNavigator`	Internal — `header/date-navigator.tsx`
`TodayButton`	Internal — `header/today-button.tsx`
`UserSelect`	Internal — `header/user-select.tsx`
`Settings`	Internal — `settings/settings.tsx`
`CalendarHeaderSkeleton`	Internal — `skeletons/calendar-header-skeleton.tsx`
`CalendarSkeleton`	Internal — `skeletons/calendar-skeleton.tsx`
`DayViewSkeleton`	Internal — `skeletons/day-view-skeleton.tsx`
`MonthViewSkeleton`	Internal — `skeletons/month-view-skeleton.tsx`
`WeekViewSkeleton`	Internal — `skeletons/week-view-skeleton.tsx`
`YearViewSkeleton`	Internal — `skeletons/year-view-skeleton.tsx`

Type Exports

Type	Description
`CalendarProps`	—
`CalendarProviderProps`	—
`TCalendarView`	—
`TEventColor`	—
`TTimelineNavigationMode`	—
`TTimelineView`	—
`TWeekStartsOn`	—
`IEvent`	—
`IUser`	—
`ICalendarCell`	—
`CalendarFilterItem`	—
`TimelineColumn`	—
`TimelineColumnGroup`	—
`TimelineRow`	—
`TimelineSection`	—
`TimelineVariant`	—

Type Reference

CalendarProps

Field	Type	Description
`ref`	`Ref<HTMLDivElement>`	—
`events`	`Array<IEvent>`	—
`users`	`Array<IUser>`	—
`isLoading`	`boolean`	—
`defaultView`	`TCalendarView`	—
`variant`	`'default' \| 'bordered' \| 'compact'`	—
`size`	`'sm' \| 'default' \| 'lg'`	—
`onCreateEvent`	`(date: Date) => void`	—
`onEventCreate`	`(event: IEvent) => void`	—
`onEventUpdate`	`(event: IEvent) => void`	—
`onEventDelete`	`(eventId: number) => void`	—
`onEventClick`	`(event: IEvent) => void`	—
`onDaySelect`	`(date: Date) => void`	—
`onSlotClick`	`(start: Date, end: Date) => void`	—
`onVisibleRangeChange`	`(range: { start: Date; end: Date }, view: TCalendarView) => void`	—
`onEventDrop`	`(event: IEvent, newStart: Date, newEnd: Date) => void`	—
`hideAddButton`	`boolean`	—
`hideHeaderAddButton`	`boolean`	—
`hideCellAddButton`	`boolean`	—
`hideUserSelect`	`boolean`	—
`hideSettings`	`boolean`	—
`hideFilter`	`boolean`	—
`addButtonLabel`	`string`	—
`hideEventCount`	`boolean`	—
`eventCountLabel`	`string`	—
`visibleViews`	`Array<TCalendarView>`	—
`filterItems`	`Array<CalendarFilterItem>`	—
`onFilterChange`	`(id: string) => void`	—
`renderFilterSelect`	`(context: any) => ReactNode`	—
`sidebarContent`	`ReactNode`	—
`renderEventBadge`	`(event: IEvent, defaultBadge: ReactNode) => ReactNode`	—
`searchPlaceholder`	`string`	—
`weekStartsOn`	`TWeekStartsOn`	—
`cellMinHeight`	`number \| string`	—
`cellMinWidth`	`number \| string`	—
`hourSlotHeight`	`number \| string`	—
`startHour`	`number`	—
`endHour`	`number`	—
`disableHoverHighlight`	`boolean`	—
`hoverHighlightClassName`	`string`	—
`timelineMaxLanes`	`number`	—
`defaultYearTimelineMode`	`TTimelineNavigationMode`	—
`defaultQuarterMode`	`TTimelineNavigationMode`	—
`isRefreshing`	`boolean`	—

TCalendarView

TEventColor

TTimelineNavigationMode

"continuous" | "single"

TTimelineView

"year-timeline" | "quarter" | "13weeks"

IEvent

Field	Type	Description
`id`	`number`	—
`startDate`	`string`	—
`endDate`	`string`	—
`title`	`string`	—
`color`	`TEventColor`	—
`description`	`string`	—
`user`	`IUser`	—

IUser

Field	Type	Description
`id`	`string`	—
`name`	`string`	—
`picturePath`	`string \| null`	—

ICalendarCell

Field	Type	Description
`day`	`number`	—
`currentMonth`	`boolean`	—
`date`	`Date`	—

CalendarFilterItem

Field	Type	Description
`id`	`string`	—
`label`	`string`	—
`image`	`string \| null`	—

TimelineColumn

Field	Type	Description
`key`	`string`	—
`label`	`string`	—
`start`	`Date`	—
`end`	`Date`	—
`containsToday`	`boolean`	—
`weekend`	`boolean`	—
`monthStart`	`boolean`	—

TimelineColumnGroup

Field	Type	Description
`key`	`string`	—
`label`	`string`	—
`weight`	`number`	—
`columns`	`Array<TimelineColumn>`	—

TimelineRow

Field	Type	Description
`key`	`string`	—
`label`	`string`	—
`subLabel`	`string`	—
`start`	`Date`	—
`end`	`Date`	—
`groups`	`Array<TimelineColumnGroup>`	—
`scale`	`Array<TimelineScaleSegment>`	—
`granularity`	`TimelineGranularity`	—
`containsToday`	`boolean`	—

TimelineSection

Field	Type	Description
`key`	`string`	—
`label`	`string`	—
`subLabel`	`string`	—
`start`	`Date`	—
`end`	`Date`	—
`variant`	`TimelineVariant`	—
`rows`	`Array<TimelineRow>`	—
`perRowHeader`	`boolean`	—
`sharedHeader`	`Array<string>`	—

TimelineVariant

"year" | "quarter" | "weeks"

Credits

shadcn-ui/ui

Calendar

Credits

On this page