[{"data":1,"prerenderedAt":1245},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-migration":170,"-getting-started-migration-surround":1240},[4,30,110,150,155],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Usage","\u002Fgetting-started\u002Fusage","1.getting-started\u002F3.usage","i-lucide-play",{"title":26,"path":27,"stem":28,"icon":29},"Migrate from 2.x","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F4.migration","i-lucide-arrow-right-left",{"title":31,"path":32,"stem":33,"children":34,"page":6},"Essentials","\u002Fessentials","2.essentials",[35,40,45,50,55,60,65,70,75,80,85,90,95,100,105],{"title":36,"path":37,"stem":38,"icon":39},"Selection modes","\u002Fessentials\u002Fselection-modes","2.essentials\u002F01.selection-modes","i-lucide-mouse-pointer-click",{"title":41,"path":42,"stem":43,"icon":44},"Multiple calendars","\u002Fessentials\u002Fmultiple-calendars","2.essentials\u002F02.multiple-calendars","i-lucide-columns-2",{"title":46,"path":47,"stem":48,"icon":49},"Time picker","\u002Fessentials\u002Ftime-picker","2.essentials\u002F03.time-picker","i-lucide-clock",{"title":51,"path":52,"stem":53,"icon":54},"Limits and availability","\u002Fessentials\u002Flimits-and-availability","2.essentials\u002F04.limits-and-availability","i-lucide-ban",{"title":56,"path":57,"stem":58,"icon":59},"Marking","\u002Fessentials\u002Fmarking","2.essentials\u002F05.marking","i-lucide-bookmark",{"title":61,"path":62,"stem":63,"icon":64},"Layout and names","\u002Fessentials\u002Flayout-and-names","2.essentials\u002F06.layout-and-names","i-lucide-layout-template",{"title":66,"path":67,"stem":68,"icon":69},"Theming","\u002Fessentials\u002Ftheming","2.essentials\u002F07.theming","i-lucide-palette",{"title":71,"path":72,"stem":73,"icon":74},"Keyboard","\u002Fessentials\u002Fkeyboard","2.essentials\u002F08.keyboard","i-lucide-keyboard",{"title":76,"path":77,"stem":78,"icon":79},"Typeable input","\u002Fessentials\u002Ftypeable-input","2.essentials\u002F09.typeable-input","i-lucide-text-cursor-input",{"title":81,"path":82,"stem":83,"icon":84},"Locale and labels","\u002Fessentials\u002Flocale","2.essentials\u002F10.locale","i-lucide-languages",{"title":86,"path":87,"stem":88,"icon":89},"Presets","\u002Fessentials\u002Fpresets","2.essentials\u002F11.presets","i-lucide-zap",{"title":91,"path":92,"stem":93,"icon":94},"Accessibility","\u002Fessentials\u002Faccessibility","2.essentials\u002F12.accessibility","i-lucide-accessibility",{"title":96,"path":97,"stem":98,"icon":99},"Props","\u002Fessentials\u002Fprops","2.essentials\u002F13.props","i-lucide-list",{"title":101,"path":102,"stem":103,"icon":104},"Events","\u002Fessentials\u002Fevents","2.essentials\u002F14.events","i-lucide-radio",{"title":106,"path":107,"stem":108,"icon":109},"Slots","\u002Fessentials\u002Fslots","2.essentials\u002F15.slots","i-lucide-puzzle",{"title":111,"icon":112,"path":113,"stem":114,"children":115,"page":6},"Examples","i-lucide-layout-grid","\u002Fexamples","3.examples",[116,119,122,126,129,132,136,139,143,146],{"title":36,"path":117,"stem":118,"icon":39},"\u002Fexamples\u002Fselection-modes","3.examples\u002F01.selection-modes",{"title":41,"path":120,"stem":121,"icon":44},"\u002Fexamples\u002Fmultiple-calendars","3.examples\u002F02.multiple-calendars",{"title":123,"path":124,"stem":125,"icon":79},"Modal and typeable inputs","\u002Fexamples\u002Fmodal-and-inputs","3.examples\u002F03.modal-and-inputs",{"title":46,"path":127,"stem":128,"icon":49},"\u002Fexamples\u002Ftime-picker","3.examples\u002F04.time-picker",{"title":51,"path":130,"stem":131,"icon":54},"\u002Fexamples\u002Flimits-and-availability","3.examples\u002F05.limits-and-availability",{"title":133,"path":134,"stem":135,"icon":59},"Marking and layout","\u002Fexamples\u002Fmarking","3.examples\u002F06.marking",{"title":106,"path":137,"stem":138,"icon":109},"\u002Fexamples\u002Fslots","3.examples\u002F07.slots",{"title":140,"path":141,"stem":142,"icon":89},"Range presets","\u002Fexamples\u002Fpresets","3.examples\u002F08.presets",{"title":81,"path":144,"stem":145,"icon":84},"\u002Fexamples\u002Flocale","3.examples\u002F09.locale",{"title":147,"path":148,"stem":149,"icon":69},"Theming and dark mode","\u002Fexamples\u002Ftheming-and-dark-mode","3.examples\u002F10.theming-and-dark-mode",{"title":151,"path":152,"stem":153,"icon":154},"Playground","\u002Fplayground","4.playground","i-lucide-sliders-horizontal",{"title":156,"path":157,"stem":158,"children":159,"page":6},"Community","\u002Fcommunity","5.community",[160,165],{"title":161,"path":162,"stem":163,"icon":164},"Contributing","\u002Fcommunity\u002Fcontributing","5.community\u002F1.contributing","i-lucide-git-pull-request",{"title":166,"path":167,"stem":168,"icon":169},"Changelog","\u002Fcommunity\u002Fchangelog","5.community\u002F2.changelog","i-lucide-history",{"id":171,"title":26,"body":172,"description":1233,"extension":1234,"links":1235,"meta":1236,"navigation":1237,"path":27,"seo":1238,"stem":28,"__hash__":1239},"docs\u002F1.getting-started\u002F4.migration.md",{"type":173,"value":174,"toc":1222},"minimark",[175,184,199,224,229,279,283,300,468,499,503,506,528,534,573,577,587,666,676,680,687,739,742,978,991,995,1019,1023,1040,1094,1098,1101,1143,1181,1185,1211,1218],[176,177,178,179,183],"p",{},"3.x is a Vue 3 build of the same component. Every 2.x prop, event, slot, ",[180,181,182],"code",{},"vfc-*"," class and value shape is still there. Most apps change a few lines.",[176,185,186,187,190,191,194,195,198],{},"The ",[180,188,189],{},"3.0.0"," release on npm was a Vue 2 build, so a ",[180,192,193],{},"^3.0.0"," range may resolve to it. Vue 2 apps pin ",[180,196,197],{},"^2.10.0",":",[200,201,206],"pre",{"className":202,"code":203,"language":204,"meta":205,"style":205},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install vue-functional-calendar@^2.10.0\n","bash","",[180,207,208],{"__ignoreMap":205},[209,210,213,217,221],"span",{"class":211,"line":212},"line",1,[209,214,216],{"class":215},"sBMFI","npm",[209,218,220],{"class":219},"sfazB"," install",[209,222,223],{"class":219}," vue-functional-calendar@^2.10.0\n",[225,226,228],"h2",{"id":227},"steps","Steps",[230,231,232,240,246,252,258,272],"ol",{},[233,234,235,236,239],"li",{},"Upgrade to Vue ",[180,237,238],{},"^3.3.0",".",[233,241,242,243,239],{},"Install the package: ",[180,244,245],{},"npm install vue-functional-calendar@^3.1.0",[233,247,248,249,239],{},"Import the stylesheet once: ",[180,250,251],{},"import 'vue-functional-calendar\u002Fstyle.css'",[233,253,254,255,239],{},"Register the plugin with ",[180,256,257],{},"app.use",[233,259,260,261,264,265,268,269,239],{},"Rename ",[180,262,263],{},"value"," and ",[180,266,267],{},"input"," if you use them without ",[180,270,271],{},"v-model",[233,273,274,275,278],{},"Replace SCSS variable overrides with ",[180,276,277],{},"--vfc-*"," tokens.",[225,280,281],{"id":271},[180,282,271],{},[176,284,285,264,287,289,290,264,293,296,297,299],{},[180,286,263],{},[180,288,267],{}," became ",[180,291,292],{},"modelValue",[180,294,295],{},"update:modelValue",". A template that uses ",[180,298,271],{}," needs no change.",[200,301,305],{"className":302,"code":303,"language":304,"meta":205,"style":205},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- 2.x and 3.x -->\n\u003CFunctionalCalendar v-model=\"calendarData\" is-date-range \u002F>\n\n\u003C!-- 2.x, without v-model -->\n\u003CFunctionalCalendar :value=\"calendarData\" @input=\"calendarData = $event\" \u002F>\n\n\u003C!-- 3.x, without v-model -->\n\u003CFunctionalCalendar\n  :model-value=\"calendarData\"\n  @update:model-value=\"calendarData = $event\"\n\u002F>\n","vue",[180,306,307,313,346,353,359,400,405,411,419,437,462],{"__ignoreMap":205},[209,308,309],{"class":211,"line":212},[209,310,312],{"class":311},"sHwdD","\u003C!-- 2.x and 3.x -->\n",[209,314,316,320,324,328,331,334,338,340,343],{"class":211,"line":315},2,[209,317,319],{"class":318},"sMK4o","\u003C",[209,321,323],{"class":322},"swJcz","FunctionalCalendar",[209,325,327],{"class":326},"spNyl"," v-model",[209,329,330],{"class":318},"=",[209,332,333],{"class":318},"\"",[209,335,337],{"class":336},"sTEyZ","calendarData",[209,339,333],{"class":318},[209,341,342],{"class":326}," is-date-range",[209,344,345],{"class":318}," \u002F>\n",[209,347,349],{"class":211,"line":348},3,[209,350,352],{"emptyLinePlaceholder":351},true,"\n",[209,354,356],{"class":211,"line":355},4,[209,357,358],{"class":311},"\u003C!-- 2.x, without v-model -->\n",[209,360,362,364,366,369,371,373,375,377,379,382,384,386,388,391,393,396,398],{"class":211,"line":361},5,[209,363,319],{"class":318},[209,365,323],{"class":322},[209,367,368],{"class":318}," :",[209,370,263],{"class":326},[209,372,330],{"class":318},[209,374,333],{"class":318},[209,376,337],{"class":336},[209,378,333],{"class":318},[209,380,381],{"class":318}," @",[209,383,267],{"class":326},[209,385,330],{"class":318},[209,387,333],{"class":318},[209,389,390],{"class":336},"calendarData ",[209,392,330],{"class":318},[209,394,395],{"class":336}," $event",[209,397,333],{"class":318},[209,399,345],{"class":318},[209,401,403],{"class":211,"line":402},6,[209,404,352],{"emptyLinePlaceholder":351},[209,406,408],{"class":211,"line":407},7,[209,409,410],{"class":311},"\u003C!-- 3.x, without v-model -->\n",[209,412,414,416],{"class":211,"line":413},8,[209,415,319],{"class":318},[209,417,418],{"class":322},"FunctionalCalendar\n",[209,420,422,425,428,430,432,434],{"class":211,"line":421},9,[209,423,424],{"class":318},"  :",[209,426,427],{"class":326},"model-value",[209,429,330],{"class":318},[209,431,333],{"class":318},[209,433,337],{"class":336},[209,435,436],{"class":318},"\"\n",[209,438,440,443,446,448,450,452,454,456,458,460],{"class":211,"line":439},10,[209,441,442],{"class":318},"  @",[209,444,445],{"class":326},"update",[209,447,198],{"class":318},[209,449,427],{"class":326},[209,451,330],{"class":318},[209,453,333],{"class":318},[209,455,390],{"class":336},[209,457,330],{"class":318},[209,459,395],{"class":336},[209,461,436],{"class":318},[209,463,465],{"class":211,"line":464},11,[209,466,467],{"class":336},"\u002F>\n",[176,469,470,471,474,475,474,478,474,481,474,484,474,487,474,490,474,493,264,496,239],{},"The value object has the same shape: ",[180,472,473],{},"currentDate",", ",[180,476,477],{},"selectedDate",[180,479,480],{},"selectedDateTime",[180,482,483],{},"selectedHour",[180,485,486],{},"selectedMinute",[180,488,489],{},"selectedDatesItem",[180,491,492],{},"selectedDates",[180,494,495],{},"dateRange",[180,497,498],{},"multipleDateRange",[225,500,502],{"id":501},"styles","Styles",[176,504,505],{},"The CSS is a separate file. Import it once.",[200,507,511],{"className":508,"code":509,"language":510,"meta":205,"style":205},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import 'vue-functional-calendar\u002Fstyle.css'\n","js",[180,512,513],{"__ignoreMap":205},[209,514,515,519,522,525],{"class":211,"line":212},[209,516,518],{"class":517},"s7zQu","import",[209,520,521],{"class":318}," '",[209,523,524],{"class":219},"vue-functional-calendar\u002Fstyle.css",[209,526,527],{"class":318},"'\n",[176,529,530,531,533],{},"Your 2.x CSS overrides keep working, because the ",[180,532,182],{}," class names are unchanged. The default look changed, so check your overrides against it.",[176,535,536,537,540,541,544,545,474,548,474,551,554,555,558,559,562,563,474,566,264,569,572],{},"Vue 3 renamed the transition class ",[180,538,539],{},"-enter"," to ",[180,542,543],{},"-enter-from",". An override of ",[180,546,547],{},".vfc-calendar-slide-left-enter",[180,549,550],{},"-right-enter",[180,552,553],{},"-up-enter"," or ",[180,556,557],{},"-down-enter"," must now target ",[180,560,561],{},".vfc-calendar-slide-left-enter-from"," and so on. The ",[180,564,565],{},"-enter-active",[180,567,568],{},"-leave-active",[180,570,571],{},"-leave-to"," classes keep their names.",[225,574,576],{"id":575},"registration","Registration",[176,578,579,580,583,584,586],{},"Vue 2 used ",[180,581,582],{},"Vue.use",". Vue 3 uses ",[180,585,257],{},", and the options still become global defaults.",[200,588,590],{"className":508,"code":589,"language":510,"meta":205,"style":205},"\u002F\u002F 2.x\nVue.use(FunctionalCalendar, { showWeekNumbers: true })\n\n\u002F\u002F 3.x\napp.use(FunctionalCalendar, { showWeekNumbers: true })\n",[180,591,592,597,632,636,641],{"__ignoreMap":205},[209,593,594],{"class":211,"line":212},[209,595,596],{"class":311},"\u002F\u002F 2.x\n",[209,598,599,602,604,608,611,614,617,620,622,626,629],{"class":211,"line":315},[209,600,601],{"class":336},"Vue",[209,603,239],{"class":318},[209,605,607],{"class":606},"s2Zo4","use",[209,609,610],{"class":336},"(FunctionalCalendar",[209,612,613],{"class":318},",",[209,615,616],{"class":318}," {",[209,618,619],{"class":322}," showWeekNumbers",[209,621,198],{"class":318},[209,623,625],{"class":624},"sfNiH"," true",[209,627,628],{"class":318}," }",[209,630,631],{"class":336},")\n",[209,633,634],{"class":211,"line":348},[209,635,352],{"emptyLinePlaceholder":351},[209,637,638],{"class":211,"line":355},[209,639,640],{"class":311},"\u002F\u002F 3.x\n",[209,642,643,646,648,650,652,654,656,658,660,662,664],{"class":211,"line":361},[209,644,645],{"class":336},"app",[209,647,239],{"class":318},[209,649,607],{"class":606},[209,651,610],{"class":336},[209,653,613],{"class":318},[209,655,616],{"class":318},[209,657,619],{"class":322},[209,659,198],{"class":318},[209,661,625],{"class":624},[209,663,628],{"class":318},[209,665,631],{"class":336},[176,667,668,669,264,672,675],{},"Both ",[180,670,671],{},"import FunctionalCalendar from 'vue-functional-calendar'",[180,673,674],{},"import { FunctionalCalendar } from 'vue-functional-calendar'"," still work.",[225,677,679],{"id":678},"scss-variables","SCSS variables",[176,681,682,683,686],{},"The SCSS ",[180,684,685],{},"!default"," variables are gone. Custom properties replace them. Set a token on the calendar or on any ancestor, with plain CSS and no Sass.",[200,688,692],{"className":689,"code":690,"language":691,"meta":205,"style":205},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight",".my-calendar {\n  --vfc-primary: #e11d48;\n  --vfc-on-primary: #ffffff;\n}\n","css",[180,693,694,704,720,734],{"__ignoreMap":205},[209,695,696,698,701],{"class":211,"line":212},[209,697,239],{"class":318},[209,699,700],{"class":215},"my-calendar",[209,702,703],{"class":318}," {\n",[209,705,706,709,711,714,717],{"class":211,"line":315},[209,707,708],{"class":336},"  --vfc-primary",[209,710,198],{"class":318},[209,712,713],{"class":318}," #",[209,715,716],{"class":336},"e11d48",[209,718,719],{"class":318},";\n",[209,721,722,725,727,729,732],{"class":211,"line":348},[209,723,724],{"class":336},"  --vfc-on-primary",[209,726,198],{"class":318},[209,728,713],{"class":318},[209,730,731],{"class":336},"ffffff",[209,733,719],{"class":318},[209,735,736],{"class":211,"line":355},[209,737,738],{"class":318},"}\n",[176,740,741],{},"The 2.x variables named colors, not roles, so the mapping below is by use. The old and new values do not match one to one.",[743,744,745,761],"table",{},[746,747,748],"thead",{},[749,750,751,755,758],"tr",{},[752,753,754],"th",{},"2.x variable",[752,756,757],{},"What it colored",[752,759,760],{},"3.x token",[762,763,764,783,801,822,843,863,877,892,910,937,960],"tbody",{},[749,765,766,775,778],{},[767,768,769,474,772],"td",{},[180,770,771],{},"$pictionBlue",[180,773,774],{},"$royalblue",[767,776,777],{},"Selected and marked days, time line, selected picker items",[767,779,780],{},[180,781,782],{},"--vfc-primary",[749,784,785,790,793],{},[767,786,787],{},[180,788,789],{},"$white",[767,791,792],{},"Backgrounds, text on selected days",[767,794,795,474,798],{},[180,796,797],{},"--vfc-bg",[180,799,800],{},"--vfc-on-primary",[749,802,803,814,817],{},[767,804,805,474,808,474,811],{},[180,806,807],{},"$black",[180,809,810],{},"$ebony",[180,812,813],{},"$mineShaft",[767,815,816],{},"Text and arrows",[767,818,819],{},[180,820,821],{},"--vfc-text",[749,823,824,832,835],{},[767,825,826,474,829],{},[180,827,828],{},"$mirage",[180,830,831],{},"$licorice",[767,833,834],{},"Dark mode background",[767,836,837,839,840],{},[180,838,797],{}," under ",[180,841,842],{},".vfc-dark",[749,844,845,850,853],{},[767,846,847],{},[180,848,849],{},"$astronaut",[767,851,852],{},"Dark mode range fill and borders",[767,854,855,474,858,839,861],{},[180,856,857],{},"--vfc-range",[180,859,860],{},"--vfc-border",[180,862,842],{},[749,864,865,870,873],{},[767,866,867],{},[180,868,869],{},"$lightskyblue",[767,871,872],{},"Range fill",[767,874,875],{},[180,876,857],{},[749,878,879,884,887],{},[767,880,881],{},[180,882,883],{},"$steelblue",[767,885,886],{},"Day hover in dark mode",[767,888,889],{},[180,890,891],{},"--vfc-primary-hover",[749,893,894,902,905],{},[767,895,896,474,899],{},[180,897,898],{},"$lightred",[180,900,901],{},"$keppel",[767,903,904],{},"Today",[767,906,907],{},[180,908,909],{},"--vfc-today",[749,911,912,929,932],{},[767,913,914,474,917,474,920,474,923,474,926],{},[180,915,916],{},"$gainsboro",[180,918,919],{},"$silver_chalice",[180,921,922],{},"$boulder",[180,924,925],{},"$tundora",[180,927,928],{},"$trout",[767,930,931],{},"Secondary text, neighbor month days",[767,933,934],{},[180,935,936],{},"--vfc-text-muted",[749,938,939,953,956],{},[767,940,941,474,944,474,947,474,950],{},[180,942,943],{},"$gallery",[180,945,946],{},"$alto",[180,948,949],{},"$lightgrey",[180,951,952],{},"$silver",[767,954,955],{},"Borders and scrollbars",[767,957,958],{},[180,959,860],{},[749,961,962,970,973],{},[767,963,964,474,967],{},[180,965,966],{},"$porcelain",[180,968,969],{},"$lightgreyHover",[767,971,972],{},"Hover backgrounds",[767,974,975],{},[180,976,977],{},"--vfc-hover",[176,979,980,264,983,986,987,239],{},[180,981,982],{},"$powderblue",[180,984,985],{},"$charade"," were never used. The full token list is in the ",[988,989,990],"a",{"href":67},"theming guide",[225,992,994],{"id":993},"behavior-changes","Behavior changes",[996,997,998,1005,1016],"ul",{},[233,999,1000,1001,1004],{},"Week numbers with ",[180,1002,1003],{},"sundayStart"," follow ISO numbering of each row's Thursday. 2.x showed numbers one lower.",[233,1006,1007,1008,1011,1012,1015],{},"A typed date is validated. ",[180,1009,1010],{},"31\u002F02\u002F2026"," is rejected, and a value commits only when day, month and a four digit year are complete. Padded dates such as ",[180,1013,1014],{},"05\u002F03\u002F2026"," are accepted.",[233,1017,1018],{},"Enter in the single and range inputs is never intercepted, so a surrounding form submits. The tags input of the multiple date picker still adds a valid typed date on Enter.",[225,1020,1022],{"id":1021},"imports","Imports",[176,1024,1025,1026,1029,1030,264,1033,1035,1036,1039],{},"3.x has an ",[180,1027,1028],{},"exports"," map with two entries, ",[180,1031,1032],{},"vue-functional-calendar",[180,1034,524],{},". Deep imports from ",[180,1037,1038],{},"src\u002F"," no longer resolve. Use the package entry.",[200,1041,1043],{"className":508,"code":1042,"language":510,"meta":205,"style":205},"\u002F\u002F 2.x\nimport FunctionalCalendar from 'vue-functional-calendar\u002Fsrc\u002Fcomponents\u002FFunctionalCalendar.vue'\n\n\u002F\u002F 3.x\nimport { FunctionalCalendar } from 'vue-functional-calendar'\n",[180,1044,1045,1049,1066,1070,1074],{"__ignoreMap":205},[209,1046,1047],{"class":211,"line":212},[209,1048,596],{"class":311},[209,1050,1051,1053,1056,1059,1061,1064],{"class":211,"line":315},[209,1052,518],{"class":517},[209,1054,1055],{"class":336}," FunctionalCalendar ",[209,1057,1058],{"class":517},"from",[209,1060,521],{"class":318},[209,1062,1063],{"class":219},"vue-functional-calendar\u002Fsrc\u002Fcomponents\u002FFunctionalCalendar.vue",[209,1065,527],{"class":318},[209,1067,1068],{"class":211,"line":348},[209,1069,352],{"emptyLinePlaceholder":351},[209,1071,1072],{"class":211,"line":355},[209,1073,640],{"class":311},[209,1075,1076,1078,1080,1083,1085,1088,1090,1092],{"class":211,"line":361},[209,1077,518],{"class":517},[209,1079,616],{"class":318},[209,1081,1082],{"class":336}," FunctionalCalendar",[209,1084,628],{"class":318},[209,1086,1087],{"class":517}," from",[209,1089,521],{"class":318},[209,1091,1032],{"class":219},[209,1093,527],{"class":318},[225,1095,1097],{"id":1096},"most-props-are-still-read-once","Most props are still read once",[176,1099,1100],{},"As in 2.x, the calendar reads most props once, when it is created. Re-key the component to apply a change:",[200,1102,1104],{"className":302,"code":1103,"language":304,"meta":205,"style":205},"\u003CFunctionalCalendar :key=\"locale\" :locale=\"locale\" is-date-picker \u002F>\n",[180,1105,1106],{"__ignoreMap":205},[209,1107,1108,1110,1112,1114,1117,1119,1121,1124,1126,1128,1130,1132,1134,1136,1138,1141],{"class":211,"line":212},[209,1109,319],{"class":318},[209,1111,323],{"class":322},[209,1113,368],{"class":318},[209,1115,1116],{"class":326},"key",[209,1118,330],{"class":318},[209,1120,333],{"class":318},[209,1122,1123],{"class":336},"locale",[209,1125,333],{"class":318},[209,1127,368],{"class":318},[209,1129,1123],{"class":326},[209,1131,330],{"class":318},[209,1133,333],{"class":318},[209,1135,1123],{"class":336},[209,1137,333],{"class":318},[209,1139,1140],{"class":326}," is-date-picker",[209,1142,345],{"class":318},[176,1144,1145,1146,1148,1149,474,1152,474,1155,474,1158,474,1161,474,1164,474,1167,264,1170,1173,1174,1177,1178,1180],{},"3.1 watches ",[180,1147,292],{}," and the data props ",[180,1150,1151],{},"markedDates",[180,1153,1154],{},"markedDateRange",[180,1156,1157],{},"disabledDates",[180,1159,1160],{},"enabledDates",[180,1162,1163],{},"disabledDayNames",[180,1165,1166],{},"limits",[180,1168,1169],{},"calendarsCount",[180,1171,1172],{},"isDark",", in ",[180,1175,1176],{},"configs"," too. Change them on a live calendar without a re-key. The same rule as before decides the source: when ",[180,1179,1176],{}," is present, the props are ignored.",[225,1182,1184],{"id":1183},"new-in-31","New in 3.1",[996,1186,1187,1193,1196,1205],{},[233,1188,1189,1190,1192],{},"Theming with ",[180,1191,277],{}," tokens and a dark mode.",[233,1194,1195],{},"Keyboard navigation and a grid with ARIA roles.",[233,1197,186,1198,1200,1201,1204],{},[180,1199,1123],{}," prop and the ",[180,1202,1203],{},"labels"," prop.",[233,1206,186,1207,1210],{},[180,1208,1209],{},"presets"," prop for quick ranges.",[176,1212,1213,1214,1217],{},"See the ",[988,1215,1216],{"href":167},"changelog"," for the full list.",[1219,1220,1221],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":205,"searchDepth":315,"depth":315,"links":1223},[1224,1225,1226,1227,1228,1229,1230,1231,1232],{"id":227,"depth":315,"text":228},{"id":271,"depth":315,"text":271},{"id":501,"depth":315,"text":502},{"id":575,"depth":315,"text":576},{"id":678,"depth":315,"text":679},{"id":993,"depth":315,"text":994},{"id":1021,"depth":315,"text":1022},{"id":1096,"depth":315,"text":1097},{"id":1183,"depth":315,"text":1184},"Move a Vue 2 app on Vue Functional Calendar 2.x to the Vue 3 build.","md",null,{},{"icon":29},{"title":26,"description":1233},"DQTYJcUe09eMey3JA0G7ReR3VoQFgHHaSmVWMuiGE4A",[1241,1243],{"title":21,"path":22,"stem":23,"description":1242,"icon":24,"children":-1},"Render a calendar, read the bound value and configure it.",{"title":36,"path":37,"stem":38,"description":1244,"icon":39,"children":-1},"Choose what users pick, and read the value back.",1792736102922]