--- title: "Calendar: Add Appointment Booking Calendar to the Page" slug: "calendar-add-appointment-booking-calendar-in-the-page" description: "Embed a dynamic calendar on your funnel page for seamless appointment booking, integrating it with ClickFunnels' Appointments App." tags: ["Appointments", "editor"] updated: 2025-08-21T16:03:42Z published: 2025-08-21T16:03:42Z canonical: "support.myclickfunnels.com/calendar-add-appointment-booking-calendar-in-the-page" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.myclickfunnels.com/llms.txt > Use this file to discover all available pages before exploring further. # Calendar: Add Appointment Booking Calendar to the Page The **Calendar** element allows you to embed a dynamic appointment booking widget into your funnel page. This widget seamlessly integrates with your pre-created Event Types from the **Appointments** app in your ClickFunnels workspace. With this element, users can effortlessly book their preferred time slots directly on your funnel page, ensuring a streamlined booking experience. In this article, you will learn how to use the Calendar element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-DZX3V7WO.png) --- ## Requirements - An active ClickFunnels account - A funnel page - An [Event Type](/v1/docs/appointments-how-to-create-and-manage-event-types) created in the Appointments app in your workspace --- ## Creating an Event Type 1. From the left-hand main menu, click the **Appointments** app**.** 2. Select **Event Types.** 3. Click the **Add Event Type** button to create a new event. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-QJL25IM3.png) 4. Choose the **Event Type** you wish to create. The available options are: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-5KZV7V36.png) - **One-on-One:** This event type is ideal for 1:1 interviews, sales meetings, or casual coffee chats. It involves one host and one invitee. - **Group (COMING SOON):** Suitable for webinars or online classes, this event type will involve one host and a group of invitees. - **Collective:** Perfect for group interviews or group sales calls, this event type involves multiple hosts meeting with one invitee. - **Round Robin:** Ideal for evenly distributing incoming sales calls, this event type features one rotating host meeting with one invitee. 💡 Learn more about creating events: [Appointments - How to Create and Manage Event Types](/v1/docs/appointments-how-to-create-and-manage-event-types) --- ## Attaching the Appointment Event Type in the Funnel Step 1. Navigate to the funnel step where you want to use the appointment event type. 2. Click the **three-dot** icon on the funnel step (such as an Opt-in page), and select **Manage Event Types**. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(335).png) 3. In the sidebar, click **Attach Event** and select the event you want to link to this funnel step. Once you've done this, click **Update**. --- ## Adding a Calendar Element in the Page Editor 1. Inside the page editor, add a **Section** where you want to place the element. 2. Add a **Row** within that section. 3. Click the orange **+** **Plus** or **Add New Element** button inside the row to insert a new element. 4. From the **Misc (Miscellaneous)** category, select the **Calendar** element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-6ZS7ONJP.png) Once the **Calendar** element is added, you can customize its appearance to fit your page design. > [!TIP] > **Tips:** > > The **Calendar** is a fully integrated widget that displays key booking components, such as event details, a calendar, and a contact form. To ensure it displays correctly and avoids content distortion, consider placing this element within a one-column row to provide adequate space. --- ## Customizing the Calendar Element When you hover over an element, its border will be highlighted in orange. To access an element's settings, click on the **gear** **⚙️ icon** or click directly on the element. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1731538243619.png) ### Top Margin ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1751891362357.png)The **Top Margin** setting lets you control the space between the current container (section, row, flex, and element) and the container directly above it. If no previous container exists, the margin will be applied relative to the parent container. If no preceding container is added, the **Body** will be the parent. You can set top margin values independently for desktop and mobile by using the device icons (🖥️ & 📱 ). If no mobile value is specified, it will inherit the desktop setting by default. Use the slider or manually enter a value in pixels (`px`) or percentage (`%`) to create consistent spacing across screen sizes. ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1748441653595.png) ### Control Panel The **Control Panel** appears at the bottom of every container(Section, Row, Flex, and Element) in the page editor, offering quick access to essential settings and actions for that container. Here’s what each icon represents: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image(47).png) - **ALL**: The container will be visible on all devices (desktop, tablet, and mobile). - **Desktop (**🖥️**) Icon**: The container will only be visible in desktop view. - **Mobile (**📱**) Icon**: The container will only be visible in mobile view. - **Eye** **(👁️)** **Icon**: Use this to hide the container from the page. Once clicked, the container will be hidden in the editor but not deleted. You can click the **Layout** menu in the top navigation bar to find the hidden containers. Select All, Desktop, or Mobile icon to unhide in the editor. - **Code** **()** **Icon**: This icon opens the code editor, where you can insert custom CSS or JavaScript code to modify the container's behavior or styling. - **Trash (**🗑️**) Icon**: Removes the container from the page editor entirely. ### Advanced Settings ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-1748535637061.png) To further customize your container (section, row, column, and element), ClickFunnels provides **Advanced** settings that allow you to control style, advanced CSS, animation, and rendering logic. We’ve separated these advanced features into dedicated articles to avoid overwhelming you with too much content in one place and to keep our documentation concise. Explore the following resources for more details: - [**Advanced Settings - Customize Styles**](/v1/docs/advanced-settings-customize-styles): Learn how to populate contents dynamically, position containers, and apply z-index. - [**Advanced Settings - Customize Animation**](/v1/docs/advanced-settings-customize-animation): Learn how to add animations, control entry and exit effects, and adjust animation delay. - [**Advanced Settings - Customize Logic**](/v1/docs/advanced-settings-customize-logic): Learn how to apply conditional logic to elements and add custom attributes. --- ## Previewing When an Event Type is attached to the funnel step and the **Calendar** element is added, you can use the **Preview** 👁️ icon in the editor to view how the appointment widget appears. The widget will dynamically display all necessary details from your Event Type, including the event name, host information, meeting time and location, time zone, and a calendar showing available slots. Depending on your Event Type setup, users will also see options to select a time slot and the booking form. This preview provides a representation of how your Calendar appears: ![](https://cdn.document360.io/e3762771-4bea-47c2-a830-5473d543417a/Images/Documentation/image-I3C5D3S6.png) --- ## Limitations > [!CAUTION] > 1. **Exclusive to Funnel Pages:** The Calendar element is designed to work exclusively within **funnel pages**. It cannot be used on the site, landing pages, blogs, courses, or other pages of your workspace. > 2. **No Payment Processing for Paid Events:** If your Event Type requires payment, the **Calendar** element will not handle payment processing during the booking. Instead, you can use one of the following alternative methods: > > For detailed instructions on these methods, refer to the article [Appointments - How to Publish Your ClickFunnels Appointments](/v1/docs/appointments-how-to-publish-your-clickfunnels-appointments). > - **Option 2**: Embed the booking form directly on your webpage. > - **Option 3**: Share the direct event link with your audience for seamless access. > 3. **Automatic Funnel Navigation After Booking:** When using the Calendar element in a funnel, users will automatically be redirected to the next funnel step after booking. The “After Booking” settings defined in the “Event Type” will not take priority. If you prefer not to show the next funnel step after booking, consider publishing your event using Option 2 or Option 3. > 4. **One Scheduler Per Page:** Only one Calendar element can function properly on a single page. Adding multiple scheduler elements may lead to display or functionality issues. ## Related - [Getting Started with Styles](/getting-started-with-styles.md) - [Appointments - How to Create and Manage Event Types](/appointments-how-to-create-and-manage-event-types.md) - [Appointments - How to Add a Conferencing Connection](/appointments-how-to-add-a-conferencing-connection.md) - [Appointments - How to Manage Scheduled Events](/appointments-how-to-manage-scheduled-events.md) - [Appointments - How to Publish Your ClickFunnels Appointments](/appointments-how-to-publish-your-clickfunnels-appointments.md) - [Appointments - Define Your Availability with Availability Schedules](/appointments-define-your-availability-with-availability-schedules.md) - [Appointments - How to Connect and Manage a Calendar](/appointments-how-to-connect-and-manage-a-calendar.md) - [Appointments - Getting Started with ClickFunnels Appointments](/appointments-getting-started-with-clickfunnels-appointments.md)