API do componente Agendador para React

Importação

import-scheduler.tsx

import { NuiScheduler, type NuiSchedulerHandle } from '@needless-ui/react/scheduler';

NuiScheduler

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

NuiScheduler: Propriedades
Nome	Tipo	Padrão	Descrição
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	Os eventos a exibir.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Salas, pessoas ou máquinas: linhas da timeline e colunas do dia e da semana.
`view` `defaultView` `onViewChange`Estado	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	A visualização exibida.
`views`Prop	`NuiSchedulerView[]`	`all`	As visualizações entre as quais é possível alternar. Por padrão, todas; a timeline, só com recursos.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	O que a timeline mostra: um dia por faixas de horário, ou uma semana ou um mês por dias.
`date` `defaultDate` `onDateChange`Estado	`NuiDate`	`today`	O dia exibido, onde também está o foco do teclado. Passe `defaultDate` quando um servidor renderizar o agendador: o dia de hoje no servidor pode não ser o mesmo de quem lê.
`slotMinutes`Prop	`number`	`30`	Minutos por linha da grade de horários, ou por coluna da timeline de um dia.
`snapMinutes`Prop	`number`	`slotMinutes`	O passo com que os eventos se movem e são redimensionados.
`dayStart, dayEnd`Prop	`number`	`0, 24`	As horas em que a grade de horários começa e termina.
`scrollHour`Prop	`number`	`8`	A hora em que a grade de horários abre.
`agendaDays`Prop	`number`	`30`	Quantos dias à frente a agenda mostra.
`businessHours`Prop	`NuiSchedulerHours[]`		O horário de trabalho, como `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. O resto do tempo fica sombreado.
`weekends`Prop	`boolean`	`true`	Mostra o fim de semana. Sem ele, todas as visualizações ocultam o fim de semana da localidade.
`weekNumbers`Prop	`boolean`	`false`	Mostra os números de semana ISO no mês e acima dos horários.
`editable`Prop	`boolean`	`false`	Os eventos podem ser movidos e redimensionados, com o ponteiro e com o teclado.
`selectable`Prop	`boolean`	`false`	É possível escolher um horário na grade, para criar eventos.
`allow`Prop	`(time) => boolean`		Decide se um evento pode ser movido ou redimensionado, ou um horário escolhido.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Mostra a barra de ferramentas, ou uma função desenha a sua a partir do que recebe.
`firstDay`Prop	`1 … 7`		O primeiro dia da semana, 1 para segunda-feira. Por padrão, o da localidade.
`headingLevel`Prop	`number`	`2`	O nível do título; os dias da agenda ficam um nível abaixo.
`locale`Prop	`string`	`'en-US'`	Formata dias e horários.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Todo texto que o agendador mostra ou anuncia, para traduzir.
`corners`Prop	`NuiCorners`		O formato dos cantos: `round`, `squircle`, `bevel`, `scoop`, `notch` ou `square`.
`radius`Prop	`NuiRadius`		O tamanho dos cantos: `none`, `small`, `medium`, `large` ou `full`.
`density`Prop	`NuiDensity`		Quanto espaço ele ocupa: `compact`, `regular` ou `roomy`.
`renderEvent`Render prop	`(event, { time }) => ReactNode`		Desenhe você mesmo os eventos, a partir do evento e do horário dele como texto.
`renderResource`Render prop	`(resource) => ReactNode`		Desenhe você mesmo os cabeçalhos dos recursos.
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		Chamado com um evento clicado, ou aberto com Enter.
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		Chamado com os novos horários de um evento depois de movê-lo ou redimensioná-lo, e os recursos dele quando mudaram. Atualize `events` para manter a mudança.
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		Chamado com o horário escolhido na grade e o recurso dele.
`onRangeChange`Callback	`({ start, end }) => void`		Chamado com o primeiro e o último dia exibidos quando eles mudam, para carregar os eventos deles.
`ref`Prop	`Ref<NuiSchedulerHandle>`		O que a `ref` do agendador expõe: a troca de página, para uma barra de ferramentas própria.
`previous, next, goToday`Método	`() => void`		Mostram a página anterior ou seguinte, ou a de hoje, para uma barra de ferramentas própria.
`title`Propriedade	`string`		O que está sendo exibido, como diz o título da barra de ferramentas.

O estado funciona como nos campos de formulário do React: passe um valor e atualize-o pelo callback on…Change dele, ou passe um valor default… e deixe o componente guardá-lo.

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

NuiSchedulerToolbar

O que uma função toolbar recebe, para desenhar uma barra de ferramentas própria.

NuiSchedulerToolbar: Propriedades
Nome	Tipo	Descrição
`title`Propriedade	`string`	O que está sendo exibido, como diz o título da barra de ferramentas.
`view, views`Propriedade	`NuiSchedulerView, NuiSchedulerView[]`	A visualização exibida e as visualizações oferecidas.
`setView, previous, next, goToday`Método	`(view?) => void`	Trocam a visualização, ou mostram a página anterior ou seguinte, ou a de hoje.

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
Nome	Tipo	Padrão	Descrição
`id, title`Propriedade	`string`		A chave dele, e o que ele mostra.
`start, end`Propriedade	`NuiDateTime \| NuiDate`		Datas e horários, ou só datas para eventos de dia inteiro.
`allDay`Propriedade	`boolean`		Por padrão, se `start` não tem horário.
`tone`Propriedade	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	A paleta dele.
`color, class`Propriedade	`string`		Qualquer cor CSS, que prevalece sobre o tom, e classes para estilizá-lo.
`resource`Propriedade	`string \| string[]`		Os recursos aos quais ele pertence.
`rrule`Propriedade	`string`		Uma regra de repetição da RFC 5545, como `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Propriedade	`string[]`		Os inícios das ocorrências que não acontecem.
`recurrenceId`Propriedade	`NuiDateTime \| NuiDate`		Em uma ocorrência informada pelo agendador: o início que a regra deu a ela.
`editable`Propriedade	`boolean`		Se ele pode ser movido, independentemente do que diz o agendador.
`data`Propriedade	`T`		Qualquer outra coisa para guardar junto com ele.

NuiSchedulerResource

Uma sala, uma pessoa ou uma máquina à qual pertencem eventos.

NuiSchedulerResource: Propriedades
Nome	Tipo	Descrição
`id, title`Propriedade	`string`	A chave dele, e o nome que ele mostra.
`tone, color`Propriedade	`NuiSchedulerTone, string`	As cores dos eventos dele, a menos que tenham cores próprias.
`businessHours`Propriedade	`NuiSchedulerHours[]`	Quando ele está disponível, em vez do horário de trabalho do agendador.
`data`Propriedade	`R`	Qualquer outra coisa para guardar junto com ele.

Helpers

Funções para eventos que se repetem e arquivos iCalendar.

Helpers: Propriedades
Nome	Tipo	Descrição
`nuiSchedulerOccurrences`Método	`(event, first, last) => NuiSchedulerEvent[]`	Um evento como aparece nos dias dados: cada ocorrência, se ele se repete.
`nuiSchedulerRule`Método	`(text: string) => NuiSchedulerRule \| null`	Lê uma regra de repetição, ou retorna null.
`nuiSchedulerToIcs`Método	`(events, options?) => string`	Escreve eventos como um arquivo iCalendar.
`nuiSchedulerFromIcs`Método	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Lê os eventos de um arquivo iCalendar, com os horários em um só fuso horário.