ng-bootstrap HomeBasicAlertFormsFloating labelsInput groupMulti-rangeRangePhone inputSelectRadioCheckboxDatepickerTimepickerDateTime pickerContainersGridCardTab controlRatingBadgeBreadcrumbButton groupButton typeCalendarMarqueeList groupTreeviewTree selectTableClosePaginationPlaceholderSpinnerColor pickerProgress barFor directiveIconOverlaysModalsOffcanvasTooltipToastPopoverDropdownTypeaheadContext menuShellDropdown menu (WC)AdvancedCopyCode snippetPipesTrust-htmlSplit-stringLinifySlugifyWord-countFont-colorHas-propertyToggle buttonsSticky footerAutofocusTrackByAsync HostBindingInstance ofIs interfaceResizableOrdinal numbersMarkdownParallaxPriority navigationScrollspyFile uploadSignature padLazy-loading componentsUser-agentNavigation lockNavigation lock (master/detail)EnterpriseCarouselSchedulerTimelineDockRibbonTile managerDatatablesFile managerQuery builderOTP inputNavbarSplitterAccordionChartsAnimationsSlide up/downFade in/outColor transitionAdditional samplesCollapseFocusTrapDrag-dropTree-select drag-dropQR-code viewerStepperThemingAnchor scrollingSection 1Section 2Section 3Section 4Section 522.15.0

Scheduler

Multi-view calendar (year / month / week / day / timeline) with drag-to-create, drag-to-move, drag-to-resize, and full keyboard navigation. Events and resources are inputs; the component emits semantic (eventCreate) / (eventUpdate) / (eventDelete) requests that the consumer translates into its own data mutations.

Basic usage

Keyboard shortcuts
  • Navigation: Tab walks header → grid → events. Inside the grid, arrow keys walk cells.
  • Cell nav (week/day): ↑/↓ ± one slot in time, ←/→ ± one day (week only). On timeline: ←/→ ± slot in time, ↑/↓ ± resource.
  • Month nav: ←/→ walk days, ↑/↓ ± one week. Crossing a month boundary auto-advances the displayed month. Enter on a day fires event-create for that whole day; Space opens the day popover (its event list, plus New event and Show day).
  • Year nav: ←/→ walk months, ↑/↓ ± three months (matching the visual grid). Crossing a year boundary auto-advances. Enter on a month drills into that month; Space opens the month's popover (events grouped by day, plus New event and Show month). Clicking a mini-day opens that day's popover, anchored on its month card.
  • Inter-event nav: with focus on an event, ←/→ walks to the previous / next event (sorted by start time). No wrap at the ends.
  • Cell nav extras: Home/End first/last slot of column · Ctrl+Home/Ctrl+End first/last cell of view · PageUp/PageDown previous/next period.
  • Selection: Shift+arrow extends a linear time-range. On week view, Shift+→ at the end of Friday extends into Saturday (the range crosses the day boundary, all slots in between light up).
  • Selection commit: Enter on a cell or selection (and pointer drag-end) fires an event-createrequest carrying the range. The scheduler doesn't create or store the event itself — this demo's handler does that with its own defaults, then calls clearSelection(). Esc clears the selection without emitting a request.
  • Event focus: every event is in the Tab order. Tab to one and the scheduler emits event-selected.
  • Move mode: M or Enter on a focused event enters move mode. Arrow keys nudge time (or resource on timeline). Shift+arrow resizes the end edge; Alt+Shift+arrow resizes the start edge. On week view, horizontal Shift+arrow pushes the end across day boundaries. Enter commits, Esc cancels.
  • Touch resize: tap an event to select it, then drag the round handle at its top or bottom edge (left/right on timeline) — the resize starts immediately, no hold needed. Moving an event by touch stays hold-then-drag (600 ms).
  • Mouse resize: drag the top or bottom edge of any resizable event (selected or not); the selected event shows the round handles as the visual affordance.
  • Edit without dragging: double-click / double-tap an event to edit its title and start/end times in a form — the single-pointer, non-drag alternative (WCAG 2.5.7).
  • Delete: Delete / Backspace on a focused event emits event-delete; the date popover and the event editor carry delete buttons for pointer users.
  • Event editor (built-in, default on): double-click / double-tap, right-click, or F2 on an event opens a popover with title, start/end and colour. Save emits event-update, Delete emits event-delete, Esc cancels. Fields follow the permission table; disable the whole editor with [eventEditor]="false". Colour is two-state: Inherit from resource (checked whenever the event carries no color) keeps it tracking its resource — including after a move to another resource — while unchecking pins the swatch onto the event.
  • Leaving an event: Esc on a focused event returns focus to the grid cell it came from.
  • Day popover (month + year views): the +N more link opens it, and so does a plain day-cell click by default (dayClickAction: 'popover' — date-click still emits first; set 'none' to opt out). Clicking the day number in month view always drills into the day view instead. When resources exist, the New event action carries the picked resource. Esc closes it.
  • Resource editing (timeline, opt-in): with the matching permission granted, Tab reaches the per-group add buttons, the colour swatch and the remove button in the pinned resource column, plus the Add resource/Add group bar at its foot. Denied capabilities render nothing at all. Rename: double-click a resource/group title, or F2 on one of the row's cells — Enter commits (resource-update), Esc cancels.
  • Resource column (timeline): drag the separator on the column's right edge to resize it, or focus it and use ←/→ (Home/End for min/max). Hover an ellipsised title for the full text.
  • View shortcuts: Alt+T today · Alt+Y year · Alt+M month · Alt+W week · Alt+D day. (Bare letters are no longer hot-keys.)
Keyboard: arrow nav cells · Shift+arrow extend selection · Enter create · M/Enter move+resize · F2 edit · Alt+T/Y/M/W/D switch views · double-click edits
Event Log

No events yet. Try clicking on the scheduler or loading sample data.

State (0 events)
View: week
Date: Aug 13, 2026, 5:49:31 AM
Selected: None
Events:
[]

Controlled selection