Calendar

Komponen isian tanggal yang memungkinkan pengguna memasukkan dan menyunting tanggal.

Oct

2026

S	M	T	W	T	F	S

Event Date, October 2026

About

Komponen <Calendar /> dibangun di atas Calendar milik Reka UI, yang memakai paket @internationalized/date untuk mengurus tanggal.

Kalau yang Anda butuhkan kalender rentang tanggal, lihat komponen Range Calendar.

Installation

pnpm dlx kliping@latest add calendar

Pasang dependensi berikut:

pnpm add reka-ui

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

Usage

vue

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

<template>
  <Calendar />
</template>

Sistem Penanggalan (Persia / Hijriah / Jalali, misalnya)

@internationalized/date mendukung 13 sistem penanggalan. Di sini kami memakai kalender Persia sebagai contoh, untuk menunjukkan cara memakai sistem penanggalan pada <Calendar /> maupun komponen kalender lainnya.

Sistem penanggalan bawaannya adalah gregory.
Untuk memakai sistem penanggalan lain, berikan nilai bersistem tersebut lewat prop defaultPlaceholder atau placeholder.

Sebaiknya prop placeholder atau defaultPlaceholder tetap Anda isi, meski Anda tidak memakai sistem penanggalan lain.

vue

<script setup lang="ts">
import type { DateValue } from '@internationalized/date'
import { getLocalTimeZone, PersianCalendar, toCalendar, today } from '@internationalized/date'
import { Calendar } from '@/registry/new-york-v4/ui/calendar'

const date = ref(today(getLocalTimeZone())) as Ref<DateValue> // no need to add calendar identifier to modelValue when using placeholder

const placeholder = ref(toCalendar(today(getLocalTimeZone()), new PersianCalendar())) as Ref<DateValue>
// or
const defaultPlaceholder = toCalendar(today(getLocalTimeZone()))
</script>

<template>
  <Calendar
    v-model="date"
    v-model:placeholder="placeholder"
    locale="fa-IR"
  />
  <!-- or -->
  <Calendar
    v-model="date"
    :default-placeholder="placeholder"
    locale="fa-IR"
  />
</template>

Kalau keduanya dikosongkan, tanggal yang dikeluarkan akan memakai kalender gregorian, karena sistem itu yang paling umum dipakai.

Nilai yang dikeluarkan komponen Calendar berbeda-beda tergantung pengenal sistem penanggalan yang Anda tentukan.

Anda juga bisa mengubah locale lewat prop locale agar tampilannya sesuai dengan sistem penanggalan yang dipakai.

Lihat kode lengkap

vue

<script setup lang="ts">
import {
  CalendarDate,
  fromDate,
  getLocalTimeZone,
  parseDate,
  PersianCalendar,
  toCalendar,
  today
} from '@internationalized/date'
import { ref } from 'vue'

const date = ref(toCalendar(new CalendarDate(2025, 1, 1), new PersianCalendar()))
// or
const date = ref(toCalendar(parseDate('2022-02-03'), new PersianCalendar()))
// or
const date = ref(toCalendar(today(getLocalTimeZone()), new PersianCalendar()))
// or
const date = ref(new CalendarDate(new PersianCalendar(), 1404, 1, 1))
// or
const date = ref(toCalendar(fromDate(new Date(), getLocalTimeZone()), new PersianCalendar()))

const placeholder = ref(toCalendar(today(getLocalTimeZone()), new PersianCalendar()))
</script>

<template>
  <Calendar
    v-model="date"
    v-model:placeholder="placeholder"
    locale="fa-IR"
    dir="rtl"
  />
</template>

آبان

۱۴۰۵

ش	ی	د	س	چ	پ	ج

Event Date, ۱۴۰۵ آبان

1405/8/1

آبان ۱۴۰۵

Examples

Sistem Penanggalan

Meng-import createCalendar akan menyertakan seluruh kalender yang tersedia ke dalam bundle Anda. Kalau Anda ingin membatasi kalender yang didukung demi memperkecil ukuran bundle, buatlah implementasi sendiri yang hanya meng-import kelas yang Anda butuhkan. Dengan begitu bundler bisa membuang implementasi kalender yang tidak terpakai.

Lihat @internationalized/date, terutama bagian Calendar Identifiers.

import { GregorianCalendar, JapaneseCalendar } from '@internationalized/date'

function createCalendar(identifier) {
  switch (identifier) {
    case 'gregory':
      return new GregorianCalendar()
    case 'japanese':
      return new JapaneseCalendar()
    default:
      throw new Error(`Unsupported calendar ${identifier}`)
  }
}

LocaleCalendar

October 2026

S	M	T	W	T	F	S

Event Date, October 2026

Pemilih Bulan dan Tahun

Pastikan Anda mengisi prop placeholder atau defaultPlaceholder saat memakai fitur ini.

Oct

2026

S	M	T	W	T	F	S

Event Date, October 2026

Dropdown

Pemilih Tanggal Lahir

Date of birth

Pemilih Tanggal dan Waktu

Date

Time

Pemilih Berbahasa Alami

Komponen ini memakai library chrono-node untuk membaca tanggal yang ditulis dalam bahasa sehari-hari.

Schedule Date

Your post will be published on October 25, 2026.

Heading dan Ukuran Sel Kustom

Custom heading

Oct

Event Date, October 2026

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias `@` — disiapkan `kliping init`
npm packages	`@internationalized/date@^3.12.3`, `@lucide/vue@^1.31.0`, `@vueuse/core@^14.4.0`, `reka-ui@^2.10.3`
Kliping items	`button`, `native-select`
Files	`components/ui/calendar/calendar.vue` `components/ui/calendar/calendar-cell.vue` `components/ui/calendar/calendar-cell-trigger.vue` `components/ui/calendar/calendar-grid.vue` `components/ui/calendar/calendar-grid-body.vue` `components/ui/calendar/calendar-grid-head.vue` `components/ui/calendar/calendar-grid-row.vue` `components/ui/calendar/calendar-head-cell.vue` `components/ui/calendar/calendar-header.vue` `components/ui/calendar/calendar-heading.vue` `components/ui/calendar/calendar-next-button.vue` `components/ui/calendar/calendar-prev-button.vue` `components/ui/calendar/index.ts`

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

vue

<Calendar />

Bagian lain yang tersedia: CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton.

API Reference

Calendar

Prop	Type	Default	Description
`defaultValue?`	`DateValue`	—	The default value for the calendar
`defaultPlaceholder?`	`DateValue`	—	The default placeholder date
`placeholder?`	`DateValue`	—	The placeholder date, which is used to determine what month to display when no date is selected
`pagedNavigation?`	`boolean`	—	This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month
`preventDeselect?`	`boolean`	—	Whether or not to prevent the user from deselecting a date without selecting another date first
`weekStartsOn?`	`WeekStartsOn`	—	The day of the week to start the calendar on
`weekdayFormat?`	`WeekDayFormat`	—	The format to use for the weekday strings provided via the weekdays slot prop
`calendarLabel?`	`string`	—	The accessible label for the calendar
`fixedWeeks?`	`boolean`	—	Whether or not to always display 6 weeks in the calendar
`maxValue?`	`DateValue`	—	The maximum date that can be selected
`minValue?`	`DateValue`	—	The minimum date that can be selected
`locale?`	`string`	—	The locale to use for formatting dates
`numberOfMonths?`	`number`	—	The number of months to display at once
`disabled?`	`boolean`	—	Whether the calendar is disabled
`readonly?`	`boolean`	—	Whether the calendar is readonly
`initialFocus?`	`boolean`	—	If true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted
`isDateDisabled?`	`Matcher`	—	A function that returns whether or not a date is disabled
`isDateUnavailable?`	`Matcher`	—	A function that returns whether or not a date is unavailable
`dir?`	`Direction`	—	The reading direction of the calendar when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`nextPage?`	`((placeholder: DateValue) => DateValue)`	—	A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component.
`prevPage?`	`((placeholder: DateValue) => DateValue)`	—	A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component.
`modelValue?`	`DateValue \| DateValue[]`	`undefined`	The controlled selected date value of the calendar. Can be bound as `v-model`.
`multiple?`	`boolean`	—	Whether multiple dates can be selected
`disableDaysOutsideCurrentView?`	`boolean`	—	Whether or not to disable days outside the current view.
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.
`layout?`	`LayoutTypes`	`undefined`	Heading dropdowns: "month-and-year", "month-only", or "year-only"; omitted shows a plain heading.
`yearRange?`	`DateValue[]`	—	Years offered in the year dropdown; defaults to 100 years back to 10 ahead, or min/max value.

Event	Payload	Description
`@update:modelValue`	`[date: DateValue \| undefined]`	Emitted when the value changes.
`@update:placeholder`	`[date: DateValue]`	Emitted when the placeholder date (the month in view) changes.

Slot	Props
`#calendar-prev-icon`	—
`#calendar-next-icon`	—
`#calendar-heading`	`{ date: DateValue; month: ReuseTemplateComponent<{ date: DateValue; }, Record<"default", undefined>>; year: ReuseTemplateComponent<{ date: DateValue; }, Record<"default", undefined>>; }`

Data attribute	Value
`[data-slot]`	`"calendar"`

CalendarCell

Prop	Type	Default	Description
`date`	`DateValue`	—	The date value for the cell
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"calendar-cell"`
`[data-selected]`	set at runtime

CalendarCellTrigger

Prop	Type	Default	Description
`day`	`DateValue`	—	The date value provided to the cell trigger
`month`	`DateValue`	—	The month in which the cell is rendered
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	`"button"`	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"calendar-cell-trigger"`
`[data-today]`	set at runtime
`[data-selected]`	set at runtime

CalendarGrid

Prop	Type	Default	Description
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"calendar-grid"`

CalendarGridBody

Prop	Type	Default	Description
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"calendar-grid-body"`

CalendarGridHead

Prop	Type	Default	Description
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"calendar-grid-head"`

CalendarGridRow

Prop	Type	Default	Description
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"calendar-grid-row"`

CalendarHeadCell

Prop	Type	Default	Description
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"calendar-head-cell"`

CalendarHeader

Prop	Type	Default	Description
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"calendar-header"`

CalendarHeading

Prop	Type	Default	Description
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	`{ headingValue: string; }`

Data attribute	Value
`[data-slot]`	`"calendar-heading"`

CalendarNextButton

Prop	Type	Default	Description
`nextPage?`	`((placeholder: DateValue) => DateValue)`	—	The function to be used for the next page. Overwrites the `nextPage` function set on the `CalendarRoot`.
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"calendar-next-button"`

CalendarPrevButton

Prop	Type	Default	Description
`prevPage?`	`((placeholder: DateValue) => DateValue)`	—	The function to be used for the prev page. Overwrites the `prevPage` function set on the `CalendarRoot`.
`asChild?`	`boolean`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`as?`	`AsTag \| Component`	—	The element or component this component should render as. Can be overwritten by `asChild`.

Slot	Props
`#default`	—

Data attribute	Value
`[data-slot]`	`"calendar-prev-button"`

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI Calendar yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
`Tab`	When focus moves onto the calendar, focuses the first navigation button.
`Space`	When the focus is on either `CalendarNext` or `CalendarPrev`, it navigates the calendar. Otherwise, it selects the date.
`Enter`	When the focus is on either `CalendarNext` or `CalendarPrev`, it navigates the calendar. Otherwise, it selects the date.
`ArrowLeft` + `ArrowRight` + `ArrowUp` + `ArrowDown`	When the focus is on `CalendarCellTrigger`, it navigates the dates, changing the month/year/decade if necessary.
`Home`	When the focus is on `CalendarCellTrigger`, it moves focus to the first day of the current week.
`End`	When the focus is on `CalendarCellTrigger`, it moves focus to the last day of the current week.
`PageUp`	When the focus is on `CalendarCellTrigger`, it moves to the previous month while preserving the day of the month when possible, or clamps to the last day of the month.
`PageDown`	When the focus is on `CalendarCellTrigger`, it moves to the next month while preserving the day of the month when possible, or clamps to the last day of the month.
`Shift+PageUp`	When the focus is on `CalendarCellTrigger`, it moves to the previous year while preserving the month and day when possible, or clamps to the last day of the month.
`Shift+PageDown`	When the focus is on `CalendarCellTrigger`, it moves to the next year while preserving the month and day when possible, or clamps to the last day of the month.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --accent, --accent-foreground, --destructive-foreground, --muted-foreground, --primary, --primary-foreground, --radius.

Changelog

19 Okt 2026 · Fixed — Aksesibilitas: nama aksesibel dan peran ARIA yang sah.

Credits

PreviousButton Group Next Card

Sun	Mon	Tue	Wed	Thu	Fri	Sat

Calendar

About ​

Installation ​

Usage ​

Sistem Penanggalan (Persia / Hijriah / Jalali, misalnya) ​

Examples ​

Sistem Penanggalan ​

Pemilih Bulan dan Tahun ​

Pemilih Tanggal Lahir ​

Pemilih Tanggal dan Waktu ​

Pemilih Berbahasa Alami ​

Heading dan Ukuran Sel Kustom ​

Requirements ​

Anatomy ​

API Reference ​

Calendar ​

CalendarCell ​

CalendarCellTrigger ​

CalendarGrid ​

CalendarGridBody ​

CalendarGridHead ​

CalendarGridRow ​

CalendarHeadCell ​

CalendarHeader ​

CalendarHeading ​

CalendarNextButton ​

CalendarPrevButton ​

Keyboard Interactions ​

CSS Variables ​

Changelog ​

Credits ​

About

Installation

Usage

Sistem Penanggalan (Persia / Hijriah / Jalali, misalnya)

Examples

Sistem Penanggalan

Pemilih Bulan dan Tahun

Pemilih Tanggal Lahir

Pemilih Tanggal dan Waktu

Pemilih Berbahasa Alami

Heading dan Ukuran Sel Kustom

Requirements

Anatomy

API Reference

Calendar

CalendarCell

CalendarCellTrigger

CalendarGrid

CalendarGridBody

CalendarGridHead

CalendarGridRow

CalendarHeadCell

CalendarHeader

CalendarHeading

CalendarNextButton

CalendarPrevButton

Keyboard Interactions

CSS Variables

Changelog

Credits