Importação

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

NuiScheduler

Eventos em um mês, uma semana, um dia ou uma agenda.

Seletor
nui-scheduler
NuiScheduler: Propriedades
NomeTipoPadrãoDescrição
eventsInputNuiSchedulerEvent<T>[][]Os eventos a exibir.
viewBidirecional'month' | 'week' | 'day' | 'agenda''week'A visualização exibida.
viewsInputNuiSchedulerView[]all fourAs visualizações entre as quais é possível alternar.
dateBidirecionalNuiDatetodayO dia exibido, onde também está o foco do teclado.
slotMinutesInputnumber30Minutos por linha da grade de horários, e o passo com que os eventos se movem.
scrollHourInputnumber8A hora em que a grade de horários abre.
agendaDaysInputnumber30Quantos dias à frente a agenda mostra.
editableInputbooleanfalseOs eventos podem ser movidos e redimensionados, com o ponteiro e com o teclado.
selectableInputbooleanfalseÉ possível escolher um horário na grade, para criar eventos.
firstDayInput1 … 7O primeiro dia da semana, 1 para segunda-feira. Por padrão, o da localidade.
headingLevelInputnumber2O nível do título; os dias da agenda ficam um nível abaixo.
localeInputstringLOCALE_IDFormata dias e horários.
labelsInputPartial<NuiSchedulerLabels>Todo texto que o agendador mostra ou anuncia, para traduzir.
cornersInputNuiCornersO formato dos cantos: round, squircle, bevel, scoop, notch ou square.
radiusInputNuiRadiusO tamanho dos cantos: none, small, medium, large ou full.
densityInputNuiDensityQuanto espaço ele ocupa: compact, regular ou roomy.
eventClickOutputNuiSchedulerEvent<T>Emite um evento clicado, ou aberto com Enter.
eventChangeOutput{ event, start, end }Emite os novos horários de um evento depois de movê-lo ou redimensioná-lo.
slotSelectOutput{ start, end, allDay }Emite o horário escolhido na grade.
rangeChangeOutput{ start, end }Emite o primeiro e o último dia exibidos quando eles mudam.

Os inputs de personalização que você não definir seguem o atributo data-nui-* mais próximo. Veja o guia de personalização.

NuiSchedulerEvent

Um evento. O fim de um evento com horário não é incluído; o de um evento de dia inteiro é o último dia dele.

NuiSchedulerEvent: Propriedades
NomeTipoPadrãoDescrição
id, titlePropriedadestringA chave dele, e o que ele mostra.
start, endPropriedadeNuiDateTime | NuiDateDatas e horários, ou só datas para eventos de dia inteiro.
allDayPropriedadebooleanPor padrão, se start não tem horário.
tonePropriedade'accent' | 'neutral' | 'success' | 'warning' | 'danger''accent'A cor dele.
editablePropriedadebooleanSe ele pode ser movido, independentemente do que diz o agendador.
dataPropriedadeTQualquer outra coisa para guardar junto com ele.

NuiSchedulerEventTemplate

Desenha os eventos. O contexto contém o evento e o horário dele como texto.

Seletor
ng-template[nuiSchedulerEvent]