> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Build a Custom Booking Calendar Page
## Article: Build a custom Booking Calendar page
## Article Link: https://dev.wix.com/docs/develop-websites/articles/wix-apps/wix-app-collections/wix-bookings/build-a-custom-booking-calendar-page.md
## Article Content:
# Velo: Build a Custom Booking Calendar Page
You can replace your site’s default [Wix Booking Calendar page](https://support.wix.com/en/article/wix-bookings-customizing-your-calendar-page) with your own customized version. This enables you to modify or extend the page’s functionality to suit your precise business needs.
> **Important:** This feature is currently not supported with [Multi-service bookings appointments](https://support.wix.com/en/article/wix-bookings-scheduling-multi-service-appointments).
To integrate the page into your [site’s booking flow](https://support.wix.com/en/article/about-wix-bookings-pages) and implement its functionality, you need to add code to the page and use Velo APIs.
Your code has to do several things:
* Get data about the selected service and query session availability data.
* Handle UI initialization and interactions.
* Implement any customized business logic.
* Direct users to the next page in the flow.
## Step 1 | Add a custom Calendar page to your site
To create a custom calendar page, do one of the following:
Wix Studio
1. Click  and then **Start Coding** from the sidebar on the left side of the editor.
2. Click **Pages**  on the sidebar.
3. On the **Booking Calendar** (under **Bookings Pages**), click the More Actions icon .
4. Click **Replace with custom page**.
5. In the confirmation panel, click **Replace**.
Wix Editor
1. Turn on [Dev Mode](https://support.wix.com/en/article/about-velo-by-wix#to-enable-velo-on-your-site).
2. Click **Pages**  on the left side of the editor.
3. Click **Bookings Pages**, and then on the **Booking Calendar** page, click .
4. Click **Replace with custom page**.
5. In the confirmation panel, click **Replace**.
## Step 2 | Design your custom page
[Add elements to the page](https://support.wix.com/en/article/wix-editor-adding-and-deleting-elements) to create your business’s customized design and functionality, such as text, buttons, and images.
At a minimum, these elements must:
* Display information about the selected service.
* Provide the site visitor with a way to view availability and select a slot.
* Provide an action button that navigates to the next page in the flow (usually the Booking Form).
## Step 3 | Add Velo code to your page
1. Use the [`getAppPageData()`](https://www.wix.com/velo/reference/wix-window-frontend/getapppagedata) function to get the [service object](https://www.wix.com/velo/reference/wix-window-frontend/app-page-data#wix-window-frontend_app-page-data_booking-calendar-page) associated with the page.
For example:
``` ts
import wixWindowFrontend from 'wix-window-frontend';
import { availabilityCalendar } from 'wix-bookings.v2';
import wixLocation from 'wix-location';
$w.onReady(async function () {
const pageData = await wixWindowFrontend.getAppPageData();
const serviceId = pageData.service.id;
});
```
> **Note**: To receive a populated page data object using `getAppPageData()` when testing your code, do the following:
>
> * Create at least one Bookings service.
> * Preview the Bookings Calendar page and then return to the editor.
2. Get the service’s session availability data using the [`availabilityCalendar.queryAvailability()`](https://www.wix.com/velo/reference/wix-bookings-v2/availabilitycalendar/queryavailability) function.
The following example queries data for the upcoming week:
```ts
const today = new Date();
const nextWeek = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);
let query = {
filter: {
serviceId: [serviceId],
startDate: today,
endDate: nextWeek,
}
}
const selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const options = {
timezone: selectedTimezone
};
const availability = await availabilityCalendar.queryAvailability(query, options);
const entries = availability.availabilityEntries;
```
3. Initialize your custom page’s elements with the service information and availability data that you retrieved in the previous steps. Use the [`$w` namespace](https://www.wix.com/velo/reference/w) to control the page’s elements.
For example:
```ts
$w('#serviceName').text = myService.name;
const slotOptions = [];
entries.forEach((entry, index) => {
const label = `${entry.slot.startDate}-${entry.slot.endDate}`;
const value = `${index}``;
slotOptions.push({ label, value });
});
$w('#dropdown').options = slotOptions;
```
4. Depending on the functionality you’re developing, implement any business logic that your customized page requires.
5. Add an [event handler](https://support.wix.com/en/article/velo-reacting-to-user-actions-using-events) to the page’s action button so that it navigates to the next page in the flow, which is typically your site’s Booking Form. You can [create a link to a preloaded Booking Form](https://www.wix.com/velo/reference/wix-bookings/shareable-booking-form-links), specifying the appropriate query params based on the user's selections.
For example:
```ts
$w('#nextButton').onClick(() => {
const selectedIndex = $w('#dropdown').selectedIndex;
const selectedSlot = entries[selectedIndex].slot;
let queryParams = `?bookings_serviceId=${serviceId}&bookings_resourceId=${selectedSlot.resource._id}&bookings_startDate=${encodeURIComponent(selectedSlot.startDate)}&bookings_endDate=${encodeURIComponent(selectedSlot.endDate)}&bookings_timezone=${selectedTimezone}`;
const nextUrl = "/booking-form" + queryParams;
wixLocation.to(nextUrl);
})
```
Your custom page can now display the service’s data, provide site visitors with an interface for selecting an available slot, and direct them to the next page in the booking flow.