API del componente Planificador para React

Importación

import-scheduler.tsx

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

NuiScheduler

Eventos en un mes, una semana, un día, una agenda o una línea de tiempo.

NuiScheduler: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`events`Prop	`NuiSchedulerEvent<T>[]`	`[]`	Los eventos que se muestran.
`resources`Prop	`NuiSchedulerResource[]`	`[]`	Salas, personas o máquinas: filas de la línea de tiempo y columnas del día y la semana.
`view` `defaultView` `onViewChange`Estado	`'month' \| 'week' \| 'day' \| 'agenda' \| 'timeline'`	`'week'`	La vista que se muestra.
`views`Prop	`NuiSchedulerView[]`	`all`	Las vistas entre las que se puede cambiar. Por defecto, todas; la línea de tiempo, solo con recursos.
`timelineSpan`Prop	`'day' \| 'week' \| 'month'`	`'day'`	Lo que muestra la línea de tiempo: un día por franjas, o una semana o un mes por días.
`date` `defaultDate` `onDateChange`Estado	`NuiDate`	`today`	El día que se muestra, donde también está el foco del teclado. Pasa `defaultDate` cuando un servidor renderice el planificador: el día de hoy del servidor puede no ser el de quien lee.
`slotMinutes`Prop	`number`	`30`	Minutos por fila de la cuadrícula horaria, o por columna de la línea de tiempo de un día.
`snapMinutes`Prop	`number`	`slotMinutes`	El paso con el que se mueven y redimensionan los eventos.
`dayStart, dayEnd`Prop	`number`	`0, 24`	Desde qué hora y hasta qué hora muestra la cuadrícula horaria.
`scrollHour`Prop	`number`	`8`	La hora en la que se abre la cuadrícula horaria.
`agendaDays`Prop	`number`	`30`	Cuántos días por delante muestra la agenda.
`businessHours`Prop	`NuiSchedulerHours[]`		El horario laboral, como `{ days: [1, 2, 3, 4, 5], start: '09:00', end: '17:00' }`. El resto del tiempo aparece sombreado.
`weekends`Prop	`boolean`	`true`	Muestra el fin de semana. Sin él, todas las vistas omiten el fin de semana de la configuración regional.
`weekNumbers`Prop	`boolean`	`false`	Muestra los números de semana ISO en el mes y encima de las horas.
`editable`Prop	`boolean`	`false`	Los eventos se pueden mover y redimensionar, con el puntero y con el teclado.
`selectable`Prop	`boolean`	`false`	Se puede elegir un intervalo en la cuadrícula, para crear eventos.
`allow`Prop	`(time) => boolean`		Decide si se permite mover o redimensionar un evento, o elegir un intervalo.
`toolbar`Prop	`boolean \| ((toolbar: NuiSchedulerToolbar) => ReactNode)`	`true`	Muestra la barra de herramientas, o dibuja una propia a partir de lo que recibe.
`firstDay`Prop	`1 … 7`		El primer día de la semana, 1 para el lunes. Por defecto, el de la configuración regional.
`headingLevel`Prop	`number`	`2`	El nivel de encabezado del título; los días de la agenda bajan un nivel más.
`locale`Prop	`string`	`'en-US'`	Da formato a los días y las horas.
`labels`Prop	`Partial<NuiSchedulerLabels>`		Todos los textos que el planificador muestra o anuncia, para traducirlos.
`corners`Prop	`NuiCorners`		La forma de sus esquinas: `round`, `squircle`, `bevel`, `scoop`, `notch` o `square`.
`radius`Prop	`NuiRadius`		El tamaño de sus esquinas: `none`, `small`, `medium`, `large` o `full`.
`density`Prop	`NuiDensity`		Cuánto espacio ocupa: `compact`, `regular` o `roomy`.
`renderEvent`Render prop	`(event, { time }) => ReactNode`		Dibuja tú los eventos, a partir del evento y su horario como texto.
`renderResource`Render prop	`(resource) => ReactNode`		Dibuja tú los encabezados de los recursos.
`onEventClick`Callback	`(event: NuiSchedulerEvent<T>) => void`		Se llama con el evento en el que se hace clic, o que se abre con Intro.
`onEventChange`Callback	`({ event, start, end, resource? }) => void`		Se llama con las horas nuevas de un evento tras moverlo o redimensionarlo, y sus recursos si han cambiado. Actualiza `events` para conservar el cambio.
`onSlotSelect`Callback	`({ start, end, allDay, resource? }) => void`		Se llama con el intervalo elegido en la cuadrícula y su recurso.
`onRangeChange`Callback	`({ start, end }) => void`		Se llama con el primer y el último día que se muestran cuando cambian, para cargar sus eventos.
`ref`Prop	`Ref<NuiSchedulerHandle>`		Lo que expone la `ref` del planificador: el cambio de página, para una barra de herramientas propia.
`previous, next, goToday`Método	`() => void`		Muestran la página anterior o siguiente, o la de hoy, para una barra de herramientas propia.
`title`Propiedad	`string`		Lo que se muestra, tal como lo dice el título de la barra de herramientas.

El estado funciona como en los campos de formulario de React: pasa un valor y actualízalo desde su callback on…Change, o pasa un valor default… y deja que el componente lo guarde.

Las props de personalización que no definas siguen el atributo data-nui-* más cercano. Consulta la guía de personalización.

NuiSchedulerToolbar

Lo que recibe una función toolbar, para dibujar una barra de herramientas propia.

NuiSchedulerToolbar: Propiedades
Nombre	Tipo	Descripción
`title`Propiedad	`string`	Lo que se muestra, tal como lo dice el título de la barra de herramientas.
`view, views`Propiedad	`NuiSchedulerView, NuiSchedulerView[]`	La vista que se muestra y las vistas que se ofrecen.
`setView, previous, next, goToday`Método	`(view?) => void`	Cambian la vista, o muestran la página anterior o siguiente, o la de hoy.

NuiSchedulerEvent

Un evento. El final de un evento con hora no se incluye; el de un evento de todo el día es su último día.

NuiSchedulerEvent: Propiedades
Nombre	Tipo	Predeterminado	Descripción
`id, title`Propiedad	`string`		Su clave, y lo que muestra.
`start, end`Propiedad	`NuiDateTime \| NuiDate`		Fechas y horas, o solo fechas para los eventos de todo el día.
`allDay`Propiedad	`boolean`		Por defecto, si `start` no tiene hora.
`tone`Propiedad	`'accent' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'accent'`	Su paleta.
`color, class`Propiedad	`string`		Cualquier color CSS, que se impone a su tono, y clases para darle estilo.
`resource`Propiedad	`string \| string[]`		Los recursos a los que pertenece.
`rrule`Propiedad	`string`		Una regla de repetición según RFC 5545, como `FREQ=WEEKLY;BYDAY=MO`.
`exdate`Propiedad	`string[]`		Los inicios de las repeticiones que no tienen lugar.
`recurrenceId`Propiedad	`NuiDateTime \| NuiDate`		En una repetición que comunica el planificador: el inicio que le dio su regla.
`editable`Propiedad	`boolean`		Si se puede mover, diga lo que diga el planificador.
`data`Propiedad	`T`		Cualquier otra cosa que quieras guardar con él.

NuiSchedulerResource

Una sala, una persona o una máquina a la que pertenecen eventos.

NuiSchedulerResource: Propiedades
Nombre	Tipo	Descripción
`id, title`Propiedad	`string`	Su clave, y el nombre que muestra.
`tone, color`Propiedad	`NuiSchedulerTone, string`	Los colores de sus eventos, salvo que tengan los suyos.
`businessHours`Propiedad	`NuiSchedulerHours[]`	Cuándo está disponible, en lugar del horario laboral del planificador.
`data`Propiedad	`R`	Cualquier otra cosa que quieras guardar con él.

Helpers

Funciones para eventos que se repiten y archivos iCalendar.

Helpers: Propiedades
Nombre	Tipo	Descripción
`nuiSchedulerOccurrences`Método	`(event, first, last) => NuiSchedulerEvent[]`	Un evento tal como aparece en los días dados: cada repetición, si se repite.
`nuiSchedulerRule`Método	`(text: string) => NuiSchedulerRule \| null`	Lee una regla de repetición, o devuelve null.
`nuiSchedulerToIcs`Método	`(events, options?) => string`	Escribe eventos como un archivo iCalendar.
`nuiSchedulerFromIcs`Método	`(text, { timeZone? }) => NuiSchedulerEvent[]`	Lee los eventos de un archivo iCalendar, con sus horas en una sola zona horaria.