[{"data":1,"prerenderedAt":758},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":405,"/docs/components/calendar":418,"surround-/docs/components/calendar":755},[4],{"title":5,"path":6,"stem":7,"children":8,"page":17},"Docs","/docs","docs",[9,90,353,360,366,379],{"path":6,"stem":7,"title":10,"type":11,"children":12},"Get Started","group",[13,19,44,48,52,70,74,78,82,86],{"title":14,"path":15,"stem":16,"new":17,"type":18,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",false,"page",{"title":20,"path":21,"stem":22,"children":23,"new":17,"type":11},"Installation","/docs/installation","docs/02.installation",[24,28,32,36,40],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite",{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":45,"path":46,"stem":47,"new":17,"type":18,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":49,"path":50,"stem":51,"new":17,"type":18,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":53,"path":54,"stem":55,"children":56,"new":17,"type":11},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[57,60,63,67],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":71,"path":72,"stem":73,"new":17,"type":18,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":75,"path":76,"stem":77,"new":17,"type":18,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":79,"path":80,"stem":81,"new":17,"type":18,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":83,"path":84,"stem":85,"new":17,"type":18,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":87,"path":88,"stem":89,"new":17,"type":18,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":91,"path":92,"stem":93,"children":94,"new":17,"type":11},"Components","/docs/components","docs/02.components",[95,100,104,108,112,116,120,124,128,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349],{"title":96,"path":97,"stem":98,"new":17,"type":99,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion","component",{"title":101,"path":102,"stem":103,"new":17,"type":99,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":105,"path":106,"stem":107,"new":17,"type":99,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":109,"path":110,"stem":111,"new":17,"type":99,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":113,"path":114,"stem":115,"new":17,"type":99,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":117,"path":118,"stem":119,"new":17,"type":99,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":121,"path":122,"stem":123,"new":17,"type":99,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":125,"path":126,"stem":127,"new":17,"type":99,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":129,"path":130,"stem":131,"new":132,"type":99,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",true,{"title":134,"path":135,"stem":136,"new":17,"type":99,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":138,"path":139,"stem":140,"new":17,"type":99,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":142,"path":143,"stem":144,"new":17,"type":99,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":146,"path":147,"stem":148,"new":17,"type":99,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":150,"path":151,"stem":152,"new":17,"type":99,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":154,"path":155,"stem":156,"new":17,"type":99,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":158,"path":159,"stem":160,"new":17,"type":99,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":162,"path":163,"stem":164,"new":17,"type":99,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":166,"path":167,"stem":168,"new":17,"type":99,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":170,"path":171,"stem":172,"new":17,"type":99,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":174,"path":175,"stem":176,"new":17,"type":99,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":178,"path":179,"stem":180,"new":17,"type":99,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":182,"path":183,"stem":184,"new":17,"type":99,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":186,"path":187,"stem":188,"new":17,"type":99,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":190,"path":191,"stem":192,"new":132,"type":99,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":194,"path":195,"stem":196,"new":132,"type":99,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":198,"path":199,"stem":200,"new":17,"type":99,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":202,"path":203,"stem":204,"new":17,"type":99,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":206,"path":207,"stem":208,"new":17,"type":99,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":210,"path":211,"stem":212,"new":132,"type":99,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":214,"path":215,"stem":216,"new":17,"type":99,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":218,"path":219,"stem":220,"new":132,"type":99,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":222,"path":223,"stem":224,"new":132,"type":99,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":226,"path":227,"stem":228,"new":17,"type":99,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":230,"path":231,"stem":232,"new":17,"type":99,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":234,"path":235,"stem":236,"new":132,"type":99,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":238,"path":239,"stem":240,"new":17,"type":99,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":242,"path":243,"stem":244,"new":17,"type":99,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":246,"path":247,"stem":248,"new":17,"type":99,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":250,"path":251,"stem":252,"new":17,"type":99,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":254,"path":255,"stem":256,"new":17,"type":99,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":258,"path":259,"stem":260,"new":17,"type":99,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":262,"path":263,"stem":264,"new":17,"type":99,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":266,"path":267,"stem":268,"new":17,"type":99,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":270,"path":271,"stem":272,"new":17,"type":99,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":274,"path":275,"stem":276,"new":17,"type":99,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":278,"path":279,"stem":280,"new":17,"type":99,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":282,"path":283,"stem":284,"new":17,"type":99,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":286,"path":287,"stem":288,"new":17,"type":99,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":290,"path":291,"stem":292,"new":17,"type":99,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":294,"path":295,"stem":296,"new":17,"type":99,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":298,"path":299,"stem":300,"new":17,"type":99,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":302,"path":303,"stem":304,"new":17,"type":99,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":306,"path":307,"stem":308,"new":132,"type":99,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":310,"path":311,"stem":312,"new":17,"type":99,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":314,"path":315,"stem":316,"new":17,"type":99,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":318,"path":319,"stem":320,"new":17,"type":99,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":322,"path":323,"stem":324,"new":17,"type":99,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":326,"path":327,"stem":328,"new":17,"type":99,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":330,"path":331,"stem":332,"new":17,"type":99,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":334,"path":335,"stem":336,"new":17,"type":99,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":338,"path":339,"stem":340,"new":17,"type":99,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":342,"path":343,"stem":344,"new":17,"type":99,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":346,"path":347,"stem":348,"new":17,"type":99,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":350,"path":351,"stem":352,"new":17,"type":99,"children":-1},"Typography","/docs/components/typography","docs/components/typography",{"title":20,"path":21,"stem":22,"children":354,"new":17,"type":11},[355,356,357,358,359],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},{"title":53,"path":54,"stem":55,"children":361,"new":17,"type":11},[362,363,364,365],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},{"title":367,"path":368,"stem":369,"children":370,"new":17,"type":11},"Forms","/docs/forms","docs/forms",[371,375],{"title":372,"path":373,"stem":374,"new":17,"type":18,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":376,"path":377,"stem":378,"new":17,"type":18,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":380,"path":381,"stem":382,"children":383,"new":17,"type":11},"Registry","/docs/registry","docs/registry/index",[384,385,389,393,397,401],{"title":380,"path":381,"stem":382,"new":17,"type":18,"children":-1},{"title":386,"path":387,"stem":388,"new":17,"type":18,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":390,"path":391,"stem":392,"new":17,"type":18,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":394,"path":395,"stem":396,"new":17,"type":18,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":398,"path":399,"stem":400,"new":17,"type":18,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":402,"path":403,"stem":404,"new":17,"type":18,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"repo":406},{"id":407,"name":408,"repo":409,"description":410,"createdAt":411,"updatedAt":412,"pushedAt":413,"stars":414,"watchers":415,"forks":416,"defaultBranch":417},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-04-06T17:33:41Z","2026-04-06T17:33:39Z",9706,37,634,"dev",{"id":419,"title":134,"body":420,"description":746,"extension":747,"links":748,"meta":751,"navigation":132,"new":17,"path":135,"rawbody":752,"seo":753,"stem":136,"__hash__":754},"content/docs/components/calendar.md",{"type":421,"value":422,"toc":730},"minimark",[423,428,433,456,463,466,530,534,543,547,556,580,588,594,601,606,613,622,626,629,634,641,658,666,674,678,686,690,694,698,702,706,710,717,721,725],[424,425],"component-preview",{"description":426,"name":427},"A calendar component.","CalendarDemo",[429,430,432],"h2",{"id":431},"about","About",[434,435,436,437,441,442,449,450,455],"p",{},"The ",[438,439,440],"code",{},"\u003CCalendar />"," component is built on top of the ",[443,444,448],"a",{"href":445,"rel":446},"https://www.reka-ui.com/docs/components/calendar",[447],"nofollow","Reka UI Calendar"," component, which uses the ",[443,451,454],{"href":452,"rel":453},"https://react-spectrum.adobe.com/internationalized/date/index.html",[447],"@internationalized/date"," package to handle dates.",[434,457,458,459,462],{},"If you're looking for a range calendar, check out the ",[443,460,266],{"href":461},"./range-calendar"," component.",[429,464,20],{"id":465},"installation",[467,468,469,484,497],"code-tabs",{},[470,471,472,478],"tabs-list",{},[473,474,476],"tabs-trigger",{"value":475},"cli",[434,477,71],{},[473,479,481],{"value":480},"manual",[434,482,483],{},"Manual",[485,486,487],"tabs-content",{"value":475},[488,489,495],"pre",{"className":490,"code":492,"language":493,"meta":494},[491],"language-bash","npx shadcn-vue@latest add calendar\n","bash","",[438,496,492],{"__ignoreMap":494},[485,498,499],{"value":480},[500,501,502,508,514,525],"steps",{},[503,504,505],"step",{},[434,506,507],{},"Install the following dependencies:",[488,509,512],{"className":510,"code":511,"language":493,"meta":494},[491],"npm install reka-ui\n",[438,513,511],{"__ignoreMap":494},[503,515,516],{},[434,517,518,519,524],{},"Copy and paste the ",[443,520,523],{"href":521,"rel":522},"https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/calendar",[447],"GitHub source code"," into your project.",[503,526,527],{},[434,528,529],{},"Update the import paths to match your project setup.",[429,531,533],{"id":532},"usage","Usage",[488,535,541],{"className":536,"code":538,"language":539,"meta":540},[537],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { Calendar } from '@/components/ui/calendar'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CCalendar />\n\u003C/template>\n","vue","showLineNumbers",[438,542,538],{"__ignoreMap":494},[429,544,546],{"id":545},"calendar-systems-persian-hijri-jalali-for-example","Calendar Systems (Persian / Hijri / Jalali for example)",[434,548,549,552,553,555],{},[443,550,454],{"href":452,"rel":551},[447]," Supports 13 calendar systems\nHere, we'll use the Persian calendar as an example to show how to use calendar systems with the ",[438,554,440],{}," component or any other Calendar components.",[434,557,558,559,562,563,566,567,573,574,579],{},"The default calendar system is ",[438,560,561],{},"gregory",".",[564,565],"br",{},"\nTo use a different calendar system, you need to provide a value with the desired system through the ",[568,569,570],"strong",{},[438,571,572],{},"defaultPlaceholder"," or ",[568,575,576],{},[438,577,578],{},"placeholder"," props.",[434,581,582,583,573,585,587],{},"It's recommended to add either the ",[438,584,578],{},[438,586,572],{}," to the component even if you don't use any other calendar system",[488,589,592],{"className":590,"code":591,"language":539,"meta":494},[537],"\u003Cscript setup lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\nimport { getLocalTimeZone, PersianCalendar, toCalendar, today } from '@internationalized/date'\nimport { Calendar } from '@/registry/new-york-v4/ui/calendar'\n\nconst date = ref(today(getLocalTimeZone())) as Ref\u003CDateValue> // no need to add calendar identifier to modelValue when using placeholder\n\nconst placeholder = ref(toCalendar(today(getLocalTimeZone()), new PersianCalendar())) as Ref\u003CDateValue>\n// or\nconst defaultPlaceholder = toCalendar(today(getLocalTimeZone()))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CCalendar\n    v-model=\"date\"\n    v-model:placeholder=\"placeholder\"\n    locale=\"fa-IR\"\n  />\n  \u003C!-- or -->\n  \u003CCalendar\n    v-model=\"date\"\n    :default-placeholder=\"placeholder\"\n    locale=\"fa-IR\"\n  />\n\u003C/template>\n",[438,593,591],{"__ignoreMap":494},[434,595,596,597,600],{},"If none of these props are provided, the emitted dates will use the ",[438,598,599],{},"gregorian"," calendar by default, since it is the most widely used system.",[434,602,603,604],{},"The emitted value from the Calendar component will vary depending on the specified calendar system identifier. ",[564,605],{},[434,607,608,609,612],{},"You can also change the locale using the ",[438,610,611],{},"locale"," prop to match the calendar system interface.",[614,615,616],"code-collapsible-wrapper",{},[488,617,620],{"className":618,"code":619,"language":539,"meta":540},[537],"\u003Cscript setup lang=\"ts\">\nimport {\n  CalendarDate,\n  fromDate,\n  getLocalTimeZone,\n  parseDate,\n  PersianCalendar,\n  toCalendar,\n  today\n} from '@internationalized/date'\nimport { ref } from 'vue'\n\nconst date = ref(toCalendar(new CalendarDate(2025, 1, 1), new PersianCalendar()))\n// or\nconst date = ref(toCalendar(parseDate('2022-02-03'), new PersianCalendar()))\n// or\nconst date = ref(toCalendar(today(getLocalTimeZone()), new PersianCalendar()))\n// or\nconst date = ref(new CalendarDate(new PersianCalendar(), 1404, 1, 1))\n// or\nconst date = ref(toCalendar(fromDate(new Date(), getLocalTimeZone()), new PersianCalendar()))\n\nconst placeholder = ref(toCalendar(today(getLocalTimeZone()), new PersianCalendar()))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CCalendar\n    v-model=\"date\"\n    v-model:placeholder=\"placeholder\"\n    locale=\"fa-IR\"\n    dir=\"rtl\"\n  />\n\u003C/template>\n",[438,621,619],{"__ignoreMap":494},[424,623],{"description":624,"name":625},"A Persian calendar.","CalendarPersianDemo",[429,627,386],{"id":628},"examples",[630,631,633],"h3",{"id":632},"calendar-systems","Calendar Systems",[434,635,636,637,640],{},"importing ",[438,638,639],{},"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. This way, your bundler can tree-shake the unused calendar implementations.",[434,642,643,644,650,651,562],{},"Check ",[443,645,648],{"href":646,"rel":647},"https://react-spectrum.adobe.com/internationalized/date/",[447],[438,649,454],{},", especially the section on ",[443,652,655],{"href":653,"rel":654},"https://react-spectrum.adobe.com/internationalized/date/Calendar.html#calendar-identifiers",[447],[568,656,657],{},"Calendar Identifiers",[488,659,664],{"className":660,"code":662,"language":663,"meta":494},[661],"language-ts","import { GregorianCalendar, JapaneseCalendar } from '@internationalized/date'\n\nfunction createCalendar(identifier) {\n  switch (identifier) {\n    case 'gregory':\n      return new GregorianCalendar()\n    case 'japanese':\n      return new JapaneseCalendar()\n    default:\n      throw new Error(`Unsupported calendar ${identifier}`)\n  }\n}\n","ts",[438,665,662],{"__ignoreMap":494},[424,667],{"description":668,"name":669,"title":670,"className":671},"A calendar with multiple calendar systems","CalendarSystems","Calendar systems",[672,673],"**:[.preview]:h-[560px]","mt-8",[630,675,677],{"id":676},"month-and-year-selector","Month and Year Selector",[434,679,680,681,573,683,685],{},"Make sure to pass either the ",[438,682,578],{},[438,684,572],{}," prop when using this feature.",[424,687],{"description":688,"name":689,"title":677},"A calendar with month and year dropdowns.","CalendarYearAndMonthSelector",[630,691,693],{"id":692},"date-of-birth-picker","Date of Birth Picker",[424,695],{"description":696,"name":697,"title":693},"A calendar with date of birth picker.","CalendarDateBirth",[630,699,701],{"id":700},"date-and-time-picker","Date and Time Picker",[424,703],{"description":704,"name":705,"title":701},"A calendar with date and time picker.","CalendarDateAndTimePicker",[630,707,709],{"id":708},"natural-language-picker","Natural Language Picker",[434,711,712,713,716],{},"This component uses the ",[438,714,715],{},"chrono-node"," library to parse natural language dates.",[424,718],{"description":719,"name":720,"title":709},"A calendar with natural language picker.","CalendarNaturalLanguagePicker",[630,722,724],{"id":723},"custom-heading-and-cell-size","Custom Heading and Cell Size",[424,726],{"description":727,"name":728,"title":724,"className":729},"A calendar with custom cell size that's responsive.","CalendarCustomCellSize",[672],{"title":494,"searchDepth":731,"depth":731,"links":732},2,[733,734,735,736,737],{"id":431,"depth":731,"text":432},{"id":465,"depth":731,"text":20},{"id":532,"depth":731,"text":533},{"id":545,"depth":731,"text":546},{"id":628,"depth":731,"text":386,"children":738},[739,741,742,743,744,745],{"id":632,"depth":740,"text":633},3,{"id":676,"depth":740,"text":677},{"id":692,"depth":740,"text":693},{"id":700,"depth":740,"text":701},{"id":708,"depth":740,"text":709},{"id":723,"depth":740,"text":724},"A date field component that allows users to enter and edit date.","md",{"doc":749,"api":750},"https://reka-ui.com/docs/components/calendar","https://reka-ui.com/docs/components/calendar#api-reference",{"component":132},"---\ntitle: Calendar\ndescription: A date field component that allows users to enter and edit date.\ncomponent: true\nlinks:\n  doc: https://reka-ui.com/docs/components/calendar\n  api: https://reka-ui.com/docs/components/calendar#api-reference\n---\n\n::component-preview\n---\nname: CalendarDemo\ndescription: A calendar component.\n---\n::\n\n## About\n\nThe `\u003CCalendar />` component is built on top of the [Reka UI Calendar](https://www.reka-ui.com/docs/components/calendar) component, which uses the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package to handle dates.\n\nIf you're looking for a range calendar, check out the [Range Calendar](./range-calendar.md) component.\n\n## Installation\n\n::code-tabs\n\n::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx shadcn-vue@latest add calendar\n```\n\n::\n\n::tabs-content{value=\"manual\"}\n  ::steps\n    ::step\n    Install the following dependencies:\n    ::\n\n    ```bash\n    npm install reka-ui\n    ```\n\n    ::step\n    Copy and paste the [GitHub source code](https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/calendar) into your project.\n    ::\n\n    ::step\n    Update the import paths to match your project setup.\n    ::\n  ::\n::\n\n::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { Calendar } from '@/components/ui/calendar'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CCalendar />\n\u003C/template>\n```\n\n## Calendar Systems (Persian / Hijri / Jalali for example)\n\n[@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) Supports 13 calendar systems\nHere, we'll use the Persian calendar as an example to show how to use calendar systems with the `\u003CCalendar />` component or any other Calendar components.\n\nThe default calendar system is `gregory`.\u003Cbr/>\nTo use a different calendar system, you need to provide a value with the desired system through the **`defaultPlaceholder`** or **`placeholder`** props.\n\nIt's recommended to add either the `placeholder` or `defaultPlaceholder` to the component even if you don't use any other calendar system\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport type { DateValue } from '@internationalized/date'\nimport { getLocalTimeZone, PersianCalendar, toCalendar, today } from '@internationalized/date'\nimport { Calendar } from '@/registry/new-york-v4/ui/calendar'\n\nconst date = ref(today(getLocalTimeZone())) as Ref\u003CDateValue> // no need to add calendar identifier to modelValue when using placeholder\n\nconst placeholder = ref(toCalendar(today(getLocalTimeZone()), new PersianCalendar())) as Ref\u003CDateValue>\n// or\nconst defaultPlaceholder = toCalendar(today(getLocalTimeZone()))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CCalendar\n    v-model=\"date\"\n    v-model:placeholder=\"placeholder\"\n    locale=\"fa-IR\"\n  />\n  \u003C!-- or -->\n  \u003CCalendar\n    v-model=\"date\"\n    :default-placeholder=\"placeholder\"\n    locale=\"fa-IR\"\n  />\n\u003C/template>\n```\n\nIf none of these props are provided, the emitted dates will use the `gregorian` calendar by default, since it is the most widely used system.\n\nThe emitted value from the Calendar component will vary depending on the specified calendar system identifier. \u003Cbr />\n\nYou can also change the locale using the `locale` prop to match the calendar system interface.\n\n::code-collapsible-wrapper\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport {\n  CalendarDate,\n  fromDate,\n  getLocalTimeZone,\n  parseDate,\n  PersianCalendar,\n  toCalendar,\n  today\n} from '@internationalized/date'\nimport { ref } from 'vue'\n\nconst date = ref(toCalendar(new CalendarDate(2025, 1, 1), new PersianCalendar()))\n// or\nconst date = ref(toCalendar(parseDate('2022-02-03'), new PersianCalendar()))\n// or\nconst date = ref(toCalendar(today(getLocalTimeZone()), new PersianCalendar()))\n// or\nconst date = ref(new CalendarDate(new PersianCalendar(), 1404, 1, 1))\n// or\nconst date = ref(toCalendar(fromDate(new Date(), getLocalTimeZone()), new PersianCalendar()))\n\nconst placeholder = ref(toCalendar(today(getLocalTimeZone()), new PersianCalendar()))\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CCalendar\n    v-model=\"date\"\n    v-model:placeholder=\"placeholder\"\n    locale=\"fa-IR\"\n    dir=\"rtl\"\n  />\n\u003C/template>\n```\n\n::\n\n::component-preview\n---\nname: CalendarPersianDemo\ndescription: A Persian calendar.\n---\n::\n\n## Examples\n\n### Calendar Systems\n\nimporting `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. This way, your bundler can tree-shake the unused calendar implementations.\n\nCheck [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/), especially the section on [**Calendar Identifiers**](https://react-spectrum.adobe.com/internationalized/date/Calendar.html#calendar-identifiers).\n\n```ts\nimport { GregorianCalendar, JapaneseCalendar } from '@internationalized/date'\n\nfunction createCalendar(identifier) {\n  switch (identifier) {\n    case 'gregory':\n      return new GregorianCalendar()\n    case 'japanese':\n      return new JapaneseCalendar()\n    default:\n      throw new Error(`Unsupported calendar ${identifier}`)\n  }\n}\n```\n\n::component-preview\n---\nname: CalendarSystems\ntitle: Calendar systems\ndescription: A calendar with multiple calendar systems\nclass: '**:[.preview]:h-[560px] mt-8'\n---\n::\n\n### Month and Year Selector\n\nMake sure to pass either the `placeholder` or `defaultPlaceholder` prop when using this feature.\n\n::component-preview\n---\nname: CalendarYearAndMonthSelector\ntitle: Month and Year Selector\ndescription: A calendar with month and year dropdowns.\n---\n::\n\n### Date of Birth Picker\n\n::component-preview\n---\nname: CalendarDateBirth\ntitle: Date of Birth Picker\ndescription: A calendar with date of birth picker.\n---\n::\n\n### Date and Time Picker\n\n::component-preview\n---\nname: CalendarDateAndTimePicker\ntitle: Date and Time Picker\ndescription: A calendar with date and time picker.\n---\n::\n\n### Natural Language Picker\n\nThis component uses the `chrono-node` library to parse natural language dates.\n\n::component-preview\n---\nname: CalendarNaturalLanguagePicker\ntitle: Natural Language Picker\ndescription: A calendar with natural language picker.\n---\n::\n\n### Custom Heading and Cell Size\n\n::component-preview\n---\nname: CalendarCustomCellSize\ntitle: Custom Heading and Cell Size\ndescription: A calendar with custom cell size that's responsive.\nclass: '**:[.preview]:h-[560px]'\n---\n::\n",{"title":134,"description":746},"QzpYiem6LKOUko6XWUllXd4fYe8RjC2LCMwW0Z9GWuI",[756,757],{"title":129,"path":130,"stem":131,"children":-1},{"title":138,"path":139,"stem":140,"children":-1},1775649981505]