[{"data":1,"prerenderedAt":604},["ShallowReactive",2],{"navigation_docs":3,"-examples-slots":170,"-examples-slots-surround":599},[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":106,"body":172,"description":592,"extension":593,"links":594,"meta":595,"navigation":596,"path":137,"seo":597,"stem":138,"__hash__":598},"docs\u002F3.examples\u002F07.slots.md",{"type":173,"value":174,"toc":587},"minimark",[175,180,193,200,313,317,327,510,514,521,584],[176,177,179],"h2",{"id":178},"day-arrows-and-footer","Day, arrows and footer",[181,182,183,184,188,189,192],"p",{},"The default slot receives ",[185,186,187],"code",{},"{ week, day }"," and replaces the content of a day. Setting a day slot drops the default day classes, so add ",[185,190,191],{},"alwaysUseDefaultClasses"," to keep the selection styling. The arrow and footer slots replace their parts.",[181,194,195,196,199],{},"The day cell selects only when the click lands on the cell itself. Set ",[185,197,198],{},"pointer-events: none"," on elements inside your slot so clicks reach the cell.",[201,202,203],"calendar-slots-demo",{},[204,205,210],"pre",{"className":206,"code":207,"language":208,"meta":209,"style":209},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CFunctionalCalendar v-model=\"value\" is-date-picker always-use-default-classes>\n  \u003Ctemplate #default=\"{ day }\">\n    \u003Cstrong v-if=\"isWeekend(day)\" style=\"pointer-events: none\">{{ day.day }}\u003C\u002Fstrong>\n    \u003Ctemplate v-else>{{ day.day }}\u003C\u002Ftemplate>\n  \u003C\u002Ftemplate>\n  \u003Ctemplate #navigationArrowLeft>←\u003C\u002Ftemplate>\n  \u003Ctemplate #navigationArrowRight>→\u003C\u002Ftemplate>\n  \u003Ctemplate #footer>\n    \u003Csmall>Weekends are bold.\u003C\u002Fsmall>\n  \u003C\u002Ftemplate>\n\u003C\u002FFunctionalCalendar>\n","vue","",[185,211,212,250,256,262,268,274,280,286,292,298,303],{"__ignoreMap":209},[213,214,217,221,225,229,232,235,239,241,244,247],"span",{"class":215,"line":216},"line",1,[213,218,220],{"class":219},"sMK4o","\u003C",[213,222,224],{"class":223},"swJcz","FunctionalCalendar",[213,226,228],{"class":227},"spNyl"," v-model",[213,230,231],{"class":219},"=",[213,233,234],{"class":219},"\"",[213,236,238],{"class":237},"sTEyZ","value",[213,240,234],{"class":219},[213,242,243],{"class":227}," is-date-picker",[213,245,246],{"class":227}," always-use-default-classes",[213,248,249],{"class":219},">\n",[213,251,253],{"class":215,"line":252},2,[213,254,255],{"class":237},"  \u003Ctemplate #default=\"{ day }\">\n",[213,257,259],{"class":215,"line":258},3,[213,260,261],{"class":237},"    \u003Cstrong v-if=\"isWeekend(day)\" style=\"pointer-events: none\">{{ day.day }}\u003C\u002Fstrong>\n",[213,263,265],{"class":215,"line":264},4,[213,266,267],{"class":237},"    \u003Ctemplate v-else>{{ day.day }}\u003C\u002Ftemplate>\n",[213,269,271],{"class":215,"line":270},5,[213,272,273],{"class":237},"  \u003C\u002Ftemplate>\n",[213,275,277],{"class":215,"line":276},6,[213,278,279],{"class":237},"  \u003Ctemplate #navigationArrowLeft>←\u003C\u002Ftemplate>\n",[213,281,283],{"class":215,"line":282},7,[213,284,285],{"class":237},"  \u003Ctemplate #navigationArrowRight>→\u003C\u002Ftemplate>\n",[213,287,289],{"class":215,"line":288},8,[213,290,291],{"class":237},"  \u003Ctemplate #footer>\n",[213,293,295],{"class":215,"line":294},9,[213,296,297],{"class":237},"    \u003Csmall>Weekends are bold.\u003C\u002Fsmall>\n",[213,299,301],{"class":215,"line":300},10,[213,302,273],{"class":237},[213,304,306,309,311],{"class":215,"line":305},11,[213,307,308],{"class":219},"\u003C\u002F",[213,310,224],{"class":223},[213,312,249],{"class":219},[176,314,316],{"id":315},"an-events-calendar","An events calendar",[181,318,319,320,322,323,326],{},"Without ",[185,321,191],{},", a day slot is yours to lay out. This one renders events inside each day and listens to ",[185,324,325],{},"dayClicked",".",[328,329,330],"calendar-events-demo",{},[204,331,333],{"className":206,"code":332,"language":208,"meta":209,"style":209},"\u003CFunctionalCalendar\n  v-model=\"value\"\n  title-position=\"left\"\n  arrows-position=\"right\"\n  @day-clicked=\"onDayClicked\"\n>\n  \u003Ctemplate #default=\"{ day }\">\n    \u003Cdiv class=\"day\">\n      \u003Cspan>{{ day.day }}\u003C\u002Fspan>\n      \u003Cspan v-for=\"event in eventsOn(day.date)\" :key=\"event.id\" class=\"event\">\n        {{ event.title }}\n      \u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\u003C\u002FFunctionalCalendar>\n\n\u003Cstyle>\n.day { pointer-events: none; }\n\u003C\u002Fstyle>\n",[185,334,335,342,356,371,385,402,406,410,415,420,425,430,436,442,447,456,463,473,501],{"__ignoreMap":209},[213,336,337,339],{"class":215,"line":216},[213,338,220],{"class":219},[213,340,341],{"class":223},"FunctionalCalendar\n",[213,343,344,347,349,351,353],{"class":215,"line":252},[213,345,346],{"class":227},"  v-model",[213,348,231],{"class":219},[213,350,234],{"class":219},[213,352,238],{"class":237},[213,354,355],{"class":219},"\"\n",[213,357,358,361,363,365,369],{"class":215,"line":258},[213,359,360],{"class":227},"  title-position",[213,362,231],{"class":219},[213,364,234],{"class":219},[213,366,368],{"class":367},"sfazB","left",[213,370,355],{"class":219},[213,372,373,376,378,380,383],{"class":215,"line":264},[213,374,375],{"class":227},"  arrows-position",[213,377,231],{"class":219},[213,379,234],{"class":219},[213,381,382],{"class":367},"right",[213,384,355],{"class":219},[213,386,387,390,393,395,397,400],{"class":215,"line":270},[213,388,389],{"class":219},"  @",[213,391,392],{"class":227},"day-clicked",[213,394,231],{"class":219},[213,396,234],{"class":219},[213,398,399],{"class":237},"onDayClicked",[213,401,355],{"class":219},[213,403,404],{"class":215,"line":276},[213,405,249],{"class":219},[213,407,408],{"class":215,"line":282},[213,409,255],{"class":237},[213,411,412],{"class":215,"line":288},[213,413,414],{"class":237},"    \u003Cdiv class=\"day\">\n",[213,416,417],{"class":215,"line":294},[213,418,419],{"class":237},"      \u003Cspan>{{ day.day }}\u003C\u002Fspan>\n",[213,421,422],{"class":215,"line":300},[213,423,424],{"class":237},"      \u003Cspan v-for=\"event in eventsOn(day.date)\" :key=\"event.id\" class=\"event\">\n",[213,426,427],{"class":215,"line":305},[213,428,429],{"class":237},"        {{ event.title }}\n",[213,431,433],{"class":215,"line":432},12,[213,434,435],{"class":237},"      \u003C\u002Fspan>\n",[213,437,439],{"class":215,"line":438},13,[213,440,441],{"class":237},"    \u003C\u002Fdiv>\n",[213,443,445],{"class":215,"line":444},14,[213,446,273],{"class":237},[213,448,450,452,454],{"class":215,"line":449},15,[213,451,308],{"class":219},[213,453,224],{"class":223},[213,455,249],{"class":219},[213,457,459],{"class":215,"line":458},16,[213,460,462],{"emptyLinePlaceholder":461},true,"\n",[213,464,466,468,471],{"class":215,"line":465},17,[213,467,220],{"class":219},[213,469,470],{"class":223},"style",[213,472,249],{"class":219},[213,474,476,478,482,485,489,492,495,498],{"class":215,"line":475},18,[213,477,326],{"class":219},[213,479,481],{"class":480},"sBMFI","day",[213,483,484],{"class":219}," {",[213,486,488],{"class":487},"sqsOY"," pointer-events",[213,490,491],{"class":219},":",[213,493,494],{"class":237}," none",[213,496,497],{"class":219},";",[213,499,500],{"class":219}," }\n",[213,502,504,506,508],{"class":215,"line":503},19,[213,505,308],{"class":219},[213,507,470],{"class":223},[213,509,249],{"class":219},[176,511,513],{"id":512},"clear-button","Clear button",[181,515,516,517,520],{},"The ",[185,518,519],{},"cleaner"," slot replaces the clear button of a range. Clicking inside it clears the range.",[522,523,524],"calendar-cleaner-demo",{},[204,525,527],{"className":206,"code":526,"language":208,"meta":209,"style":209},"\u003CFunctionalCalendar v-model=\"value\" is-date-range can-clear-range>\n  \u003Ctemplate #cleaner>\n    \u003Cdiv style=\"display: flex; justify-content: center\">\n      \u003Cbutton type=\"button\">Cancel\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002Ftemplate>\n\u003C\u002FFunctionalCalendar>\n",[185,528,529,553,558,563,568,572,576],{"__ignoreMap":209},[213,530,531,533,535,537,539,541,543,545,548,551],{"class":215,"line":216},[213,532,220],{"class":219},[213,534,224],{"class":223},[213,536,228],{"class":227},[213,538,231],{"class":219},[213,540,234],{"class":219},[213,542,238],{"class":237},[213,544,234],{"class":219},[213,546,547],{"class":227}," is-date-range",[213,549,550],{"class":227}," can-clear-range",[213,552,249],{"class":219},[213,554,555],{"class":215,"line":252},[213,556,557],{"class":237},"  \u003Ctemplate #cleaner>\n",[213,559,560],{"class":215,"line":258},[213,561,562],{"class":237},"    \u003Cdiv style=\"display: flex; justify-content: center\">\n",[213,564,565],{"class":215,"line":264},[213,566,567],{"class":237},"      \u003Cbutton type=\"button\">Cancel\u003C\u002Fbutton>\n",[213,569,570],{"class":215,"line":270},[213,571,441],{"class":237},[213,573,574],{"class":215,"line":276},[213,575,273],{"class":237},[213,577,578,580,582],{"class":215,"line":282},[213,579,308],{"class":219},[213,581,224],{"class":223},[213,583,249],{"class":219},[470,585,586],{},"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 .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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}",{"title":209,"searchDepth":252,"depth":252,"links":588},[589,590,591],{"id":178,"depth":252,"text":179},{"id":315,"depth":252,"text":316},{"id":512,"depth":252,"text":513},"Replace the day cell, the arrows, the footer and the clear button.","md",null,{},{"icon":109},{"title":106,"description":592},"iQXM4puMYT-VwzS2D4pOrdTSuM7H2Yz8GdG9CATw0d4",[600,602],{"title":133,"path":134,"stem":135,"description":601,"icon":59,"children":-1},"Mark dates and ranges, show week numbers, and hide parts of the calendar.",{"title":140,"path":141,"stem":142,"description":603,"icon":89,"children":-1},"Quick ranges for date ranges and date pickers.",1792736104476]