Calendar
A date picker component that allows users to select dates from a calendar view.
<script setup lang="ts">
import { Calendar } from '@destyler-ui/vue'
</script>
<template>
<Calendar.Root>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger />
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
<Calendar.MonthSelect />
<Calendar.YearSelect />
</Calendar.Control>
<Calendar.PresetTrigger value="last7Days">Last 7 days</Calendar.PresetTrigger>
<Teleport to="body">
<Calendar.Positioner class="calendar-basic" data-testid="positioner">
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Calendar.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
{{ weekDay.short }}
</Calendar.TableHeader>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Calendar.TableRow v-for="(week, id) in api.weeks" :key="id">
<Calendar.TableCell v-for="(day, id) in week" :key="id" :value="day">
<Calendar.TableCellTrigger>{{ day.day }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow
v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
:key="id"
>
<Calendar.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
<Calendar.TableCellTrigger>{{ month.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
<Calendar.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
<Calendar.TableCellTrigger>{{ year.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Teleport>
</Calendar.Root>
</template>
import type { UsePresenceProps } from '@destyler-ui/react'
import { Calendar } from '@destyler-ui/react'
export interface BasicProps extends UsePresenceProps {}
export function Basic(props: BasicProps) {
return (
<Calendar.Root {...props}>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Context>
{api => <Calendar.Trigger>{api.open ? 'Close calendar' : 'Open calendar'}</Calendar.Trigger>}
</Calendar.Context>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.PresetTrigger value="last7Days">Last 7 days</Calendar.PresetTrigger>
<Calendar.Positioner data-testid="positioner">
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
{api.weekDays.map((weekDay, id) => (
<Calendar.TableHeader key={id}>
{weekDay.short}
</Calendar.TableHeader>
))}
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
{api.weeks.map((week, id) => (
<Calendar.TableRow key={id}>
{week.map((day, id) => (
<Calendar.TableCell key={id} value={day}>
<Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
<Calendar.TableRow key={id}>
{months.map((month, id) => (
<Calendar.TableCell key={id} value={month.value}>
<Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getYearsGrid({ columns: 4 }).map((years, id) => (
<Calendar.TableRow key={id}>
{years.map((year, id) => (
<Calendar.TableCell key={id} value={year.value}>
<Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Calendar.Root>
)
}
import { Calendar } from '@destyler-ui/solid/calendar'
import { Index, Portal } from 'solid-js/web'
export function Basic() {
return (
<Calendar.Root>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger>📅</Calendar.Trigger>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Portal>
<Calendar.Positioner>
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Index each={context().weekDays}>
{weekDay => (
<Calendar.TableHeader>{weekDay().short}</Calendar.TableHeader>
)}
</Index>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Index each={context().weeks}>
{week => (
<Calendar.TableRow>
<Index each={week()}>
{day => (
<Calendar.TableCell value={day()}>
<Calendar.TableCellTrigger>
{day().day}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Index each={context().getMonthsGrid({ columns: 4, format: 'short' })}>
{months => (
<Calendar.TableRow>
<Index each={months()}>
{month => (
<Calendar.TableCell value={month().value}>
<Calendar.TableCellTrigger>
{month().label}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Index each={context().getYearsGrid({ columns: 4 })}>
{years => (
<Calendar.TableRow>
<Index each={years()}>
{year => (
<Calendar.TableCell value={year().value}>
<Calendar.TableCellTrigger>
{year().label}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Portal>
</Calendar.Root>
)
}
<script module lang="ts">
import type { UsePresenceProps } from '@destyler-ui/svelte'
export interface BasicProps extends UsePresenceProps {}
</script>
<script lang="ts">
import { Calendar } from '@destyler-ui/svelte'
let { ...props }: BasicProps = $props()
</script>
{#snippet calendarViews()}
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead><Calendar.TableRow>
{#each calendar().weekDays as weekDay}<Calendar.TableHeader>{weekDay.short}</Calendar.TableHeader>{/each}
</Calendar.TableRow></Calendar.TableHead>
<Calendar.TableBody>
{#each calendar().weeks as week}<Calendar.TableRow>
{#each week as day}<Calendar.TableCell value={day}><Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}
</Calendar.TableRow>{/each}
</Calendar.TableBody>
</Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table><Calendar.TableBody>
{#each calendar().getMonthsGrid({ columns: 4, format: 'short' }) as months}<Calendar.TableRow>
{#each months as month}<Calendar.TableCell value={month.value}><Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}
</Calendar.TableRow>{/each}
</Calendar.TableBody></Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table><Calendar.TableBody>
{#each calendar().getYearsGrid({ columns: 4 }) as years}<Calendar.TableRow>
{#each years as year}<Calendar.TableCell value={year.value}><Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}
</Calendar.TableRow>{/each}
</Calendar.TableBody></Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
{/snippet}
<Calendar.Root {...props}>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.Trigger>{calendar().open ? 'Close calendar' : 'Open calendar'}</Calendar.Trigger>
{/snippet}
</Calendar.Context>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.PresetTrigger value="last7Days">Last 7 days</Calendar.PresetTrigger>
<Calendar.Positioner data-testid="positioner">
<Calendar.Content>
{@render calendarViews()}
</Calendar.Content>
</Calendar.Positioner>
</Calendar.Root>
Anatomy
Section titled “Anatomy”<script setup lang="ts">import { Calendar } from '@destyler-ui/vue'</script>
<template> <Calendar.Root> <Calendar.Label /> <Calendar.Control> <Calendar.PrevTrigger /> <Calendar.ViewTrigger /> <Calendar.NextTrigger /> </Calendar.Control> <Calendar.Content> <Calendar.View> <Calendar.ViewControl> <Calendar.PrevTrigger /> <Calendar.ViewTrigger /> <Calendar.NextTrigger /> </Calendar.ViewControl> <Calendar.RangeText /> <Calendar.Table> <Calendar.TableHead> <Calendar.TableRow> <Calendar.TableHeader /> </Calendar.TableRow> </Calendar.TableHead> <Calendar.TableBody> <Calendar.TableRow> <Calendar.TableCell> <Calendar.TableCellTrigger /> </Calendar.TableCell> </Calendar.TableRow> </Calendar.TableBody> </Calendar.Table> </Calendar.View> </Calendar.Content> </Calendar.Root></template>import { Calendar } from '@destyler-ui/react'
export default function Basic() { return ( <Calendar.Root> <Calendar.Label /> <Calendar.Control> <Calendar.PrevTrigger /> <Calendar.ViewTrigger /> <Calendar.NextTrigger /> </Calendar.Control> <Calendar.Content> <Calendar.View> <Calendar.ViewControl> <Calendar.PrevTrigger /> <Calendar.ViewTrigger /> <Calendar.NextTrigger /> </Calendar.ViewControl> <Calendar.RangeText /> <Calendar.Table> <Calendar.TableHead> <Calendar.TableRow> <Calendar.TableHeader /> </Calendar.TableRow> </Calendar.TableHead> <Calendar.TableBody> <Calendar.TableRow> <Calendar.TableCell> <Calendar.TableCellTrigger /> </Calendar.TableCell> </Calendar.TableRow> </Calendar.TableBody> </Calendar.Table> </Calendar.View> </Calendar.Content> </Calendar.Root> )}import { Calendar } from '@destyler-ui/solid'import { Index } from 'solid-js'
export default function Basic() { return ( <Calendar.Root> <Calendar.Label>Date</Calendar.Label> <Calendar.Control> <Calendar.Trigger>Choose date</Calendar.Trigger> </Calendar.Control> <Calendar.Positioner> <Calendar.Content> <Calendar.View view="day"> <Calendar.Context> {api => ( <> <Calendar.ViewControl> <Calendar.PrevTrigger>Previous</Calendar.PrevTrigger> <Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger> <Calendar.NextTrigger>Next</Calendar.NextTrigger> </Calendar.ViewControl> <Calendar.Table> <Calendar.TableHead> <Calendar.TableRow> <Index each={api().weekDays}> {weekDay => <Calendar.TableHeader>{weekDay().short}</Calendar.TableHeader>} </Index> </Calendar.TableRow> </Calendar.TableHead> <Calendar.TableBody> <Index each={api().weeks}> {week => ( <Calendar.TableRow> <Index each={week()}> {day => ( <Calendar.TableCell value={day()}> <Calendar.TableCellTrigger>{day().day}</Calendar.TableCellTrigger> </Calendar.TableCell> )} </Index> </Calendar.TableRow> )} </Index> </Calendar.TableBody> </Calendar.Table> </> )} </Calendar.Context> </Calendar.View> </Calendar.Content> </Calendar.Positioner> </Calendar.Root> )}<script module lang="ts"> import type { UsePresenceProps } from '@destyler-ui/svelte/presence'
export interface BasicProps extends UsePresenceProps {}</script>
<script lang="ts"> import { Calendar } from '@destyler-ui/svelte'
let { ...props }: BasicProps = $props()</script>
{#snippet calendarViews()} <Calendar.YearSelect /> <Calendar.MonthSelect /> <Calendar.View view="day"> <Calendar.Context> {#snippet render(calendar)} <Calendar.ViewControl> <Calendar.PrevTrigger>Prev</Calendar.PrevTrigger> <Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger> <Calendar.NextTrigger>Next</Calendar.NextTrigger> </Calendar.ViewControl> <Calendar.Table> <Calendar.TableHead><Calendar.TableRow> {#each calendar().weekDays as weekDay}<Calendar.TableHeader>{weekDay.short}</Calendar.TableHeader>{/each} </Calendar.TableRow></Calendar.TableHead> <Calendar.TableBody> {#each calendar().weeks as week}<Calendar.TableRow> {#each week as day}<Calendar.TableCell value={day}><Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger></Calendar.TableCell>{/each} </Calendar.TableRow>{/each} </Calendar.TableBody> </Calendar.Table> {/snippet} </Calendar.Context> </Calendar.View> <Calendar.View view="month"> <Calendar.Context> {#snippet render(calendar)} <Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl> <Calendar.Table><Calendar.TableBody> {#each calendar().getMonthsGrid({ columns: 4, format: 'short' }) as months}<Calendar.TableRow> {#each months as month}<Calendar.TableCell value={month.value}><Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each} </Calendar.TableRow>{/each} </Calendar.TableBody></Calendar.Table> {/snippet} </Calendar.Context> </Calendar.View> <Calendar.View view="year"> <Calendar.Context> {#snippet render(calendar)} <Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl> <Calendar.Table><Calendar.TableBody> {#each calendar().getYearsGrid({ columns: 4 }) as years}<Calendar.TableRow> {#each years as year}<Calendar.TableCell value={year.value}><Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each} </Calendar.TableRow>{/each} </Calendar.TableBody></Calendar.Table> {/snippet} </Calendar.Context> </Calendar.View>{/snippet}
<Calendar.Root {...props}> <Calendar.Label>Label</Calendar.Label> <Calendar.Control> <Calendar.Input /> <Calendar.Context> {#snippet render(calendar)} <Calendar.Trigger>{calendar().open ? 'Close calendar' : 'Open calendar'}</Calendar.Trigger> {/snippet} </Calendar.Context> <Calendar.ClearTrigger>Clear</Calendar.ClearTrigger> </Calendar.Control> <Calendar.PresetTrigger value="last7Days">Last 7 days</Calendar.PresetTrigger> <Calendar.Positioner data-testid="positioner"> <Calendar.Content> {@render calendarViews()} </Calendar.Content> </Calendar.Positioner></Calendar.Root>Examples
Section titled “Examples”<script setup lang="ts">
import { Calendar } from '@destyler-ui/vue'
</script>
<template>
<Calendar.Root>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger />
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
<Calendar.MonthSelect />
<Calendar.YearSelect />
</Calendar.Control>
<Calendar.PresetTrigger value="last7Days">Last 7 days</Calendar.PresetTrigger>
<Teleport to="body">
<Calendar.Positioner class="calendar-basic" data-testid="positioner">
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Calendar.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
{{ weekDay.short }}
</Calendar.TableHeader>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Calendar.TableRow v-for="(week, id) in api.weeks" :key="id">
<Calendar.TableCell v-for="(day, id) in week" :key="id" :value="day">
<Calendar.TableCellTrigger>{{ day.day }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow
v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
:key="id"
>
<Calendar.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
<Calendar.TableCellTrigger>{{ month.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
<Calendar.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
<Calendar.TableCellTrigger>{{ year.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Teleport>
</Calendar.Root>
</template>
import type { UsePresenceProps } from '@destyler-ui/react'
import { Calendar } from '@destyler-ui/react'
export interface BasicProps extends UsePresenceProps {}
export function Basic(props: BasicProps) {
return (
<Calendar.Root {...props}>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Context>
{api => <Calendar.Trigger>{api.open ? 'Close calendar' : 'Open calendar'}</Calendar.Trigger>}
</Calendar.Context>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.PresetTrigger value="last7Days">Last 7 days</Calendar.PresetTrigger>
<Calendar.Positioner data-testid="positioner">
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
{api.weekDays.map((weekDay, id) => (
<Calendar.TableHeader key={id}>
{weekDay.short}
</Calendar.TableHeader>
))}
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
{api.weeks.map((week, id) => (
<Calendar.TableRow key={id}>
{week.map((day, id) => (
<Calendar.TableCell key={id} value={day}>
<Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
<Calendar.TableRow key={id}>
{months.map((month, id) => (
<Calendar.TableCell key={id} value={month.value}>
<Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getYearsGrid({ columns: 4 }).map((years, id) => (
<Calendar.TableRow key={id}>
{years.map((year, id) => (
<Calendar.TableCell key={id} value={year.value}>
<Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Calendar.Root>
)
}
import { Calendar } from '@destyler-ui/solid/calendar'
import { Index, Portal } from 'solid-js/web'
export function Basic() {
return (
<Calendar.Root>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger>📅</Calendar.Trigger>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Portal>
<Calendar.Positioner>
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Index each={context().weekDays}>
{weekDay => (
<Calendar.TableHeader>{weekDay().short}</Calendar.TableHeader>
)}
</Index>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Index each={context().weeks}>
{week => (
<Calendar.TableRow>
<Index each={week()}>
{day => (
<Calendar.TableCell value={day()}>
<Calendar.TableCellTrigger>
{day().day}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Index each={context().getMonthsGrid({ columns: 4, format: 'short' })}>
{months => (
<Calendar.TableRow>
<Index each={months()}>
{month => (
<Calendar.TableCell value={month().value}>
<Calendar.TableCellTrigger>
{month().label}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Index each={context().getYearsGrid({ columns: 4 })}>
{years => (
<Calendar.TableRow>
<Index each={years()}>
{year => (
<Calendar.TableCell value={year().value}>
<Calendar.TableCellTrigger>
{year().label}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Portal>
</Calendar.Root>
)
}
<script module lang="ts">
import type { UsePresenceProps } from '@destyler-ui/svelte'
export interface BasicProps extends UsePresenceProps {}
</script>
<script lang="ts">
import { Calendar } from '@destyler-ui/svelte'
let { ...props }: BasicProps = $props()
</script>
{#snippet calendarViews()}
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead><Calendar.TableRow>
{#each calendar().weekDays as weekDay}<Calendar.TableHeader>{weekDay.short}</Calendar.TableHeader>{/each}
</Calendar.TableRow></Calendar.TableHead>
<Calendar.TableBody>
{#each calendar().weeks as week}<Calendar.TableRow>
{#each week as day}<Calendar.TableCell value={day}><Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}
</Calendar.TableRow>{/each}
</Calendar.TableBody>
</Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table><Calendar.TableBody>
{#each calendar().getMonthsGrid({ columns: 4, format: 'short' }) as months}<Calendar.TableRow>
{#each months as month}<Calendar.TableCell value={month.value}><Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}
</Calendar.TableRow>{/each}
</Calendar.TableBody></Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table><Calendar.TableBody>
{#each calendar().getYearsGrid({ columns: 4 }) as years}<Calendar.TableRow>
{#each years as year}<Calendar.TableCell value={year.value}><Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}
</Calendar.TableRow>{/each}
</Calendar.TableBody></Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
{/snippet}
<Calendar.Root {...props}>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.Trigger>{calendar().open ? 'Close calendar' : 'Open calendar'}</Calendar.Trigger>
{/snippet}
</Calendar.Context>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.PresetTrigger value="last7Days">Last 7 days</Calendar.PresetTrigger>
<Calendar.Positioner data-testid="positioner">
<Calendar.Content>
{@render calendarViews()}
</Calendar.Content>
</Calendar.Positioner>
</Calendar.Root>
Controlled
Section titled “Controlled”Use v-model / controlled state to manage the selected date programmatically.
<script setup lang="ts">
import { Calendar, parseDate } from '@destyler-ui/vue'
import { type Ref, ref } from 'vue'
const value = ref([parseDate('2022-01-01')]) as Ref<Calendar.DateValue[]>
</script>
<template>
<Calendar.Root v-model="value">
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger />
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Teleport to="body">
<Calendar.Positioner class="calendar-controlled" data-testid="positioner">
<Calendar.Content>
<Calendar.View view="day">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Calendar.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
{{ weekDay.short }}
</Calendar.TableHeader>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Calendar.TableRow v-for="(week, id) in api.weeks" :key="id">
<Calendar.TableCell v-for="(day, id) in week" :key="id" :value="day">
<Calendar.TableCellTrigger>{{ day.day }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow
v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
:key="id"
>
<Calendar.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
<Calendar.TableCellTrigger>{{ month.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
<Calendar.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
<Calendar.TableCellTrigger>{{ year.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Teleport>
</Calendar.Root>
</template>
import type { DateValue } from '@destyler-ui/react'
import { useState } from 'react'
import { Calendar, parseDate } from '@destyler-ui/react'
export function Controlled() {
const [value, setValue] = useState<DateValue[]>([parseDate('2022-01-01')])
return (
<Calendar.Root
value={value}
onValueChange={details => setValue(details.value)}
>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger>📅</Calendar.Trigger>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.Positioner>
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
{api.weekDays.map((weekDay, id) => (
<Calendar.TableHeader key={id}>
{weekDay.short}
</Calendar.TableHeader>
))}
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
{api.weeks.map((week, id) => (
<Calendar.TableRow key={id}>
{week.map((day, id) => (
<Calendar.TableCell key={id} value={day}>
<Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
<Calendar.TableRow key={id}>
{months.map((month, id) => (
<Calendar.TableCell key={id} value={month.value}>
<Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getYearsGrid({ columns: 4 }).map((years, id) => (
<Calendar.TableRow key={id}>
{years.map((year, id) => (
<Calendar.TableCell key={id} value={year.value}>
<Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Calendar.Root>
)
}
import { Calendar, parseDate } from '@destyler-ui/solid/calendar'
import { createSignal } from 'solid-js'
import { Index, Portal } from 'solid-js/web'
export function Controlled() {
const [value, setValue] = createSignal<Calendar.DateValue[]>([parseDate('2022-01-01')])
return (
<Calendar.Root value={value()} onValueChange={e => setValue(e.value)}>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger>📅</Calendar.Trigger>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Portal>
<Calendar.Positioner>
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Index each={context().weekDays}>
{weekDay => (
<Calendar.TableHeader>{weekDay().short}</Calendar.TableHeader>
)}
</Index>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Index each={context().weeks}>
{week => (
<Calendar.TableRow>
<Index each={week()}>
{day => (
<Calendar.TableCell value={day()}>
<Calendar.TableCellTrigger>
{day().day}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Index each={context().getMonthsGrid({ columns: 4, format: 'short' })}>
{months => (
<Calendar.TableRow>
<Index each={months()}>
{month => (
<Calendar.TableCell value={month().value}>
<Calendar.TableCellTrigger>
{month().label}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Index each={context().getYearsGrid({ columns: 4 })}>
{years => (
<Calendar.TableRow>
<Index each={years()}>
{year => (
<Calendar.TableCell value={year().value}>
<Calendar.TableCellTrigger>
{year().label}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Portal>
</Calendar.Root>
)
}
<script lang="ts">
import type { DateValue } from '@destyler-ui/svelte'
import { Calendar, parseDate } from '@destyler-ui/svelte'
let value = $state<DateValue[]>([parseDate('2022-01-01')])
</script>
{#snippet calendarViews()}
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead><Calendar.TableRow>{#each calendar().weekDays as weekDay}<Calendar.TableHeader>{weekDay.short}</Calendar.TableHeader>{/each}</Calendar.TableRow></Calendar.TableHead>
<Calendar.TableBody>{#each calendar().weeks as week}<Calendar.TableRow>{#each week as day}<Calendar.TableCell value={day}><Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}</Calendar.TableRow>{/each}</Calendar.TableBody>
</Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table><Calendar.TableBody>{#each calendar().getMonthsGrid({ columns: 4, format: 'short' }) as months}<Calendar.TableRow>{#each months as month}<Calendar.TableCell value={month.value}><Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}</Calendar.TableRow>{/each}</Calendar.TableBody></Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table><Calendar.TableBody>{#each calendar().getYearsGrid({ columns: 4 }) as years}<Calendar.TableRow>{#each years as year}<Calendar.TableCell value={year.value}><Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}</Calendar.TableRow>{/each}</Calendar.TableBody></Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
{/snippet}
<Calendar.Root bind:value>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger>📅</Calendar.Trigger>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.Positioner>
<Calendar.Content>
{@render calendarViews()}
</Calendar.Content>
</Calendar.Positioner>
</Calendar.Root>
Select a date range with start and end dates.
<script setup lang="ts">
import { Calendar } from '@destyler-ui/vue'
</script>
<template>
<Calendar.Root selectionMode="range">
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input :index="0" />
<Calendar.Input :index="1" />
<Calendar.Trigger />
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.PresetTrigger value="last7Days">Last 7 days</Calendar.PresetTrigger>
<Teleport to="body">
<Calendar.Positioner class="calendar-range" data-testid="positioner">
<Calendar.Content>
<Calendar.View view="day">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Calendar.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
{{ weekDay.short }}
</Calendar.TableHeader>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Calendar.TableRow v-for="(week, id) in api.weeks" :key="id">
<Calendar.TableCell v-for="(day, id) in week" :key="id" :value="day">
<Calendar.TableCellTrigger>{{ day.day }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow
v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
:key="id"
>
<Calendar.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
<Calendar.TableCellTrigger>{{ month.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
<Calendar.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
<Calendar.TableCellTrigger>{{ year.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Teleport>
</Calendar.Root>
</template>
import { Calendar } from '@destyler-ui/react'
export function Range() {
return (
<Calendar.Root selectionMode="range">
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input index={0} />
<Calendar.Input index={1} />
<Calendar.Trigger>📅</Calendar.Trigger>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.PresetTrigger value="last7Days">Last 7 days</Calendar.PresetTrigger>
<Calendar.Positioner>
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
{api.weekDays.map((weekDay, id) => (
<Calendar.TableHeader key={id}>
{weekDay.short}
</Calendar.TableHeader>
))}
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
{api.weeks.map((week, id) => (
<Calendar.TableRow key={id}>
{week.map((day, id) => (
<Calendar.TableCell key={id} value={day}>
<Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
<Calendar.TableRow key={id}>
{months.map((month, id) => (
<Calendar.TableCell key={id} value={month.value}>
<Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getYearsGrid({ columns: 4 }).map((years, id) => (
<Calendar.TableRow key={id}>
{years.map((year, id) => (
<Calendar.TableCell key={id} value={year.value}>
<Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Calendar.Root>
)
}
import { Calendar } from '@destyler-ui/solid/calendar'
import { createMemo, Index } from 'solid-js'
import { Portal } from 'solid-js/web'
export function Range() {
return (
<Calendar.Root selectionMode="range" numOfMonths={2}>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input index={0} />
<Calendar.Input index={1} />
<Calendar.Trigger>📅</Calendar.Trigger>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.PresetTrigger value="last7Days">Last 7 days</Calendar.PresetTrigger>
<Portal>
<Calendar.Positioner>
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<div style={{ display: 'flex', gap: '10px' }}>
<Calendar.Context>
{context => (
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Index each={context().weekDays}>
{weekDay => (
<Calendar.TableHeader>{weekDay().short}</Calendar.TableHeader>
)}
</Index>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Index each={context().weeks}>
{week => (
<Calendar.TableRow>
<Index each={week()}>
{day => (
<Calendar.TableCell value={day()}>
<Calendar.TableCellTrigger>
{day().day}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
)}
</Calendar.Context>
<Calendar.Context>
{(context) => {
const offset = createMemo(() => context().getOffset({ months: 1 }))
return (
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Index each={context().weekDays}>
{weekDay => (
<Calendar.TableHeader>{weekDay().short}</Calendar.TableHeader>
)}
</Index>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Index each={offset().weeks}>
{week => (
<Calendar.TableRow>
<Index each={week()}>
{day => (
<Calendar.TableCell
value={day()}
visibleRange={offset().visibleRange}
>
<Calendar.TableCellTrigger>
{day().day}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
)
}}
</Calendar.Context>
</div>
</Calendar.Content>
</Calendar.Positioner>
</Portal>
</Calendar.Root>
)
}
<script lang="ts">
import { Calendar } from '@destyler-ui/svelte'
</script>
{#snippet calendarViews()}
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead><Calendar.TableRow>{#each calendar().weekDays as weekDay}<Calendar.TableHeader>{weekDay.short}</Calendar.TableHeader>{/each}</Calendar.TableRow></Calendar.TableHead>
<Calendar.TableBody>{#each calendar().weeks as week}<Calendar.TableRow>{#each week as day}<Calendar.TableCell value={day}><Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}</Calendar.TableRow>{/each}</Calendar.TableBody>
</Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table><Calendar.TableBody>{#each calendar().getMonthsGrid({ columns: 4, format: 'short' }) as months}<Calendar.TableRow>{#each months as month}<Calendar.TableCell value={month.value}><Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}</Calendar.TableRow>{/each}</Calendar.TableBody></Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table><Calendar.TableBody>{#each calendar().getYearsGrid({ columns: 4 }) as years}<Calendar.TableRow>{#each years as year}<Calendar.TableCell value={year.value}><Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}</Calendar.TableRow>{/each}</Calendar.TableBody></Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
{/snippet}
<Calendar.Root selectionMode="range">
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input index={0} />
<Calendar.Input index={1} />
<Calendar.Trigger>📅</Calendar.Trigger>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.PresetTrigger value="last7Days">Last 7 days</Calendar.PresetTrigger>
<Calendar.Positioner>
<Calendar.Content>
{@render calendarViews()}
</Calendar.Content>
</Calendar.Positioner>
</Calendar.Root>
Standalone
Section titled “Standalone”Display the calendar inline without a popover.
<script setup lang="ts">
import { Calendar } from '@destyler-ui/vue'
</script>
<template>
<Calendar.Root open>
<Calendar.View view="day">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Calendar.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
{{ weekDay.short }}
</Calendar.TableHeader>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Calendar.TableRow v-for="(week, id) in api.weeks" :key="id">
<Calendar.TableCell v-for="(day, id) in week" :key="id" :value="day">
<Calendar.TableCellTrigger>{{ day.day }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })" :key="id">
<Calendar.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
<Calendar.TableCellTrigger>{{ month.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
<Calendar.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
<Calendar.TableCellTrigger>{{ year.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
</Calendar.Root>
</template>
import { Calendar } from '@destyler-ui/react'
export function Standalone() {
return (
<Calendar.Root open>
<Calendar.View view="day">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
{api.weekDays.map((weekDay, id) => (
<Calendar.TableHeader key={id}>
{weekDay.short}
</Calendar.TableHeader>
))}
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
{api.weeks.map((week, id) => (
<Calendar.TableRow key={id}>
{week.map((day, id) => (
<Calendar.TableCell key={id} value={day}>
<Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
<Calendar.TableRow key={id}>
{months.map((month, id) => (
<Calendar.TableCell key={id} value={month.value}>
<Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getYearsGrid({ columns: 4 }).map((years, id) => (
<Calendar.TableRow key={id}>
{years.map((year, id) => (
<Calendar.TableCell key={id} value={year.value}>
<Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
</Calendar.Root>
)
}
import { Calendar } from '@destyler-ui/solid/calendar'
import { Index } from 'solid-js'
export function Standalone() {
return (
<Calendar.Root open>
<Calendar.View view="day">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Index each={context().weekDays}>
{weekDay => (
<Calendar.TableHeader>{weekDay().short}</Calendar.TableHeader>
)}
</Index>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Index each={context().weeks}>
{week => (
<Calendar.TableRow>
<Index each={week()}>
{day => (
<Calendar.TableCell value={day()}>
<Calendar.TableCellTrigger>{day().day}</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Index each={context().getMonthsGrid({ columns: 4, format: 'short' })}>
{months => (
<Calendar.TableRow>
<Index each={months()}>
{month => (
<Calendar.TableCell value={month().value}>
<Calendar.TableCellTrigger>
{month().label}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Index each={context().getYearsGrid({ columns: 4 })}>
{years => (
<Calendar.TableRow>
<Index each={years()}>
{year => (
<Calendar.TableCell value={year().value}>
<Calendar.TableCellTrigger>
{year().label}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
</Calendar.Root>
)
}
<script lang="ts">
import { Calendar } from '@destyler-ui/svelte'
</script>
<Calendar.Root>
<Calendar.View view="day">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
{#each calendar().weekDays as weekDay}
<Calendar.TableHeader>{weekDay.short}</Calendar.TableHeader>
{/each}
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
{#each calendar().weeks as week}
<Calendar.TableRow>
{#each week as day}
<Calendar.TableCell value={day}>
<Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger>
</Calendar.TableCell>
{/each}
</Calendar.TableRow>
{/each}
</Calendar.TableBody>
</Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{#each calendar().getMonthsGrid({ columns: 4, format: 'short' }) as months}
<Calendar.TableRow>
{#each months as month}
<Calendar.TableCell value={month.value}>
<Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
{/each}
</Calendar.TableRow>
{/each}
</Calendar.TableBody>
</Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{#each calendar().getYearsGrid({ columns: 4 }) as years}
<Calendar.TableRow>
{#each years as year}
<Calendar.TableCell value={year.value}>
<Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
{/each}
</Calendar.TableRow>
{/each}
</Calendar.TableBody>
</Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
</Calendar.Root>
Root Provider
Section titled “Root Provider”<script setup lang="ts">
import { Calendar, useCalendar } from '@destyler-ui/vue'
const datePicker = useCalendar()
</script>
<template>
<button @click="datePicker.clearValue()">Clear</button>
<Calendar.RootProvider :value="datePicker">
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger />
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Teleport to="body">
<Calendar.Positioner class="calendar-rootprovider" data-testid="positioner">
<Calendar.Content>
<Calendar.View view="day">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Calendar.TableHeader v-for="(weekDay, id) in api.weekDays" :key="id">
{{ weekDay.short }}
</Calendar.TableHeader>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Calendar.TableRow v-for="(week, id) in api.weeks" :key="id">
<Calendar.TableCell v-for="(day, id) in week" :key="id" :value="day">
<Calendar.TableCellTrigger>{{ day.day }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow
v-for="(months, id) in api.getMonthsGrid({ columns: 4, format: 'short' })"
:key="id"
>
<Calendar.TableCell v-for="(month, id) in months" :key="id" :value="month.value">
<Calendar.TableCellTrigger>{{ month.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context v-slot="api">
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Calendar.TableRow v-for="(years, id) in api.getYearsGrid({ columns: 4 })" :key="id">
<Calendar.TableCell v-for="(year, id) in years" :key="id" :value="year.value">
<Calendar.TableCellTrigger>{{ year.label }}</Calendar.TableCellTrigger>
</Calendar.TableCell>
</Calendar.TableRow>
</Calendar.TableBody>
</Calendar.Table>
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Teleport>
</Calendar.RootProvider>
</template>
import { Calendar, useCalendar } from '@destyler-ui/react'
export function RootProvider() {
const datePicker = useCalendar()
return (
<>
<button onClick={() => datePicker.clearValue()}>Clear</button>
<Calendar.RootProvider value={datePicker}>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger>📅</Calendar.Trigger>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.Positioner>
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
{api.weekDays.map((weekDay, id) => (
<Calendar.TableHeader key={id}>
{weekDay.short}
</Calendar.TableHeader>
))}
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
{api.weeks.map((week, id) => (
<Calendar.TableRow key={id}>
{week.map((day, id) => (
<Calendar.TableCell key={id} value={day}>
<Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getMonthsGrid({ columns: 4, format: 'short' }).map((months, id) => (
<Calendar.TableRow key={id}>
{months.map((month, id) => (
<Calendar.TableCell key={id} value={month.value}>
<Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{api => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
{api.getYearsGrid({ columns: 4 }).map((years, id) => (
<Calendar.TableRow key={id}>
{years.map((year, id) => (
<Calendar.TableCell key={id} value={year.value}>
<Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger>
</Calendar.TableCell>
))}
</Calendar.TableRow>
))}
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Calendar.RootProvider>
</>
)
}
import { Calendar, useCalendar } from '@destyler-ui/solid/calendar'
import { Index, Portal } from 'solid-js/web'
export function RootProvider() {
const calendar = useCalendar()
return (
<>
<button onClick={() => calendar().clearValue()}>Clear</button>
<Calendar.RootProvider value={calendar}>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger>📅</Calendar.Trigger>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Portal>
<Calendar.Positioner>
<Calendar.Content>
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead>
<Calendar.TableRow>
<Index each={context().weekDays}>
{weekDay => (
<Calendar.TableHeader>{weekDay().short}</Calendar.TableHeader>
)}
</Index>
</Calendar.TableRow>
</Calendar.TableHead>
<Calendar.TableBody>
<Index each={context().weeks}>
{week => (
<Calendar.TableRow>
<Index each={week()}>
{day => (
<Calendar.TableCell value={day()}>
<Calendar.TableCellTrigger>
{day().day}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Index each={context().getMonthsGrid({ columns: 4, format: 'short' })}>
{months => (
<Calendar.TableRow>
<Index each={months()}>
{month => (
<Calendar.TableCell value={month().value}>
<Calendar.TableCellTrigger>
{month().label}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{context => (
<>
<Calendar.ViewControl>
<Calendar.PrevTrigger>Prev</Calendar.PrevTrigger>
<Calendar.ViewTrigger>
<Calendar.RangeText />
</Calendar.ViewTrigger>
<Calendar.NextTrigger>Next</Calendar.NextTrigger>
</Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableBody>
<Index each={context().getYearsGrid({ columns: 4 })}>
{years => (
<Calendar.TableRow>
<Index each={years()}>
{year => (
<Calendar.TableCell value={year().value}>
<Calendar.TableCellTrigger>
{year().label}
</Calendar.TableCellTrigger>
</Calendar.TableCell>
)}
</Index>
</Calendar.TableRow>
)}
</Index>
</Calendar.TableBody>
</Calendar.Table>
</>
)}
</Calendar.Context>
</Calendar.View>
</Calendar.Content>
</Calendar.Positioner>
</Portal>
</Calendar.RootProvider>
</>
)
}
<script lang="ts">
import { Calendar, useCalendar } from '@destyler-ui/svelte'
const id = $props.id()
const calendar = useCalendar({ id })
</script>
{#snippet calendarViews()}
<Calendar.YearSelect />
<Calendar.MonthSelect />
<Calendar.View view="day">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table>
<Calendar.TableHead><Calendar.TableRow>{#each calendar().weekDays as weekDay}<Calendar.TableHeader>{weekDay.short}</Calendar.TableHeader>{/each}</Calendar.TableRow></Calendar.TableHead>
<Calendar.TableBody>{#each calendar().weeks as week}<Calendar.TableRow>{#each week as day}<Calendar.TableCell value={day}><Calendar.TableCellTrigger>{day.day}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}</Calendar.TableRow>{/each}</Calendar.TableBody>
</Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="month">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table><Calendar.TableBody>{#each calendar().getMonthsGrid({ columns: 4, format: 'short' }) as months}<Calendar.TableRow>{#each months as month}<Calendar.TableCell value={month.value}><Calendar.TableCellTrigger>{month.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}</Calendar.TableRow>{/each}</Calendar.TableBody></Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
<Calendar.View view="year">
<Calendar.Context>
{#snippet render(calendar)}
<Calendar.ViewControl><Calendar.PrevTrigger>Prev</Calendar.PrevTrigger><Calendar.ViewTrigger><Calendar.RangeText /></Calendar.ViewTrigger><Calendar.NextTrigger>Next</Calendar.NextTrigger></Calendar.ViewControl>
<Calendar.Table><Calendar.TableBody>{#each calendar().getYearsGrid({ columns: 4 }) as years}<Calendar.TableRow>{#each years as year}<Calendar.TableCell value={year.value}><Calendar.TableCellTrigger>{year.label}</Calendar.TableCellTrigger></Calendar.TableCell>{/each}</Calendar.TableRow>{/each}</Calendar.TableBody></Calendar.Table>
{/snippet}
</Calendar.Context>
</Calendar.View>
{/snippet}
<button onclick={() => calendar().clearValue()}>Clear</button>
<Calendar.RootProvider value={calendar}>
<Calendar.Label>Label</Calendar.Label>
<Calendar.Control>
<Calendar.Input />
<Calendar.Trigger>📅</Calendar.Trigger>
<Calendar.ClearTrigger>Clear</Calendar.ClearTrigger>
</Calendar.Control>
<Calendar.Positioner>
<Calendar.Content>
{@render calendarViews()}
</Calendar.Content>
</Calendar.Positioner>
</Calendar.RootProvider>
API Reference
Section titled “API Reference”Root
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
closeOnSelect | true | false | trueWhether the calendar should close after the date selection is complete. This is ignored when the selection mode is `multiple`. |
defaultOpen | — | false | trueThe initial open state of the calendar when it is first rendered. |
defaultValue | — | calendar.DateValue[]The initial value of the calendar when it is first rendered. |
defaultView | — | "day" | "month" | "year"The initial view of the calendar when it is first rendered. |
disabled | — | false | trueWhether the calendar is disabled. |
fixedWeeks | — | false | trueWhether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6. |
focusedValue | — | calendar.CalendarDate | calendar.CalendarDateTime | calendar.ZonedDateTimeThe focused date. |
format | — | (date: calendar.DateValue, details: calendar.LocaleDetails) => stringThe format of the date to display in the input. |
id | — | stringThe unique identifier of the machine. |
ids | — | Partial<{ root: string; label: (index: number) => string; table: (id: string) => string; tableHeader: (id: string) => string; tableBody: (id: string) => string; tableRow: (id: string) => string; ... 11 more ...; positioner: string; }>The ids of the elements in the calendar. Useful for composition. |
isDateUnavailable | — | (date: calendar.DateValue, locale: string) => booleanReturns whether a date of the calendar is available. |
lazyMount | false | false | trueWhether to enable lazy mounting |
locale | "en-US" | stringThe locale (BCP 47 language tag) to use when formatting the date. |
max | — | calendar.CalendarDate | calendar.CalendarDateTime | calendar.ZonedDateTimeThe maximum date that can be selected. |
maxView | "year" | "day" | "month" | "year"The maximum view of the calendar |
min | — | calendar.CalendarDate | calendar.CalendarDateTime | calendar.ZonedDateTimeThe minimum date that can be selected. |
minView | "day" | "day" | "month" | "year"The minimum view of the calendar |
modelValue | — | calendar.DateValue[]The v-model value of the calendar |
name | — | stringThe `name` attribute of the input element. |
numOfMonths | — | numberThe number of months to display. |
open | — | false | trueWhether the calendar is open |
placeholder | — | stringThe placeholder text to display in the input. |
positioning | — | calendar.PositioningOptionsThe user provided options used to position the calendar content |
readOnly | — | false | trueWhether the calendar is read-only. |
selectionMode | "single" | "single" | "multiple" | "range"The selection mode of the calendar. - `single` - only one date can be selected - `multiple` - multiple dates can be selected - `range` - a range of dates can be selected |
startOfWeek | — | numberThe first day of the week. `0` - Sunday `1` - Monday `2` - Tuesday `3` - Wednesday `4` - Thursday `5` - Friday `6` - Saturday |
timeZone | "UTC" | stringThe time zone to use |
translations | — | calendar.IntlTranslationsThe localized messages to use. |
unmountOnExit | false | false | trueWhether to unmount on exit. |
view | "day" | "day" | "month" | "year"The view of the calendar |
| Emit | Event |
|---|---|
focusChange | [details: FocusChangeDetails]Function called when the focused date changes. |
openChange | [details: OpenChangeDetails]Function called when the calendar opens or closes. |
update:modelValue | [value: DateValue[]]The callback fired when the model value changes. |
update:open | [open: boolean]The callback fired when the open state changes. |
update:view | [view: DateView]The callback fired when the view changes. |
valueChange | [details: ValueChangeDetails]Function called when the value changes. |
viewChange | [details: ViewChangeDetails]Function called when the view changes. |
ClearTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Content
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Context
No serializable props or emits are declared for this part.
Control
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Input
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
fixOnBlur | true | false | trueWhether to fix the input value on blur. |
index | — | numberThe index of the input to focus. |
Label
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
MonthSelect
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
NextTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Positioner
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
PresetTrigger
| Prop | Default | Type |
|---|---|---|
value* | — | PresetTriggerValue |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
PrevTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
RangeText
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
RootProvider
| Prop | Default | Type |
|---|---|---|
value* | — | MachineApi<PropTypes> |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
lazyMount | false | false | trueWhether to enable lazy mounting |
unmountOnExit | false | false | trueWhether to unmount on exit. |
Table
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
columns | — | number |
id | — | string |
view | — | "day" | "month" | "year" |
TableBody
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
TableCell
| Prop | Default | Type |
|---|---|---|
value* | — | Reactive<number | DateValue> |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
columns | — | number |
disabled | — | false | true |
visibleRange | — | Range<calendar.DateValue> |
TableCellTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
TableHead
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
TableHeader
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
TableRow
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Trigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
View
| Prop | Default | Type |
|---|---|---|
view* | — | DateView |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
ViewControl
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
ViewTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
YearSelect
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Root
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
closeOnSelect | true | false | trueWhether the calendar should close after the date selection is complete. This is ignored when the selection mode is `multiple`. |
defaultOpen | — | false | trueThe initial open state of the calendar when it is first rendered. |
defaultValue | — | calendar.DateValue[]The initial value of the calendar when it is first rendered. |
defaultView | — | "day" | "month" | "year"The initial view of the calendar when it is first rendered. |
disabled | — | false | trueWhether the calendar is disabled. |
fixedWeeks | — | false | trueWhether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6. |
focusedValue | — | calendar.CalendarDate | calendar.CalendarDateTime | calendar.ZonedDateTimeThe focused date. |
format | — | (date: DateValue, details: calendar.LocaleDetails) => stringThe format of the date to display in the input. |
id | — | stringThe unique identifier of the machine. |
ids | — | Partial<{ root: string; label: (index: number) => string; table: (id: string) => string; tableHeader: (id: string) => string; tableBody: (id: string) => string; tableRow: (id: string) => string; ... 11 more ...; positioner: string; }>The ids of the elements in the date picker. Useful for composition. |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
isDateUnavailable | — | (date: DateValue, locale: string) => booleanReturns whether a date of the calendar is available. |
lazyMount | false | false | trueWhether to enable lazy mounting |
locale | "en-US" | stringThe locale (BCP 47 language tag) to use when formatting the date. |
max | — | calendar.CalendarDate | calendar.CalendarDateTime | calendar.ZonedDateTimeThe maximum date that can be selected. |
maxView | "year" | "day" | "month" | "year"The maximum view of the calendar |
min | — | calendar.CalendarDate | calendar.CalendarDateTime | calendar.ZonedDateTimeThe minimum date that can be selected. |
minView | "day" | "day" | "month" | "year"The minimum view of the calendar |
name | — | stringThe `name` attribute of the input element. |
numOfMonths | — | numberThe number of months to display. |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
onFocusChange | — | (details: calendar.FocusChangeDetails) => voidFunction called when the focused date changes. |
onOpenChange | — | (details: calendar.OpenChangeDetails) => voidFunction called when the calendar opens or closes. |
onValueChange | — | (details: calendar.ValueChangeDetails) => voidFunction called when the value changes. |
onViewChange | — | (details: ViewChangeDetails) => voidFunction called when the view changes. |
open | — | false | trueWhether the calendar is open |
parse | — | (value: string, details: calendar.LocaleDetails) => DateValue | undefinedFunction to parse the date from the input back to a DateValue. |
placeholder | — | stringThe placeholder text to display in the input. |
positioning | — | calendar.PositioningOptionsThe user provided options used to position the date picker content |
present | — | false | trueWhether the node is present (controlled by the user) |
readOnly | — | false | trueWhether the calendar is read-only. |
selectionMode | "single" | "multiple" | "single" | "range"The selection mode of the calendar. - `single` - only one date can be selected - `multiple` - multiple dates can be selected - `range` - a range of dates can be selected |
startOfWeek | — | numberThe first day of the week. `0` - Sunday `1` - Monday `2` - Tuesday `3` - Wednesday `4` - Thursday `5` - Friday `6` - Saturday |
timeZone | "UTC" | stringThe time zone to use |
translations | — | calendar.IntlTranslationsThe localized messages to use. |
unmountOnExit | false | false | trueWhether to unmount on exit. |
value | — | calendar.DateValue[]The selected date(s). |
view | "day" | "day" | "month" | "year"The view of the calendar |
ClearTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Content
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Context
| Prop | Default | Type |
|---|---|---|
children* | — | (context: UseCalendarContext) => ReactNode |
Control
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Input
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
fixOnBlur | true | false | trueWhether to fix the input value on blur. |
index | — | numberThe index of the input to focus. |
Label
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
MonthSelect
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
NextTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Positioner
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
PresetTrigger
| Prop | Default | Type |
|---|---|---|
value* | — | PresetTriggerValue |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
PrevTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
RangeText
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
RootProvider
| Prop | Default | Type |
|---|---|---|
value* | — | UseCalendarReturn |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
lazyMount | false | false | trueWhether to enable lazy mounting |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
present | — | false | trueWhether the node is present (controlled by the user) |
unmountOnExit | false | false | trueWhether to unmount on exit. |
Table
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
columns | — | number |
TableBody
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
TableCell
| Prop | Default | Type |
|---|---|---|
value* | — | number | DateValue |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
columns | — | number |
disabled | — | false | true |
visibleRange | — | Range<calendar.DateValue> |
TableCellTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
TableHead
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
TableHeader
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
TableRow
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Trigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
View
| Prop | Default | Type |
|---|---|---|
view* | — | DateView |
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
ViewControl
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
ViewTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
YearSelect
| Prop | Default | Type |
|---|---|---|
asChild | — | false | trueUse the provided child element as the default rendered element, combining their props and behavior. |
Root
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
closeOnSelect | true | false | trueWhether the calendar should close after the date selection is complete. This is ignored when the selection mode is `multiple`. |
defaultOpen | — | false | trueThe initial open state of the date picker when it is first rendered. |
defaultValue | — | calendar.DateValue[]The initial value of the date picker when it is first rendered. |
defaultView | — | "day" | "month" | "year"The initial view of the date picker when it is first rendered. |
disabled | — | false | trueWhether the calendar is disabled. |
fixedWeeks | — | false | trueWhether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6. |
focusedValue | — | calendar.CalendarDate | calendar.CalendarDateTime | calendar.ZonedDateTimeThe focused date. |
format | — | (date: DateValue, details: calendar.LocaleDetails) => stringThe format of the date to display in the input. |
ids | — | Partial<{ root: string; label: (index: number) => string; table: (id: string) => string; tableHeader: (id: string) => string; tableBody: (id: string) => string; tableRow: (id: string) => string; ... 11 more ...; positioner: string; }>The ids of the elements in the date picker. Useful for composition. |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
isDateUnavailable | — | (date: DateValue, locale: string) => booleanReturns whether a date of the calendar is available. |
lazyMount | false | false | trueWhether to enable lazy mounting |
locale | "en-US" | stringThe locale (BCP 47 language tag) to use when formatting the date. |
max | — | calendar.CalendarDate | calendar.CalendarDateTime | calendar.ZonedDateTimeThe maximum date that can be selected. |
maxView | "year" | "day" | "month" | "year"The maximum view of the calendar |
min | — | calendar.CalendarDate | calendar.CalendarDateTime | calendar.ZonedDateTimeThe minimum date that can be selected. |
minView | "day" | "day" | "month" | "year"The minimum view of the calendar |
name | — | stringThe `name` attribute of the input element. |
numOfMonths | — | numberThe number of months to display. |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
onFocusChange | — | (details: FocusChangeDetails) => voidFunction called when the focused date changes. |
onOpenChange | — | (details: OpenChangeDetails) => voidFunction called when the calendar opens or closes. |
onValueChange | — | (details: ValueChangeDetails) => voidFunction called when the value changes. |
onViewChange | — | (details: ViewChangeDetails) => voidFunction called when the view changes. |
open | — | false | trueWhether the calendar is open |
parse | — | (value: string, details: calendar.LocaleDetails) => DateValue | undefinedFunction to parse the date from the input back to a DateValue. |
placeholder | — | stringThe placeholder text to display in the input. |
positioning | — | calendar.PositioningOptionsThe user provided options used to position the date picker content |
present | — | false | trueWhether the node is present (controlled by the user) |
readOnly | — | false | trueWhether the calendar is read-only. |
selectionMode | "single" | "single" | "multiple" | "range"The selection mode of the calendar. - `single` - only one date can be selected - `multiple` - multiple dates can be selected - `range` - a range of dates can be selected |
startOfWeek | — | numberThe first day of the week. `0` - Sunday `1` - Monday `2` - Tuesday `3` - Wednesday `4` - Thursday `5` - Friday `6` - Saturday |
timeZone | "UTC" | stringThe time zone to use |
translations | — | calendar.IntlTranslationsThe localized messages to use. |
unmountOnExit | false | false | trueWhether to unmount on exit. |
value | — | calendar.DateValue[]The selected date(s). |
view | "day" | "day" | "month" | "year"The view of the calendar |
ClearTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
Content
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
Context
| Prop | Default | Type |
|---|---|---|
children* | — | (context: UseCalendarContext) => Element |
Control
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
Input
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.InputHTMLAttributes<HTMLInputElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
fixOnBlur | true | false | trueWhether to fix the input value on blur. |
index | — | numberThe index of the input to focus. |
Label
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.LabelHTMLAttributes<HTMLLabelElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
MonthSelect
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.SelectHTMLAttributes<HTMLSelectElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
NextTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
Positioner
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
PresetTrigger
| Prop | Default | Type |
|---|---|---|
value* | — | PresetTriggerValue |
asChild | — | (props: (userProps?: solid_js243.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
PrevTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
RangeText
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
RootProvider
| Prop | Default | Type |
|---|---|---|
value* | — | UseCalendarReturn |
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
lazyMount | false | false | trueWhether to enable lazy mounting |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
present | — | false | trueWhether the node is present (controlled by the user) |
unmountOnExit | false | false | trueWhether to unmount on exit. |
Table
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLTableElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
columns | — | number |
TableBody
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLTableSectionElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
TableCell
| Prop | Default | Type |
|---|---|---|
value* | — | number | DateValue |
asChild | — | (props: (userProps?: solid_js243.JSX.TdHTMLAttributes<HTMLTableCellElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
columns | — | number |
disabled | — | false | true |
visibleRange | — | Range<calendar.DateValue> |
TableCellTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
TableHead
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLTableSectionElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
TableHeader
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.ThHTMLAttributes<HTMLTableCellElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
TableRow
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLTableRowElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
Trigger
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
View
| Prop | Default | Type |
|---|---|---|
view* | — | DateView |
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
ViewControl
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
ViewTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.ButtonHTMLAttributes<HTMLButtonElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
YearSelect
| Prop | Default | Type |
|---|---|---|
asChild | — | (props: (userProps?: solid_js243.JSX.SelectHTMLAttributes<HTMLSelectElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.ElementUse the provided child element as the default rendered element, combining their props and behavior. |
Root
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
closeOnSelect | true | false | trueWhether the calendar should close after the date selection is complete. This is ignored when the selection mode is `multiple`. |
defaultOpen | — | false | true |
defaultValue | — | import("/home/runner/work/ui/ui/packages/svelte/dist/index").DateValue[] |
defaultView | — | "day" | "month" | "year" |
disabled | — | false | trueWhether the calendar is disabled. |
fixedWeeks | — | false | trueWhether the calendar should have a fixed number of weeks. This renders the calendar with 6 weeks instead of 5 or 6. |
focusedValue | — | DateValue | undefinedThe focused date. |
format | — | ((date: DateValue, details: LocaleDetails) => string) | undefinedThe format of the date to display in the input. |
id | — | string |
ids | — | Partial<{ root: string; label: (index: number) => string; table: (id: string) => string; tableHeader: (id: string) => string; tableBody: (id: string) => string; tableRow: (id: string) => string; ... 11 more ...; positioner: string; }>The ids of the elements in the date picker. Useful for composition. |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
isDateUnavailable | — | (date: import("/home/runner/work/ui/ui/packages/svelte/dist/index").DateValue, locale: string) => booleanReturns whether a date of the calendar is available. |
lazyMount | false | false | trueWhether to enable lazy mounting |
locale | "en-US" | stringThe locale (BCP 47 language tag) to use when formatting the date. |
max | — | DateValue | undefinedThe maximum date that can be selected. |
maxView | "year" | "day" | "month" | "year"The maximum view of the calendar |
min | — | DateValue | undefinedThe minimum date that can be selected. |
minView | "day" | "day" | "month" | "year"The minimum view of the calendar |
name | — | stringThe `name` attribute of the input element. |
numOfMonths | — | numberThe number of months to display. |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
onFocusChange | — | (details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").CalendarFocusChangeDetails) => voidFunction called when the focused date changes. |
onOpenChange | — | (details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").CalendarOpenChangeDetails) => voidFunction called when the calendar opens or closes. |
onValueChange | — | (details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").CalendarValueChangeDetails) => voidFunction called when the value changes. |
onViewChange | — | (details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").CalendarViewChangeDetails) => voidFunction called when the view changes. |
open | — | false | trueWhether the calendar is open |
parse | — | ((value: string, details: LocaleDetails) => DateValue | undefined) | undefinedFunction to parse the date from the input back to a DateValue. |
placeholder | — | stringThe placeholder text to display in the input. |
positioning | — | PositioningOptions | undefinedThe user provided options used to position the date picker content |
present | — | false | trueWhether the node is present (controlled by the user) |
readOnly | — | false | trueWhether the calendar is read-only. |
selectionMode | "single" | "multiple" | "single" | "range"The selection mode of the calendar. - `single` - only one date can be selected - `multiple` - multiple dates can be selected - `range` - a range of dates can be selected |
skipAnimationOnMount | false | false | trueWhether to allow the initial presence animation. |
startOfWeek | — | numberThe first day of the week. `0` - Sunday `1` - Monday `2` - Tuesday `3` - Wednesday `4` - Thursday `5` - Friday `6` - Saturday |
timeZone | "UTC" | stringThe time zone to use |
translations | — | IntlTranslations | undefinedThe localized messages to use. |
unmountOnExit | false | false | trueWhether to unmount on exit. |
value | — | import("/home/runner/work/ui/ui/packages/svelte/dist/index").DateValue[]The selected date(s). |
view | "day" | "day" | "month" | "year"The view of the calendar |
ClearTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]> |
children | — | Snippet<[]> | undefined |
Content
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
Context
| Prop | Default | Type |
|---|---|---|
render* | — | Snippet<[UseCalendarContext]> |
Control
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
Input
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]> |
children | — | Snippet<[]> | undefined |
fixOnBlur | true | false | trueWhether to fix the input value on blur. |
index | — | numberThe index of the input to focus. |
Label
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]> |
children | — | Snippet<[]> | undefined |
MonthSelect
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"select">]> |
children | — | Snippet<[]> | undefined |
NextTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]> |
children | — | Snippet<[]> | undefined |
Positioner
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
PresetTrigger
| Prop | Default | Type |
|---|---|---|
value* | — | PresetTriggerValue |
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]> |
children | — | Snippet<[]> | undefined |
PrevTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]> |
children | — | Snippet<[]> | undefined |
RangeText
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
RootProvider
| Prop | Default | Type |
|---|---|---|
value* | — | UseCalendarReturn |
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
immediate | — | false | trueWhether to synchronize the present change immediately or defer it to the next frame |
lazyMount | false | false | trueWhether to enable lazy mounting |
onExitComplete | — | () => voidFunction called when the animation ends in the closed state |
present | — | false | trueWhether the node is present (controlled by the user) |
skipAnimationOnMount | false | false | trueWhether to allow the initial presence animation. |
unmountOnExit | false | false | trueWhether to unmount on exit. |
Table
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"table">]> |
children | — | Snippet<[]> | undefined |
columns | — | number |
TableBody
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"tbody">]> |
children | — | Snippet<[]> | undefined |
TableCell
| Prop | Default | Type |
|---|---|---|
value* | — | number | DateValue |
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"td">]> |
children | — | Snippet<[]> | undefined |
columns | — | number |
disabled | — | false | true |
visibleRange | — | Range<import("/home/runner/work/ui/ui/packages/svelte/dist/index").DateValue> |
TableCellTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]> |
children | — | Snippet<[]> | undefined |
TableHead
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"thead">]> |
children | — | Snippet<[]> | undefined |
TableHeader
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"th">]> |
children | — | Snippet<[]> | undefined |
TableRow
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"tr">]> |
children | — | Snippet<[]> | undefined |
Trigger
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]> |
children | — | Snippet<[]> | undefined |
View
| Prop | Default | Type |
|---|---|---|
view* | — | DateView |
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
ViewControl
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]> |
children | — | Snippet<[]> | undefined |
ViewTrigger
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]> |
children | — | Snippet<[]> | undefined |
YearSelect
| Prop | Default | Type |
|---|---|---|
asChild | — | import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"select">]> |
children | — | Snippet<[]> | undefined |