[{"data":1,"prerenderedAt":654},["ShallowReactive",2],{"\u002Fblog\u002Freservation-calendar-with-vue-integration":3},{"id":4,"title":5,"body":6,"description":16,"extension":648,"meta":649,"navigation":102,"path":650,"seo":651,"stem":652,"__hash__":653},"content\u002Fblog\u002Fvue.md","Simple Reservation Calendar with first-class Vue support",{"type":7,"value":8,"toc":640},"minimark",[9,13,17,25,30,38,215,219,222,235,251,255,262,282,289,293,296,499,503,506,618,622,625,629,636],[10,11,5],"h1",{"id":12},"simple-reservation-calendar-with-first-class-vue-support",[14,15,16],"p",{},"Zaptime offers an embeddable, feature-rich, TypeScript-ready, SSR-friendly calendar solution designed to integrate with Vue and Nuxt applications. It allows developers to easily customize appearance, build custom UI layer and much more.",[18,19],"content-image",{"className":20,"src":23,"alt":24},[21,22],"rounded-md","shadow-md","\u002Fblog\u002Fvue\u002Fcalendar-example.png","Zaptime reservation calendar embedded in a Vue application",[26,27,29],"h2",{"id":28},"simple-integration","Simple Integration",[14,31,32,33,37],{},"This is how ",[34,35,36],"strong",{},"easy"," it is to get a default calendar up and running.",[39,40,45],"pre",{"className":41,"code":42,"language":43,"meta":44,"style":44},"language-vue shiki shiki-themes github-light github-light","\u003Ctemplate>\n  \u003CZaptimeCalendar :config=\"config\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ZaptimeCalendar } from \"@zaptime\u002Fvue3\";\nimport type { ZaptimeConfig } from \"@zaptime\u002Fvue3\";\n\nconst config: ZaptimeConfig = {\n  token: \"\u003CAPI_TOKEN>\",\n};\n\u003C\u002Fscript>\n","vue","",[46,47,48,64,87,97,104,125,144,161,166,188,200,206],"code",{"__ignoreMap":44},[49,50,53,57,61],"span",{"class":51,"line":52},"line",1,[49,54,56],{"class":55},"sKWpL","\u003C",[49,58,60],{"class":59},"sMDDv","template",[49,62,63],{"class":55},">\n",[49,65,67,70,73,77,80,84],{"class":51,"line":66},2,[49,68,69],{"class":55},"  \u003C",[49,71,72],{"class":59},"ZaptimeCalendar",[49,74,76],{"class":75},"se37E"," :config",[49,78,79],{"class":55},"=",[49,81,83],{"class":82},"sOTlB","\"config\"",[49,85,86],{"class":55}," \u002F>\n",[49,88,90,93,95],{"class":51,"line":89},3,[49,91,92],{"class":55},"\u003C\u002F",[49,94,60],{"class":59},[49,96,63],{"class":55},[49,98,100],{"class":51,"line":99},4,[49,101,103],{"emptyLinePlaceholder":102},true,"\n",[49,105,107,109,112,115,118,120,123],{"class":51,"line":106},5,[49,108,56],{"class":55},[49,110,111],{"class":59},"script",[49,113,114],{"class":75}," setup",[49,116,117],{"class":75}," lang",[49,119,79],{"class":55},[49,121,122],{"class":82},"\"ts\"",[49,124,63],{"class":55},[49,126,128,132,135,138,141],{"class":51,"line":127},6,[49,129,131],{"class":130},"sCydW","import",[49,133,134],{"class":55}," { ZaptimeCalendar } ",[49,136,137],{"class":130},"from",[49,139,140],{"class":82}," \"@zaptime\u002Fvue3\"",[49,142,143],{"class":55},";\n",[49,145,147,149,152,155,157,159],{"class":51,"line":146},7,[49,148,131],{"class":130},[49,150,151],{"class":130}," type",[49,153,154],{"class":55}," { ZaptimeConfig } ",[49,156,137],{"class":130},[49,158,140],{"class":82},[49,160,143],{"class":55},[49,162,164],{"class":51,"line":163},8,[49,165,103],{"emptyLinePlaceholder":102},[49,167,169,172,176,179,182,185],{"class":51,"line":168},9,[49,170,171],{"class":130},"const",[49,173,175],{"class":174},"sMN4m"," config",[49,177,178],{"class":130},":",[49,180,181],{"class":75}," ZaptimeConfig",[49,183,184],{"class":130}," =",[49,186,187],{"class":55}," {\n",[49,189,191,194,197],{"class":51,"line":190},10,[49,192,193],{"class":55},"  token: ",[49,195,196],{"class":82},"\"\u003CAPI_TOKEN>\"",[49,198,199],{"class":55},",\n",[49,201,203],{"class":51,"line":202},11,[49,204,205],{"class":55},"};\n",[49,207,209,211,213],{"class":51,"line":208},12,[49,210,92],{"class":55},[49,212,111],{"class":59},[49,214,63],{"class":55},[26,216,218],{"id":217},"layer-by-layer-customizations","Layer by Layer customizations",[14,220,221],{},"By utilizing composables, developers can easily tap into the core functionalities of Zaptime, enhancing the calendar's capabilities without the hassle of extensive configurations. Control the state of the calendar, watch for state changes inside the Calendar and more.",[223,224,228,229],"div",{"className":225},[226,227],"flex","justify-center","\n    ",[230,231],"img",{"width":232,"src":233,"alt":234},"175px","https:\u002F\u002Fdocs.zaptime.app\u002Fintro.png","Zaptime API and composables documentation",[14,236,237,243,244,247],{},[238,239,242],"a",{"href":240,"target":241},"https:\u002F\u002Fzaptime.docs.apiary.io\u002F#introduction\u002Fbasic-principles-of-working-with-api","_blank","API documentation"," ",[245,246],"br",{},[238,248,250],{"href":249,"target":241},"https:\u002F\u002Fdocs.zaptime.app\u002Fguide\u002Fheadless\u002Fintroduction.html","Composables documentation",[26,252,254],{"id":253},"make-the-calendar-yours","Make the Calendar yours",[14,256,257,258,261],{},"Zaptime’s architecture supports extensive customization, from the visual aspects to the functional interactions. Use built-in Vue composables to get all data needed to build a custom calendar. And ",[34,259,260],{},"build the UI yourself",".",[223,263,228,270,228,277],{"className":264},[226,265,266,267,268,269,227],"flex-col","md:flex-row","items-center","md:gap-4","w-full",[271,272],"contentimage",{"className":273,"width":274,"src":275,"alt":276},[21],300,"\u002Fblog\u002Fvue\u002Fcalendar-example-light.png","Custom Zaptime calendar UI in a light theme",[271,278],{"className":279,"width":274,"src":280,"alt":281},[21],"\u002Fblog\u002Fvue\u002Fcalendar-example-dark.png","Custom Zaptime calendar UI in a dark theme",[14,283,284,285,261],{},"Play with Zaptime ",[238,286,288],{"href":287,"target":241},"https:\u002F\u002Fstackblitz.com\u002Fedit\u002Fzaptime-vue3?file=src%2FApp.vue","StackBlitz integration example",[26,290,292],{"id":291},"direct-access-to-calendar-data","Direct access to Calendar Data",[14,294,295],{},"Blend Zaptime directly into your existing forms allowing you to manage and manipulate calendar data directly within your application workflows. This ensures that all scheduling features are tightly aligned with your user interface, enhancing your event handling processes.",[39,297,299],{"className":41,"code":298,"language":43,"meta":44,"style":44},"\u003Ctemplate>\n  \u003CZaptimeCalendar :config=\"config\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { ZaptimeCalendar } from \"@zaptime\u002Fvue3\";\nimport type { ZaptimeConfig } from \"@zaptime\u002Fvue3\";\n\nimport { useCalendar, useSelectedTimeSlot } from \"@zaptime\u002Fcore\";\n\n\u002F\u002F Access internal calendar state\nconst { state } = useCalendar();\n\n\u002F\u002F Retrieve currently selected time slot\nconst { selectedTimeSlot } = useSelectedTimeSlot();\n\nconst config: ZaptimeConfig = {\n  token: \"\u003CAPI_TOKEN>\",\n};\n\u003C\u002Fscript>\n",[46,300,301,309,323,331,335,351,363,377,381,395,399,405,426,431,437,456,461,476,485,490],{"__ignoreMap":44},[49,302,303,305,307],{"class":51,"line":52},[49,304,56],{"class":55},[49,306,60],{"class":59},[49,308,63],{"class":55},[49,310,311,313,315,317,319,321],{"class":51,"line":66},[49,312,69],{"class":55},[49,314,72],{"class":59},[49,316,76],{"class":75},[49,318,79],{"class":55},[49,320,83],{"class":82},[49,322,86],{"class":55},[49,324,325,327,329],{"class":51,"line":89},[49,326,92],{"class":55},[49,328,60],{"class":59},[49,330,63],{"class":55},[49,332,333],{"class":51,"line":99},[49,334,103],{"emptyLinePlaceholder":102},[49,336,337,339,341,343,345,347,349],{"class":51,"line":106},[49,338,56],{"class":55},[49,340,111],{"class":59},[49,342,114],{"class":75},[49,344,117],{"class":75},[49,346,79],{"class":55},[49,348,122],{"class":82},[49,350,63],{"class":55},[49,352,353,355,357,359,361],{"class":51,"line":127},[49,354,131],{"class":130},[49,356,134],{"class":55},[49,358,137],{"class":130},[49,360,140],{"class":82},[49,362,143],{"class":55},[49,364,365,367,369,371,373,375],{"class":51,"line":146},[49,366,131],{"class":130},[49,368,151],{"class":130},[49,370,154],{"class":55},[49,372,137],{"class":130},[49,374,140],{"class":82},[49,376,143],{"class":55},[49,378,379],{"class":51,"line":163},[49,380,103],{"emptyLinePlaceholder":102},[49,382,383,385,388,390,393],{"class":51,"line":168},[49,384,131],{"class":130},[49,386,387],{"class":55}," { useCalendar, useSelectedTimeSlot } ",[49,389,137],{"class":130},[49,391,392],{"class":82}," \"@zaptime\u002Fcore\"",[49,394,143],{"class":55},[49,396,397],{"class":51,"line":190},[49,398,103],{"emptyLinePlaceholder":102},[49,400,401],{"class":51,"line":202},[49,402,404],{"class":403},"sJ8bj","\u002F\u002F Access internal calendar state\n",[49,406,407,409,412,415,418,420,423],{"class":51,"line":208},[49,408,171],{"class":130},[49,410,411],{"class":55}," { ",[49,413,414],{"class":174},"state",[49,416,417],{"class":55}," } ",[49,419,79],{"class":130},[49,421,422],{"class":75}," useCalendar",[49,424,425],{"class":55},"();\n",[49,427,429],{"class":51,"line":428},13,[49,430,103],{"emptyLinePlaceholder":102},[49,432,434],{"class":51,"line":433},14,[49,435,436],{"class":403},"\u002F\u002F Retrieve currently selected time slot\n",[49,438,440,442,444,447,449,451,454],{"class":51,"line":439},15,[49,441,171],{"class":130},[49,443,411],{"class":55},[49,445,446],{"class":174},"selectedTimeSlot",[49,448,417],{"class":55},[49,450,79],{"class":130},[49,452,453],{"class":75}," useSelectedTimeSlot",[49,455,425],{"class":55},[49,457,459],{"class":51,"line":458},16,[49,460,103],{"emptyLinePlaceholder":102},[49,462,464,466,468,470,472,474],{"class":51,"line":463},17,[49,465,171],{"class":130},[49,467,175],{"class":174},[49,469,178],{"class":130},[49,471,181],{"class":75},[49,473,184],{"class":130},[49,475,187],{"class":55},[49,477,479,481,483],{"class":51,"line":478},18,[49,480,193],{"class":55},[49,482,196],{"class":82},[49,484,199],{"class":55},[49,486,488],{"class":51,"line":487},19,[49,489,205],{"class":55},[49,491,493,495,497],{"class":51,"line":492},20,[49,494,92],{"class":55},[49,496,111],{"class":59},[49,498,63],{"class":55},[26,500,502],{"id":501},"never-double-book","Never Double Book",[14,504,505],{},"Zaptime includes a feature that allows you to reserve time slots pending confirmation, providing flexibility and ensuring that time slots are never double-booked. This is particularly valuable when integrating with payment systems, as it secures the slot while awaiting transaction completion, reducing the risk of scheduling conflicts.",[39,507,509],{"className":41,"code":508,"language":43,"meta":44,"style":44},"\u003Cscript setup lang=\"ts\">\nimport { reserve, confirm } from \"@zaptime\u002Fvue3\";\n\nasync function submitForm() {\n  await reserve();\n\n  \u002F*\n    Do whatever you need, reserved time slot\n    is pending confirmation for 15 minutes.\n  *\u002F\n\n  await confirm();\n}\n\u003C\u002Fscript>\n",[46,510,511,527,540,544,558,568,572,577,582,587,592,596,605,610],{"__ignoreMap":44},[49,512,513,515,517,519,521,523,525],{"class":51,"line":52},[49,514,56],{"class":55},[49,516,111],{"class":59},[49,518,114],{"class":75},[49,520,117],{"class":75},[49,522,79],{"class":55},[49,524,122],{"class":82},[49,526,63],{"class":55},[49,528,529,531,534,536,538],{"class":51,"line":66},[49,530,131],{"class":130},[49,532,533],{"class":55}," { reserve, confirm } ",[49,535,137],{"class":130},[49,537,140],{"class":82},[49,539,143],{"class":55},[49,541,542],{"class":51,"line":89},[49,543,103],{"emptyLinePlaceholder":102},[49,545,546,549,552,555],{"class":51,"line":99},[49,547,548],{"class":130},"async",[49,550,551],{"class":130}," function",[49,553,554],{"class":75}," submitForm",[49,556,557],{"class":55},"() {\n",[49,559,560,563,566],{"class":51,"line":106},[49,561,562],{"class":130},"  await",[49,564,565],{"class":75}," reserve",[49,567,425],{"class":55},[49,569,570],{"class":51,"line":127},[49,571,103],{"emptyLinePlaceholder":102},[49,573,574],{"class":51,"line":146},[49,575,576],{"class":403},"  \u002F*\n",[49,578,579],{"class":51,"line":163},[49,580,581],{"class":403},"    Do whatever you need, reserved time slot\n",[49,583,584],{"class":51,"line":168},[49,585,586],{"class":403},"    is pending confirmation for 15 minutes.\n",[49,588,589],{"class":51,"line":190},[49,590,591],{"class":403},"  *\u002F\n",[49,593,594],{"class":51,"line":202},[49,595,103],{"emptyLinePlaceholder":102},[49,597,598,600,603],{"class":51,"line":208},[49,599,562],{"class":130},[49,601,602],{"class":75}," confirm",[49,604,425],{"class":55},[49,606,607],{"class":51,"line":428},[49,608,609],{"class":55},"}\n",[49,611,612,614,616],{"class":51,"line":433},[49,613,92],{"class":55},[49,615,111],{"class":59},[49,617,63],{"class":55},[26,619,621],{"id":620},"easy-installation-and-documentation","Easy Installation and Documentation",[14,623,624],{},"Getting started with Zaptime is as simple as installing the NPM package. The Vue component can be integrated with minimal setup and additional features can be incrementally added when needed.",[14,626,284,627,261],{},[238,628,288],{"href":287,"target":241},[14,630,631,632,261],{},"For complete documentation check our ",[238,633,635],{"href":634,"target":241},"https:\u002F\u002Fdocs.zaptime.app\u002Fguide\u002Fvue-installation.html","developer's docs",[637,638,639],"style",{},"html pre.shiki code .sKWpL, html code.shiki .sKWpL{--shiki-default:#24292E;--shiki-dark:#24292E}html pre.shiki code .sMDDv, html code.shiki .sMDDv{--shiki-default:#22863A;--shiki-dark:#22863A}html pre.shiki code .se37E, html code.shiki .se37E{--shiki-default:#6F42C1;--shiki-dark:#6F42C1}html pre.shiki code .sOTlB, html code.shiki .sOTlB{--shiki-default:#032F62;--shiki-dark:#032F62}html pre.shiki code .sCydW, html code.shiki .sCydW{--shiki-default:#D73A49;--shiki-dark:#D73A49}html pre.shiki code .sMN4m, html code.shiki .sMN4m{--shiki-default:#005CC5;--shiki-dark:#005CC5}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":44,"searchDepth":66,"depth":66,"links":641},[642,643,644,645,646,647],{"id":28,"depth":66,"text":29},{"id":217,"depth":66,"text":218},{"id":253,"depth":66,"text":254},{"id":291,"depth":66,"text":292},{"id":501,"depth":66,"text":502},{"id":620,"depth":66,"text":621},"md",{},"\u002Fblog\u002Fvue",{"title":5,"description":16},"blog\u002Fvue","eRyo5VzKlwnREWP7KxYAXt2X9RGv9UB4T6belbCNQwE",1786537608982]