Aug

JanFebMarAprMayJunJulAugSepOctNovDec

2026

192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035

S	M	T	W	T	F	S

Event Date, August 2026

Tentang

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.

Instalasi

npx shadcn-vue@latest add calendar

Penggunaan

<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.

<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

<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/5/29

مرداد ۱۴۰۵

Contoh

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

August 2026

S	M	T	W	T	F	S

Event Date, August 2026

Pemilih Bulan dan Tahun

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

Aug

JanFebMarAprMayJunJulAugSepOctNovDec

2026

192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036

S	M	T	W	T	F	S

Event Date, August 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 August 22, 2026.

Heading dan Ukuran Sel Kustom

Custom heading

Aug

JanFebMarAprMayJunJulAugSepOctNovDec

Sun	Mon	Tue	Wed	Thu	Fri	Sat

Event Date, August 2026