Resource Scheduler Panel

Resource Scheduler Panel component.

Client Only

Installation

pnpm dlx @docyrus/cli add @docyrus/ui-resource-scheduler-panel

Required Packages(4 packages)

pnpm add date-fns @dnd-kit/core @dnd-kit/modifiers @tanstack/react-table

UI Primitives(5 components)

npx shadcn@latest add avatar badge button popover select

Usage

import {
  ResourceSchedulerPanel
} from "@docyrus/ui/components/resource-scheduler-panel";
import type {
  ResourceSchedulerPanelProps,
  SchedulerEvent,
  SchedulerResource,
  TimelinePreset,
  TimelinePresetConfig,
  TimeUnit,
  TimelineColumn,
  TimelineGroupHeader
} from "@docyrus/ui/components/resource-scheduler-panel";

<ResourceSchedulerPanel />

API Reference

Prop	Type	Default
`className`	`string`	—

Components

Component	Description
`ResourceSchedulerPanel`	Public export
`ResourceSchedulerProvider`	Internal — `resource-scheduler-context.tsx`
`ResourceSchedulerDraggableEvent`	Internal — `resource-scheduler-draggable-event.tsx`
`ResourceSchedulerEventBar`	Internal — `resource-scheduler-event-bar.tsx`
`ResourceSchedulerEventPopover`	Internal — `resource-scheduler-event-popover.tsx`
`ResourceSchedulerEventRow`	Internal — `resource-scheduler-event-row.tsx`
`ResourceSchedulerHeader`	Internal — `resource-scheduler-header.tsx`
`ResourceSchedulerResourceList`	Internal — `resource-scheduler-resource-list.tsx`
`ResourceSchedulerTimelineHeader`	Internal — `resource-scheduler-timeline-header.tsx`
`ResourceSchedulerTimeline`	Internal — `resource-scheduler-timeline.tsx`
`ResourceSchedulerToday`	Internal — `resource-scheduler-today.tsx`

Type Exports

Type	Description
`ResourceSchedulerPanelProps`	—
`SchedulerEvent`	—
`SchedulerResource`	—
`TimelinePreset`	—
`TimelinePresetConfig`	—
`TimeUnit`	—
`TimelineColumn`	—
`TimelineGroupHeader`	—

Type Reference

ResourceSchedulerPanelProps

Field	Type	Description
`resources`	`Array<SchedulerResource>`	—
`events`	`Array<SchedulerEvent>`	—
`presets`	`Array<TimelinePreset>`	—
`defaultPresetId`	`string`	—
`startDate`	`Date`	—
`endDate`	`Date`	—
`resourceColumns`	`Array<ColumnDef<SchedulerResource>>`	—
`onEventClick`	`(event: SchedulerEvent) => void`	—
`onEventMove`	`(event: SchedulerEvent, newStart: Date, newEnd: Date, newResourceId?: string) => void`	—
`onEventResize`	`(event: SchedulerEvent, newStart: Date, newEnd: Date) => void`	—
`onSlotClick`	`(resourceId: string, date: Date) => void`	—
`onDateRangeChange`	`(start: Date, end: Date) => void`	—
`onPresetChange`	`(presetId: string) => void`	—
`isLoading`	`boolean`	—
`readOnly`	`boolean`	—
`showTodayIndicator`	`boolean`	—
`showResourceCount`	`boolean`	—
`height`	`number \| 'auto'`	—
`resourcePanelWidth`	`number`	—
`rowHeight`	`number`	—
`className`	`string`	—
`locale`	`string`	—

SchedulerEvent

Field	Type	Description
`id`	`string`	—
`resourceId`	`string`	—
`title`	`string`	—
`startDate`	`Date`	—
`endDate`	`Date`	—
`color`	`string`	—
`variant`	`'solid' \| 'outlined' \| 'subtle'`	—
`icon`	`ReactNode`	—
`description`	`string`	—
`location`	`string`	—
`metadata`	`Record<string, unknown>`	—

SchedulerResource

Field	Type	Description
`id`	`string`	—
`name`	`string`	—
`avatar`	`string`	—
`subtitle`	`string`	—
`group`	`string`	—

TimelinePreset

Field	Type	Description
`unitWidth`	`number`	—
`interval`	`{ unit: TimeUnit; format: string }`	—
`groups`	`Array<{ unit: TimeUnit; format: string }>`	—

TimelinePresetConfig

Field	Type	Description
`unitWidth`	`number`	—
`interval`	`{ unit: TimeUnit; format: string }`	—
`groups`	`Array<{ unit: TimeUnit; format: string }>`	—

TimeUnit

"hour" | "day" | "week" | "month" | "year"

TimelineColumn

Field	Type	Description
`start`	`Date`	—
`end`	`Date`	—
`label`	`string`	—
`index`	`number`	—

TimelineGroupHeader

Field	Type	Description
`start`	`Date`	—
`end`	`Date`	—
`label`	`string`	—
`spanCount`	`number`	—

Resource Scheduler Panel

On this page