Needless UI

Компоненты

Планировщик

События в виде месяца, недели, дня или повестки дня — с перетаскиванием на место.

Импорт

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

NuiScheduler

События в виде месяца, недели, дня или повестки дня.

Селектор
nui-scheduler
ИмяТипПо умолчаниюОписание
eventsInputNuiSchedulerEvent<T>[][]Показываемые события.
viewДвусторонний'month' | 'week' | 'day' | 'agenda''week'Показанный вид.
viewsInputNuiSchedulerView[]all fourВиды, между которыми можно переключаться.
dateДвустороннийNuiDatetodayПоказанный день; на нём же находится фокус клавиатуры.
slotMinutesInputnumber30Минут в строке временной сетки; на этот же шаг сдвигаются события.
scrollHourInputnumber8Час, с которого открывается временная сетка.
agendaDaysInputnumber30Сколько дней вперёд охватывает повестка дня.
editableInputbooleanfalseСобытия можно переносить и менять их длительность — указателем и с клавиатуры.
selectableInputbooleanfalseВ сетке можно выбирать время, чтобы создавать события.
firstDayInput1 … 7Первый день недели, 1 — понедельник. По умолчанию — как в локали.
headingLevelInputnumber2Уровень заголовка; дни в повестке дня — на уровень глубже.
localeInputstringLOCALE_IDФорматирует дни и время.
labelsInputPartial<NuiSchedulerLabels>Все показываемые и озвучиваемые планировщиком тексты — для перевода.
cornersInputNuiCornersФорма углов: round, squircle, bevel, scoop, notch или square.
radiusInputNuiRadiusРадиус скругления углов: none, small, medium, large или full.
densityInputNuiDensityСколько места занимает компонент: compact, regular или roomy.
eventClickOutputNuiSchedulerEvent<T>Передаёт событие, по которому кликнули или которое открыли клавишей Enter.
eventChangeOutput{ event, start, end }Передаёт новое время события после переноса или изменения длительности.
slotSelectOutput{ start, end, allDay }Передаёт время, выбранное в сетке.
rangeChangeOutput{ start, end }Передаёт первый и последний показанные дни, когда они меняются.

Если входное свойство настройки не задано, компонент берёт его значение из ближайшего атрибута data-nui-*. Подробнее — в руководстве по настройке.

NuiSchedulerEvent

Событие. Конец события со временем в него не входит, а конец события на весь день — это его последний день.

ИмяТипПо умолчаниюОписание
id, titleСвойствоstringКлюч события и показываемый текст.
start, endСвойствоNuiDateTime | NuiDateДата и время или, для событий на весь день, только даты.
allDayСвойствоbooleanПо умолчанию — да, если в start нет времени.
toneСвойство'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'Его цвет.
editableСвойствоbooleanМожно ли переносить это событие, независимо от настройки планировщика.
dataСвойствоTЛюбые другие данные, которые нужно хранить вместе с ним.

NuiSchedulerEventTemplate

Рисует события. В контексте — событие и его время в виде текста.

Селектор
ng-template[nuiSchedulerEvent]