apx-dsv0.1Local renderer · live
K
Foundations4
  • Getting started
  • Theming
  • Templates
  • Icons
  • Avatar
  • Badge
  • DataGrid
  • Scheduler
  • Stat
  • Table
  • Timeline
  • TreeView
  • Accordion
  • Alert
  • EmptyState
  • Progress
  • Skeleton
  • Spinner
  • SplashScreen
  • Toast
  • ColorPicker
  • FileUpload
  • Form
  • Rating
  • TagsInput
  • Combobox
  • Field
  • Select
  • Toggle
  • Button
  • Calendar
  • Checkbox
  • DatePicker
  • Input
  • NumberInput
  • Radio
  • Slider
  • Switch
  • Textarea
  • AppShell
  • Div
  • Divider
  • Sidebar
  • Stack
  • Typography
  • Image
  • Breadcrumbs
  • Carousel
  • NavigationMenu
  • Pagination
  • Stepper
  • Tabs
  • Toolbar
  • CommandPalette
  • Confirm
  • Drawer
  • HoverCard
  • Menu
  • Modal
  • Popover
  • Tooltip
  • Icon
  • Card
  • PricingCard
60 componentsapx-ds/renderer
Scheduler
Variant↳ other

Data Display

Scheduler

Google-Calendar-parity scheduling primitive — sibling Tier-3 component to

Examples

Agenda

Loading preview…
Agenda.tsx

Basic

Loading preview…
Basic.tsx

Day

Loading preview…
Day.tsx

FullChrome

Loading preview…
FullChrome.tsx

Holidays

Loading preview…
Holidays.tsx

Month

Loading preview…
Month.tsx

MultiDay

Loading preview…
MultiDay.tsx

MultipleCalendars

Loading preview…
MultipleCalendars.tsx

Overview

Loading preview…
Overview.tsx

ReadOnly

Loading preview…
ReadOnly.tsx

WithFilters

Loading preview…
WithFilters.tsx

WithSidebar

Loading preview…
WithSidebar.tsx

Props

PropTypeDefaultDescription
events*readonly SchedulerEvent[]——
borderedboolean——
calendarsreadonly CalendarSource[]——
colorResponsiveValue<SchedulerColor>——
dateDate——
defaultDateDate——
defaultDensityenum——
defaultFiltersSchedulerFilters——
defaultViewenum——
densityResponsiveValue<SchedulerDensity>——
dimOffHoursboolean——
elevationenum——
emptyStateReactNode——
enableDragCreateboolean——
enableDragMoveboolean——
enableDragResizeboolean——
enableRightClickMenuboolean——
errorStateReactNode——
eventShapeenum——
filtersboolean——
holidaysreadonly Holiday[] | "auto"——
holidaysProvider(year: number, locale: string) => readonly Holiday[] | Promise<readonly Holiday[]>——
hourHeightnumber——
isEventEditable(event: SchedulerEvent) => boolean——
loadingboolean——
localestring——
miniMonthboolean——
mobileBreakpointenum——
multiDayCountnumber——
nowIndicatorenum——
onConflict(info: ConflictInfo) => boolean | void——
onDateChange(date: Date) => void——
onEventClick(event: SchedulerEvent, e: MouseEvent<Element, MouseEvent>) => void——
onEventCreate(draft: NewEventDraft) => void | SchedulerEvent | Promise<void | SchedulerEvent>——
onEventDelete(id: string) => void | Promise<void>——
onEventDoubleClick(event: SchedulerEvent, e: MouseEvent<Element, MouseEvent>) => void——
onEventMove(event: SchedulerEvent, change: EventMoveChange) => void | SchedulerEvent | Promise<void | SchedulerEvent>——
onEventResize(event: SchedulerEvent, change: EventResizeChange) => void | SchedulerEvent | Promise<void | SchedulerEvent>——
onEventUpdate(event: SchedulerEvent, patch: Partial<SchedulerEvent>) => void | SchedulerEvent | Promise<void | SchedulerEvent>——
onRangeChange(range: { start: Date; end: Date; }) => void——
onSelectedEventChange(id: string | null) => void——
onSlotClick(range: { start: Date; end: Date; resourceId?: string | null; }, e: MouseEvent<Element, MouseEvent>) => void——
onStateChange(state: SchedulerState) => void——
onViewChange(view: SchedulerView) => void——
readOnlyboolean——
renderEvent(ctx: RenderEventContext) => ReactNode——
renderEventModal(ctx: RenderEventModalContext) => ReactNode——
renderHolidayCell(ctx: { holiday: Holiday; }) => ReactNode——
renderQuickPopover(ctx: RenderQuickPopoverContext) => ReactNode——
resourceGranularityenum——
resourcesreadonly Resource[]——
roundedCornersenum——
selectedEventIdstring | null——
showBusinessHoursboolean——
showHolidaysboolean——
showNowIndicatorboolean——
showWeekNumbersboolean——
sidebarboolean——
sizeResponsiveValue<SchedulerSize>——
snapMinutesenum——
statePartial<SchedulerState>——
stickyHeaderboolean——
storageStorageKind——
storageKeystring——
styleCSSProperties——
sxSx——
timeFormatenum——
toolbarboolean | "minimal"——
translationsPartial<SchedulerTranslations>——
variantResponsiveValue<SchedulerVariant>——
viewenum——
weekStartsOnenum——
workingDaysnumber[]——
workingHours{ start: string; end: string; }——