Needless UI

Components

Scheduler

Events in a month, a week, a day or an agenda, dragged into place.

Import

import-scheduler.ts
import { NuiScheduler, type NuiSchedulerEvent } from '@needless-ui/angular/scheduler';

NuiScheduler

Events in a month, a week, a day or an agenda.

Selector
nui-scheduler
NameTypeDefaultDescription
eventsInputNuiSchedulerEvent<T>[][]The events to show.
viewTwo-way'month' | 'week' | 'day' | 'agenda''week'The view shown.
viewsInputNuiSchedulerView[]all fourThe views people can switch between.
dateTwo-wayNuiDatetodayThe day shown, and where the keyboard is.
slotMinutesInputnumber30Minutes per row of the time grid, and the step events move by.
scrollHourInputnumber8The hour the time grid opens at.
agendaDaysInputnumber30Days the agenda looks ahead.
editableInputbooleanfalseEvents can be moved and resized, by pointer and keyboard.
selectableInputbooleanfalseTime can be chosen on the grid, to create events.
firstDayInput1 … 7The first day of the week, 1 for Monday. By default, the locale’s.
headingLevelInputnumber2The title’s heading level; the agenda’s days are one deeper.
localeInputstringLOCALE_IDFormats days and times.
labelsInputPartial<NuiSchedulerLabels>Every text the scheduler shows or announces, to translate.
cornersInputNuiCornersThe shape of its corners: round, squircle, bevel, scoop, notch or square.
radiusInputNuiRadiusHow big its corners are: none, small, medium, large or full.
densityInputNuiDensityHow much room it takes: compact, regular or roomy.
eventClickOutputNuiSchedulerEvent<T>Emits an event clicked, or opened with Enter.
eventChangeOutput{ event, start, end }Emits an event’s new times after a move or a resize.
slotSelectOutput{ start, end, allDay }Emits the time chosen on the grid.
rangeChangeOutput{ start, end }Emits the first and last day shown when they change.

Customization inputs you leave unset follow the nearest data-nui-* attribute. See the customization guide.

NuiSchedulerEvent

An event. A timed event’s end isn’t included; an all-day event’s end is its last day.

NameTypeDefaultDescription
id, titlePropertystringIts key, and what it shows.
start, endPropertyNuiDateTime | NuiDateDates and times, or dates for all-day events.
allDayPropertybooleanBy default, whether start has no time.
toneProperty'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'Its color.
editablePropertybooleanWhether it can be moved, whatever the scheduler says.
dataPropertyTAnything else to keep with it.

NuiSchedulerEventTemplate

Draws events. The context holds the event and its time as text.

Selector
ng-template[nuiSchedulerEvent]