[{"data":1,"prerenderedAt":980},["ShallowReactive",2],{"i-ph:sidebar":3,"i-ph:caret-left":8,"i-ph:caret-right":10,"components-calendar":12,"i-ph:code":978},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,256,false,"\u003Cpath fill=\"currentColor\" d=\"M216 40H40a16 16 0 0 0-16 16v144a16 16 0 0 0 16 16h176a16 16 0 0 0 16-16V56a16 16 0 0 0-16-16M40 152h16a8 8 0 0 0 0-16H40v-16h16a8 8 0 0 0 0-16H40V88h16a8 8 0 0 0 0-16H40V56h40v144H40Zm176 48H96V56h120z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"currentColor\" d=\"M165.66 202.34a8 8 0 0 1-11.32 11.32l-80-80a8 8 0 0 1 0-11.32l80-80a8 8 0 0 1 11.32 11.32L91.31 128Z\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"currentColor\" d=\"m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32\"\u002F>",{"id":13,"title":14,"body":15,"description":971,"extension":972,"meta":973,"navigation":128,"path":974,"seo":975,"stem":976,"__hash__":977},"docs\u002Fdocs\u002Fcomponents\u002Fcalendar.md","Calendar",{"type":16,"value":17,"toc":965},"minimark",[18,22,34,217,222,231,387,391,422,426,434,438,443,607,611,803,806,961],[19,20,14],"h1",{"id":21},"calendar",[23,24,25,26,33],"p",{},"A date picker component that allows users to select dates and times. It's built on top of ",[27,28,32],"a",{"href":29,"rel":30},"https:\u002F\u002Fvue3datepicker.com\u002Finstallation\u002F",[31],"nofollow","Vue Datepicker"," and provides a consistent look and feel with the rest of the UI components.",[35,36,38],"calendar-example",{"source-path":37},"Calendar\u002FCalendar.vue",[39,40,45],"pre",{"className":41,"code":42,"language":43,"meta":44,"style":44},"language-vue shiki shiki-themes vitesse-dark vitesse-light vitesse-dark","\u003Cscript setup>\nimport { Calendar, Flex } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCalendar v-model=\"date\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[46,47,48,68,103,123,130,158,168,173,183,208],"code",{"__ignoreMap":44},[49,50,53,57,61,65],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"sP76a","\u003C",[49,58,60],{"class":59},"sKpE2","script",[49,62,64],{"class":63},"sflEz"," setup",[49,66,67],{"class":55},">\n",[49,69,71,74,77,80,83,86,89,92,96,100],{"class":51,"line":70},2,[49,72,73],{"class":59},"import",[49,75,76],{"class":55}," {",[49,78,79],{"class":63}," Calendar",[49,81,82],{"class":55},",",[49,84,85],{"class":63}," Flex",[49,87,88],{"class":55}," }",[49,90,91],{"class":59}," from",[49,93,95],{"class":94},"sBR95"," '",[49,97,99],{"class":98},"sfmH-","@dolanske\u002Fvui",[49,101,102],{"class":94},"'\n",[49,104,106,108,110,113,115,117,119,121],{"class":51,"line":105},3,[49,107,73],{"class":59},[49,109,76],{"class":55},[49,111,112],{"class":63}," ref",[49,114,88],{"class":55},[49,116,91],{"class":59},[49,118,95],{"class":94},[49,120,43],{"class":98},[49,122,102],{"class":94},[49,124,126],{"class":51,"line":125},4,[49,127,129],{"emptyLinePlaceholder":128},true,"\n",[49,131,133,137,140,143,146,149,152,155],{"class":51,"line":132},5,[49,134,136],{"class":135},"sCMWV","const",[49,138,139],{"class":63}," date",[49,141,142],{"class":55}," =",[49,144,112],{"class":145},"sRTv0",[49,147,148],{"class":55},"(",[49,150,151],{"class":135},"new",[49,153,154],{"class":145}," Date",[49,156,157],{"class":55},"())\n",[49,159,161,164,166],{"class":51,"line":160},6,[49,162,163],{"class":55},"\u003C\u002F",[49,165,60],{"class":59},[49,167,67],{"class":55},[49,169,171],{"class":51,"line":170},7,[49,172,129],{"emptyLinePlaceholder":128},[49,174,176,178,181],{"class":51,"line":175},8,[49,177,56],{"class":55},[49,179,180],{"class":59},"template",[49,182,67],{"class":55},[49,184,186,189,191,194,197,200,203,205],{"class":51,"line":185},9,[49,187,188],{"class":55},"  \u003C",[49,190,14],{"class":59},[49,192,193],{"class":63}," v-model",[49,195,196],{"class":55},"=",[49,198,199],{"class":94},"\"",[49,201,202],{"class":98},"date",[49,204,199],{"class":94},[49,206,207],{"class":55}," \u002F>\n",[49,209,211,213,215],{"class":51,"line":210},10,[49,212,163],{"class":55},[49,214,180],{"class":59},[49,216,67],{"class":55},[218,219,221],"h3",{"id":220},"props","Props",[23,223,224,225,230],{},"The Calendar component accepts all the props listed in the ",[27,226,229],{"href":227,"rel":228},"https:\u002F\u002Fvue3datepicker.com\u002Fprops\u002Fmodes\u002F",[31],"official documentation",". Vuil builds on top of this and customizes this with a few defaults:",[232,233,234,250],"table",{},[235,236,237],"thead",{},[238,239,240,244,247],"tr",{},[241,242,243],"th",{},"Name",[241,245,246],{},"Default",[241,248,249],{},"Type",[251,252,253,276,294,314,333,352,370],"tbody",{},[238,254,255,261,266],{},[256,257,258],"td",{},[46,259,260],{},"autoApply",[256,262,263],{},[46,264,265],{},"true",[256,267,268,271,272,275],{},[46,269,270],{},"boolean"," ",[273,274],"br",{}," Automatically apply the selected date when clicking on a day",[238,277,278,283,287],{},[256,279,280],{},[46,281,282],{},"autoPosition",[256,284,285],{},[46,286,265],{},[256,288,289,271,291,293],{},[46,290,270],{},[273,292],{}," Automatically position the calendar popup",[238,295,296,301,306],{},[256,297,298],{},[46,299,300],{},"format",[256,302,303],{},[46,304,305],{},"'dd\u002FMM\u002Fyyyy HH:mm'",[256,307,308,271,311,313],{},[46,309,310],{},"string",[273,312],{}," Format of the displayed date",[238,315,316,321,326],{},[256,317,318],{},[46,319,320],{},"monthNameFormat",[256,322,323],{},[46,324,325],{},"'long'",[256,327,328,271,330,332],{},[46,329,310],{},[273,331],{}," Format of the month name in the header",[238,334,335,340,345],{},[256,336,337],{},[46,338,339],{},"expand",[256,341,342],{},[46,343,344],{},"false",[256,346,347,271,349,351],{},[46,348,270],{},[273,350],{}," Makes the calendar input expand to full width",[238,353,354,359,363],{},[256,355,356],{},[46,357,358],{},"inline",[256,360,361],{},[46,362,344],{},[256,364,365,271,367,369],{},[46,366,270],{},[273,368],{}," Renders the calendar inline instead of as a popup",[238,371,372,377,380],{},[256,373,374],{},[46,375,376],{},"dark",[256,378,379],{},"Based on theme",[256,381,382,271,384,386],{},[46,383,270],{},[273,385],{}," Enables dark mode for the calendar",[218,388,390],{"id":389},"slots","Slots",[232,392,393,405],{},[235,394,395],{},[238,396,397,399,402],{},[241,398,243],{},[241,400,401],{},"Accepts",[241,403,404],{},"Description",[251,406,407],{},[238,408,409,414,419],{},[256,410,411],{},[46,412,413],{},"trigger",[256,415,416],{},[46,417,418],{},"any",[256,420,421],{},"Custom trigger element to open the calendar popup when clicked",[218,423,425],{"id":424},"events","Events",[23,427,428,429,433],{},"All events emitted by the component are described here in the ",[27,430,229],{"href":431,"rel":432},"https:\u002F\u002Fvue3datepicker.com\u002Fmethods-and-events\u002Fevents\u002F",[31],".",[218,435,437],{"id":436},"examples","Examples",[439,440,442],"h4",{"id":441},"date-range-selection","Date Range Selection",[444,445,446],"calendar-date-range-example",{},[39,447,449],{"className":41,"code":448,"language":43,"meta":44,"style":44},"\u003Cscript setup>\nimport { Calendar } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst dateRange = ref([])\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCalendar\n    v-model=\"dateRange\"\n    range\n    :enable-time-picker=\"false\"\n    format=\"dd\u002FMM\u002Fyyyy\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[46,450,451,461,479,497,501,515,523,527,535,542,557,563,577,592,598],{"__ignoreMap":44},[49,452,453,455,457,459],{"class":51,"line":52},[49,454,56],{"class":55},[49,456,60],{"class":59},[49,458,64],{"class":63},[49,460,67],{"class":55},[49,462,463,465,467,469,471,473,475,477],{"class":51,"line":70},[49,464,73],{"class":59},[49,466,76],{"class":55},[49,468,79],{"class":63},[49,470,88],{"class":55},[49,472,91],{"class":59},[49,474,95],{"class":94},[49,476,99],{"class":98},[49,478,102],{"class":94},[49,480,481,483,485,487,489,491,493,495],{"class":51,"line":105},[49,482,73],{"class":59},[49,484,76],{"class":55},[49,486,112],{"class":63},[49,488,88],{"class":55},[49,490,91],{"class":59},[49,492,95],{"class":94},[49,494,43],{"class":98},[49,496,102],{"class":94},[49,498,499],{"class":51,"line":125},[49,500,129],{"emptyLinePlaceholder":128},[49,502,503,505,508,510,512],{"class":51,"line":132},[49,504,136],{"class":135},[49,506,507],{"class":63}," dateRange",[49,509,142],{"class":55},[49,511,112],{"class":145},[49,513,514],{"class":55},"([])\n",[49,516,517,519,521],{"class":51,"line":160},[49,518,163],{"class":55},[49,520,60],{"class":59},[49,522,67],{"class":55},[49,524,525],{"class":51,"line":170},[49,526,129],{"emptyLinePlaceholder":128},[49,528,529,531,533],{"class":51,"line":175},[49,530,56],{"class":55},[49,532,180],{"class":59},[49,534,67],{"class":55},[49,536,537,539],{"class":51,"line":185},[49,538,188],{"class":55},[49,540,541],{"class":59},"Calendar\n",[49,543,544,547,549,551,554],{"class":51,"line":210},[49,545,546],{"class":63},"    v-model",[49,548,196],{"class":55},[49,550,199],{"class":94},[49,552,553],{"class":98},"dateRange",[49,555,556],{"class":94},"\"\n",[49,558,560],{"class":51,"line":559},11,[49,561,562],{"class":63},"    range\n",[49,564,566,569,571,573,575],{"class":51,"line":565},12,[49,567,568],{"class":63},"    :enable-time-picker",[49,570,196],{"class":55},[49,572,199],{"class":94},[49,574,344],{"class":98},[49,576,556],{"class":94},[49,578,580,583,585,587,590],{"class":51,"line":579},13,[49,581,582],{"class":63},"    format",[49,584,196],{"class":55},[49,586,199],{"class":94},[49,588,589],{"class":98},"dd\u002FMM\u002Fyyyy",[49,591,556],{"class":94},[49,593,595],{"class":51,"line":594},14,[49,596,597],{"class":55},"  \u002F>\n",[49,599,601,603,605],{"class":51,"line":600},15,[49,602,163],{"class":55},[49,604,180],{"class":59},[49,606,67],{"class":55},[439,608,610],{"id":609},"custom-trigger","Custom Trigger",[612,613,614],"calendar-custom-trigger-example",{},[39,615,617],{"className":41,"code":616,"language":43,"meta":44,"style":44},"\u003Cscript setup>\nimport { Calendar } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCalendar v-model=\"date\">\n    \u003Ctemplate #trigger>\n      \u003Cbutton class=\"vui-button vui-button-variant-fill\">\n        Select Date\n      \u003C\u002Fbutton>\n    \u003C\u002Ftemplate>\n  \u003C\u002FCalendar>\n\u003C\u002Ftemplate>\n",[46,618,619,629,647,665,669,687,695,699,707,725,739,761,767,776,785,794],{"__ignoreMap":44},[49,620,621,623,625,627],{"class":51,"line":52},[49,622,56],{"class":55},[49,624,60],{"class":59},[49,626,64],{"class":63},[49,628,67],{"class":55},[49,630,631,633,635,637,639,641,643,645],{"class":51,"line":70},[49,632,73],{"class":59},[49,634,76],{"class":55},[49,636,79],{"class":63},[49,638,88],{"class":55},[49,640,91],{"class":59},[49,642,95],{"class":94},[49,644,99],{"class":98},[49,646,102],{"class":94},[49,648,649,651,653,655,657,659,661,663],{"class":51,"line":105},[49,650,73],{"class":59},[49,652,76],{"class":55},[49,654,112],{"class":63},[49,656,88],{"class":55},[49,658,91],{"class":59},[49,660,95],{"class":94},[49,662,43],{"class":98},[49,664,102],{"class":94},[49,666,667],{"class":51,"line":125},[49,668,129],{"emptyLinePlaceholder":128},[49,670,671,673,675,677,679,681,683,685],{"class":51,"line":132},[49,672,136],{"class":135},[49,674,139],{"class":63},[49,676,142],{"class":55},[49,678,112],{"class":145},[49,680,148],{"class":55},[49,682,151],{"class":135},[49,684,154],{"class":145},[49,686,157],{"class":55},[49,688,689,691,693],{"class":51,"line":160},[49,690,163],{"class":55},[49,692,60],{"class":59},[49,694,67],{"class":55},[49,696,697],{"class":51,"line":170},[49,698,129],{"emptyLinePlaceholder":128},[49,700,701,703,705],{"class":51,"line":175},[49,702,56],{"class":55},[49,704,180],{"class":59},[49,706,67],{"class":55},[49,708,709,711,713,715,717,719,721,723],{"class":51,"line":185},[49,710,188],{"class":55},[49,712,14],{"class":59},[49,714,193],{"class":63},[49,716,196],{"class":55},[49,718,199],{"class":94},[49,720,202],{"class":98},[49,722,199],{"class":94},[49,724,67],{"class":55},[49,726,727,730,732,735,737],{"class":51,"line":210},[49,728,729],{"class":55},"    \u003C",[49,731,180],{"class":59},[49,733,734],{"class":55}," #",[49,736,413],{"class":145},[49,738,67],{"class":55},[49,740,741,744,747,750,752,754,757,759],{"class":51,"line":559},[49,742,743],{"class":55},"      \u003C",[49,745,746],{"class":59},"button",[49,748,749],{"class":63}," class",[49,751,196],{"class":55},[49,753,199],{"class":94},[49,755,756],{"class":98},"vui-button vui-button-variant-fill",[49,758,199],{"class":94},[49,760,67],{"class":55},[49,762,763],{"class":51,"line":565},[49,764,766],{"class":765},"sX1ls","        Select Date\n",[49,768,769,772,774],{"class":51,"line":579},[49,770,771],{"class":55},"      \u003C\u002F",[49,773,746],{"class":59},[49,775,67],{"class":55},[49,777,778,781,783],{"class":51,"line":594},[49,779,780],{"class":55},"    \u003C\u002F",[49,782,180],{"class":59},[49,784,67],{"class":55},[49,786,787,790,792],{"class":51,"line":600},[49,788,789],{"class":55},"  \u003C\u002F",[49,791,14],{"class":59},[49,793,67],{"class":55},[49,795,797,799,801],{"class":51,"line":796},16,[49,798,163],{"class":55},[49,800,180],{"class":59},[49,802,67],{"class":55},[439,804,805],{"id":358},"Inline",[807,808,809],"calendar-inline-example",{},[39,810,812],{"className":41,"code":811,"language":43,"meta":44,"style":44},"\u003Cscript setup>\nimport { Calendar } from '@dolanske\u002Fvui'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CCalendar\n    v-model=\"date\"\n    inline\n    :enable-time-picker=\"false\"\n    format=\"dd\u002FMM\u002Fyyyy\"\n  \u002F>\n\u003C\u002Ftemplate>\n",[46,813,814,824,842,860,864,882,890,894,902,908,920,925,937,949,953],{"__ignoreMap":44},[49,815,816,818,820,822],{"class":51,"line":52},[49,817,56],{"class":55},[49,819,60],{"class":59},[49,821,64],{"class":63},[49,823,67],{"class":55},[49,825,826,828,830,832,834,836,838,840],{"class":51,"line":70},[49,827,73],{"class":59},[49,829,76],{"class":55},[49,831,79],{"class":63},[49,833,88],{"class":55},[49,835,91],{"class":59},[49,837,95],{"class":94},[49,839,99],{"class":98},[49,841,102],{"class":94},[49,843,844,846,848,850,852,854,856,858],{"class":51,"line":105},[49,845,73],{"class":59},[49,847,76],{"class":55},[49,849,112],{"class":63},[49,851,88],{"class":55},[49,853,91],{"class":59},[49,855,95],{"class":94},[49,857,43],{"class":98},[49,859,102],{"class":94},[49,861,862],{"class":51,"line":125},[49,863,129],{"emptyLinePlaceholder":128},[49,865,866,868,870,872,874,876,878,880],{"class":51,"line":132},[49,867,136],{"class":135},[49,869,139],{"class":63},[49,871,142],{"class":55},[49,873,112],{"class":145},[49,875,148],{"class":55},[49,877,151],{"class":135},[49,879,154],{"class":145},[49,881,157],{"class":55},[49,883,884,886,888],{"class":51,"line":160},[49,885,163],{"class":55},[49,887,60],{"class":59},[49,889,67],{"class":55},[49,891,892],{"class":51,"line":170},[49,893,129],{"emptyLinePlaceholder":128},[49,895,896,898,900],{"class":51,"line":175},[49,897,56],{"class":55},[49,899,180],{"class":59},[49,901,67],{"class":55},[49,903,904,906],{"class":51,"line":185},[49,905,188],{"class":55},[49,907,541],{"class":59},[49,909,910,912,914,916,918],{"class":51,"line":210},[49,911,546],{"class":63},[49,913,196],{"class":55},[49,915,199],{"class":94},[49,917,202],{"class":98},[49,919,556],{"class":94},[49,921,922],{"class":51,"line":559},[49,923,924],{"class":63},"    inline\n",[49,926,927,929,931,933,935],{"class":51,"line":565},[49,928,568],{"class":63},[49,930,196],{"class":55},[49,932,199],{"class":94},[49,934,344],{"class":98},[49,936,556],{"class":94},[49,938,939,941,943,945,947],{"class":51,"line":579},[49,940,582],{"class":63},[49,942,196],{"class":55},[49,944,199],{"class":94},[49,946,589],{"class":98},[49,948,556],{"class":94},[49,950,951],{"class":51,"line":594},[49,952,597],{"class":55},[49,954,955,957,959],{"class":51,"line":600},[49,956,163],{"class":55},[49,958,180],{"class":59},[49,960,67],{"class":55},[962,963,964],"style",{},"html pre.shiki code .sP76a, html code.shiki .sP76a{--shiki-dark:#666666;--shiki-light:#999999;--shiki-default:#666666}html pre.shiki code .sKpE2, html code.shiki .sKpE2{--shiki-dark:#4D9375;--shiki-light:#1E754F;--shiki-default:#4D9375}html pre.shiki code .sflEz, html code.shiki .sflEz{--shiki-dark:#BD976A;--shiki-light:#B07D48;--shiki-default:#BD976A}html pre.shiki code .sBR95, html code.shiki .sBR95{--shiki-dark:#C98A7D77;--shiki-light:#B5695977;--shiki-default:#C98A7D77}html pre.shiki code .sfmH-, html code.shiki .sfmH-{--shiki-dark:#C98A7D;--shiki-light:#B56959;--shiki-default:#C98A7D}html pre.shiki code .sCMWV, html code.shiki .sCMWV{--shiki-dark:#CB7676;--shiki-light:#AB5959;--shiki-default:#CB7676}html pre.shiki code .sRTv0, html code.shiki .sRTv0{--shiki-dark:#80A665;--shiki-light:#59873A;--shiki-default:#80A665}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 .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 pre.shiki code .sX1ls, html code.shiki .sX1ls{--shiki-dark:#DBD7CAEE;--shiki-light:#393A34;--shiki-default:#DBD7CAEE}",{"title":44,"searchDepth":70,"depth":70,"links":966},[967,968,969,970],{"id":220,"depth":105,"text":221},{"id":389,"depth":105,"text":390},{"id":424,"depth":105,"text":425},{"id":436,"depth":105,"text":437},"A date picker component that allows users to select dates and times. It's built on top of Vue Datepicker and provides a consistent look and feel with the rest of the UI components.","md",{},"\u002Fdocs\u002Fcomponents\u002Fcalendar",{"title":14,"description":971},"docs\u002Fcomponents\u002Fcalendar","Kqf3AFYxmmEnvht6_hjCj8NQnOfMG3dX2B2N09ZR1ds",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":979},"\u003Cpath fill=\"currentColor\" d=\"M69.12 94.15L28.5 128l40.62 33.85a8 8 0 1 1-10.24 12.29l-48-40a8 8 0 0 1 0-12.29l48-40a8 8 0 0 1 10.24 12.3m176 27.7l-48-40a8 8 0 1 0-10.24 12.3L227.5 128l-40.62 33.85a8 8 0 1 0 10.24 12.29l48-40a8 8 0 0 0 0-12.29m-82.39-89.37a8 8 0 0 0-10.25 4.79l-64 176a8 8 0 0 0 4.79 10.26A8.1 8.1 0 0 0 96 224a8 8 0 0 0 7.52-5.27l64-176a8 8 0 0 0-4.79-10.25\"\u002F>",1782200882477]