WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text Editor
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselImage CropperImage LightboxLocation MapQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryThemeCredits

Data Display

Scheduler

Data DisplayScheduler
PresenceTag
Live props
Layout
defaultView
mobileView
layout
dayStartHour8
dayEndHour20
slotWidth48px
dayWidth160px
rowHeight56px
resourceWidth220px
height640px
weekStartsOn-1
hideWeekends
groupResources
Behavior
slotMinutes
editable
allowOverlap
locale
Appearance
showNowIndicator
showUtilization
toolbar
tone
variant
radius
State
loading
Code
import { Scheduler } from "@/components/ui/scheduler"

<Scheduler />
Pro

v1.0.0·Added in 1.0.0

Book rooms, cars and people on a resource timeline: drag to book, move and stretch bookings, conflicts refused, an agenda on phones.

Resources run down the side in collapsible groups (a click on a group heading folds it) and time runs across: a day in 15, 30 or 60 minute slots, or a week of days, with the hours outside someone's working day shaded, unavailable time hatched with its reason, a red now line and a thin utilization bar under every name. The toolbar steps a day or a week back or forward, Today jumps home and the switch picks Day, Week or Agenda; a click on a day in the week header opens that day. With a mouse, drag across free slots to book: the range snaps to the slots, stops at the next booking and opens a quick-book form under it (title focused, Enter saves, Escape cancels). Drag a booking to another time or resource: it follows the pointer, a ghost shows where it will land (red when that time is taken) and it settles into the slot on release, or shakes and springs back with the reason announced when the time is taken or unavailable. Drag either edge to stretch it; it stops at its neighbours. Near the edges the grid scrolls by itself, and Escape cancels any drag. Click a booking for its details with Edit and Cancel booking. Keyboard: the grid is one Tab stop; Left and Right move through the free slots and bookings of a row (a day at a time in the week view), Up and Down move between resources and group headings (Left and Right fold a heading), Home and End jump to the ends of the row (with Ctrl or Cmd to the first or last resource), PageUp and PageDown go a day or a week back or forward, Shift with Left or Right selects more slots and Enter or Space books them, Enter on a booking opens it, Alt with the arrows moves the focused booking a slot or a resource at a time and Alt with Shift with Left or Right changes where it ends. Moves, stretches, new bookings and conflicts are announced. Touch: the grid scrolls freely; a tap on a free slot opens the booking sheet and a long press on a booking picks it up to move it. When the scheduler is narrower than 576px it becomes an agenda: a strip of the week's days (dots mark busy days), the day's bookings grouped by resource with their times, the resources free all day as chips that book them, and a full-width Book button; bookings open as a bottom sheet with Edit and Cancel booking, and the booking form is a sheet too. Reduced motion turns the settles and slides into instant changes and drops the shake.

Add to a project

npx wingo-ui@latest add scheduler

Pro item: the CLI needs a Pro account. See plans

Dependencies

lucide-reactmotionavatarbadgebuttoncalendar-viewempty-stateinputpopoversegmented-controlselectskeletontime-pickertooltipuse-controllable-stateuse-localeuse-long-pressdate-utilsmotionnumber-formatrelative-timetonesui-config

Files

  • components/ui/scheduler.tsx

See also

Calendar ViewTime PickerDate Picker
PreviousPresenceNext Tag

Thursday, September 24, 2026

Thursday, September 24

Arrow keys move between time slots and bookings, Enter books a free slot or opens a booking. Shift with the arrows selects more slots, Alt with the arrows moves a booking and Alt with Shift resizes it.
Resources
8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM
6:00 PM
7:00 PM
Hudson room13%
8 seats · screen13% booked
Charles room17%
4 seats17% booked
Potomac room10%
12 seats · projector10% booked
Maintenance
Michael Reed22%
Sales · manager22% booked
Ryan Mitchell22%
Sales22% booked
Olivia Stone19%
Support · 9 to 519% booked
Daniel Parker
Logistics
Time off
Toyota Corolla21%
NY 12 ACM21% booked
Nissan Leaf17%
NY 34 ACM · electric17% booked
  • Hudson room

    8 seats · screen1 booking
  • Charles room

    4 seats2 bookings
  • Potomac room

    12 seats · projector1 booking
    • 2:00 PM4:00 PMMaintenanceUnavailable
  • Michael Reed

    Sales · manager2 bookings
  • Ryan Mitchell

    Sales2 bookings
  • Olivia Stone

    Support · 9 to 51 booking
  • Daniel Parker

    Logistics0 bookings
    • All dayTime offUnavailable
  • Toyota Corolla

    NY 12 ACM1 booking
  • Nissan Leaf

    NY 34 ACM · electric1 booking

Drag across free time to book, drag a booking to another time or resource, stretch its edges. Sala Olt is in maintenance from 14:00 to 16:00 and Daniel Parker is on leave, so drops there are refused.

last change: none · mobileView agenda · weekStartsOn -1 · hideWeekends false · dayWidth 160px · allowOverlap false · editable true