Calendar

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-vue/calendar
Copy

Usage#

Copy<script setup lang="ts">
import { Calendar } from "@/components/ui/calendar"
</script>
 
<template>
  <Calendar />
</template>

About#

The <Calendar /> component is built on top of the Reka UI Calendar component, which uses the @internationalized/date package to handle dates.

If you're looking for a range calendar, check out the Range Calendar component.

Persian / Hijri / Jalali Calendar#

@internationalized/date supports 13 calendar systems. Here, we'll use the Persian calendar as an example to show how to use calendar systems with the <Calendar /> component.

The default calendar system is gregory. To use a different calendar system, you need to provide a value with the desired system through the defaultPlaceholder or placeholder props.

Copy<script setup lang="ts">
import type { DateValue } from "@internationalized/date"
import {
  getLocalTimeZone,
  PersianCalendar,
  toCalendar,
  today,
} from "@internationalized/date"
 
import { Calendar } from "@/components/ui/calendar"
 
const date = ref(today(getLocalTimeZone())) as Ref<DateValue>
const placeholder = ref(
  toCalendar(today(getLocalTimeZone()), new PersianCalendar())
) as Ref<DateValue>
</script>
 
<template>
  <Calendar
    v-model="date"
    v-model:placeholder="placeholder"
    locale="fa-IR"
    dir="rtl"
  />
</template>

Examples#

Basic#

A basic calendar component.

Range Calendar#

Use <RangeCalendar /> to enable range selection.

Month and Year Selector#

Use layout="month-and-year" to show month and year dropdowns.

Presets#

Date and Time Picker#

Custom Heading and Cell Size#

Calendar Systems#

Importing createCalendar into your project will result in all available calendars being included in your bundle. If you wish to limit the supported calendars to reduce bundle sizes, you can create your own implementation that only imports the desired classes.

Check @internationalized/date, especially the section on Calendar Identifiers.

Week Numbers#

Use show-week-numbers to show week numbers.

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

See the Reka UI Calendar documentation for more information on the Calendar component.