Calendar View

The Calendar View is an inline calendar for browsing days, months and years. It supports selecting a single date or several dates, minimum and maximum bounds, blackout dates, and a configurable week start and locale.

Usage

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

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

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

Multiple Selection

Set the multiple prop to allow selecting more than one date.

View Code

<CalendarView selectionMode="multiple" />

Range Selection

Set selectionMode to range to pick a start and an end. The range has its own binding rather than sharing value, and end stays null between the two clicks, so a half-built range is distinguishable from a range of a single day.

View Code

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

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

Week Start

Use the weekStart prop to change the first day of the week (0 = Sunday, 3 = Wednesday).

View Code

<CalendarView weekStart={3} />

CalendarView Props

Name	Type	Default	Description
`ref` bindable	`HTMLDivElement`		The DOM reference of the calendar element.
`value` bindable	`Date` \| `Date[]` \| `null`	`null`	The selected date, or an array of dates when `selectionMode` is `'multiple'`. Unused by `'range'`.
`selectionMode`	`'single'` \| `'multiple'` \| `'range'`	`'single'`	How many dates the grid hands out, and in what shape.
`range` bindable	`{ start: Date` \| `null; end: Date` \| `null; }`	`{ start: null, end: null }`	The picked range. Only read and written when `selectionMode` is `'range'`, and `end` stays `null` until the range is closed.
`blackoutBreaksRange`	`boolean`	`false`	Stop a range from spanning a blacked-out date.
`blackoutDates`	`Date[]`		Dates that are rendered but cannot be selected.
`headers`	`boolean`		Labels the first cell of a month or a year with its name.
`minDate`	`Date`		The earliest selectable date.
`maxDate`	`Date`		The latest selectable date.
`view`	`'days'` \| `'months'` \| `'years'`	`'days'`	The calendar page the view opens on.
`locale`	`string`	`'en-US'`	The locale used to format weekday and month names.
`weekStart`	`number`	`1`	The first day of the week, where 0 is Sunday.
`floating`	`CalendarViewFloating`		Renders the calendar as a popup anchored to a reference element instead of inline.
`onChange`	`(event: Event, value: Date` \| `Date[]` \| `null) => void`		Called whenever the selection changes. Not called in `'range'` mode.
`onRangeChange`	`(event: Event, range: CalendarDateRange) => void`		Fired on every step of a range, including the one that leaves `end` null.
`onViewChange`	`(event: Event, view: View) => void`		Called whenever the active calendar page changes.
Element Attributes (`div`)

CalendarViewItem Props

Name	Type	Default	Description
`selected`	`boolean`		Renders the cell as the selected one.
`disabled`	`boolean`		Disables the user interaction.
`current`	`boolean`		Marks the cell as the current date.
`outOfRange`	`boolean`		Renders the cell as belonging to a neighbouring page.
`blackout`	`boolean`		Renders the cell as blacked out, so it reads as unavailable rather than disabled.
`rangePosition`	`'start'` \| `'between'` \| `'end'`		Set on the days a range covers, which paints the band behind them.
`header`	`string`		A small label rendered above the cell content.
`variant`	`'day'` \| `'monthYear'`	`'day'`	Which shape the cell takes: a circle for a day, a rounded rectangle for a month or a year.
`children`	`Snippet`		The content of the cell.
`buttonAttributes`	`HTMLButtonAttributes`		The attributes to spread on the inner button element.
Element Attributes (`div`)