Calendar View

El Calendar View es un calendario en línea para explorar días, meses y años. Permite seleccionar una sola fecha o varias, definir límites mínimo y máximo, bloquear fechas y configurar el primer día de la semana y el idioma.

Uso

<script>
	import { CalendarView } from 'fluentui-svelte';

	let value = $state(null);
</script>

<CalendarView bind:value onChange={(e, selection) => console.log(selection)} />

Selección múltiple

Activa la propiedad multiple para permitir seleccionar más de una fecha.

Ver Código

<CalendarView selectionMode="multiple" />

Selección de rango

Asigna range a selectionMode para elegir un inicio y un fin. El rango tiene su propio binding en lugar de compartir value, y end permanece en null entre los dos clics, de modo que un rango a medio construir se distingue de un rango de un solo día.

Ver Código

<script>
	let range = $state({ start: null, end: null });
</script>

<CalendarView selectionMode="range" bind:range />

Inicio de la semana

Usa la propiedad weekStart para cambiar el primer día de la semana (0 = domingo, 3 = miércoles).

Ver Código

<CalendarView weekStart={3} />

Propiedades de CalendarView

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement`		La referencia del DOM del elemento calendario.
`value` bindable	`Date` \| `Date[]` \| `null`	`null`	La fecha seleccionada, o un array de fechas cuando `selectionMode` es `'multiple'`. No se usa en `'range'`.
`selectionMode`	`'single'` \| `'multiple'` \| `'range'`	`'single'`	Cuántas fechas entrega la cuadrícula, y de qué forma.
`range` bindable	`{ start: Date` \| `null; end: Date` \| `null; }`	`{ start: null, end: null }`	El rango elegido. Solo se lee y se escribe cuando `selectionMode` es `'range'`, y `end` permanece `null` hasta que el rango se cierra.
`blackoutBreaksRange`	`boolean`	`false`	Impide que un rango abarque una fecha bloqueada.
`blackoutDates`	`Date[]`		Fechas que se renderizan pero no se pueden seleccionar.
`headers`	`boolean`		Etiqueta con su nombre la primera celda de un mes o de un año.
`minDate`	`Date`		La primera fecha seleccionable.
`maxDate`	`Date`		La última fecha seleccionable.
`view`	`'days'` \| `'months'` \| `'years'`	`'days'`	La página del calendario con la que se abre la vista.
`locale`	`string`	`'en-US'`	El locale con el que se formatean los nombres de los días y de los meses.
`weekStart`	`number`	`1`	El primer día de la semana, donde 0 es domingo.
`floating`	`CalendarViewFloating`		Renderiza el calendario como un popup anclado a un elemento de referencia en lugar de en línea.
`onChange`	`(event: Event, value: Date` \| `Date[]` \| `null) => void`		Se llama cada vez que cambia la selección. No se llama en modo `'range'`.
`onRangeChange`	`(event: Event, range: CalendarDateRange) => void`		Se dispara en cada paso de un rango, incluido el que deja `end` en null.
`onViewChange`	`(event: Event, view: View) => void`		Se llama cada vez que cambia la página activa del calendario.
Element Attributes (`div`)

Propiedades de CalendarViewItem

Name	Type	Default	Description
`selected`	`boolean`		Renderiza la celda como la seleccionada.
`disabled`	`boolean`		Deshabilita la interacción del usuario.
`current`	`boolean`		Marca la celda como la fecha actual.
`outOfRange`	`boolean`		Renderiza la celda como perteneciente a una página vecina.
`blackout`	`boolean`		Renderiza la celda como bloqueada, de modo que se lea como no disponible en lugar de deshabilitada.
`rangePosition`	`'start'` \| `'between'` \| `'end'`		Se aplica a los días que abarca un rango, lo que pinta la banda detrás de ellos.
`header`	`string`		Una etiqueta pequeña que se renderiza sobre el contenido de la celda.
`variant`	`'day'` \| `'monthYear'`	`'day'`	Qué forma toma la celda: un círculo para un día, un rectángulo redondeado para un mes o un año.
`children`	`Snippet`		El contenido de la celda.
`buttonAttributes`	`HTMLButtonAttributes`		Los atributos que se aplican al elemento button interno.
Element Attributes (`div`)