# Calendar Widget Customization > More Tutorials from the Community https://youtu.be/RSU2w1qPNSs https://youtu.be/yWd2HvfQgG0 https://youtu.be/gSwhkno90Zc https://youtu.be/xhPyG7cGLf8… - Source: https://docs.ghlcustomercare.com/docs/calendars-and-appointments/creating-calendars/calendar-widget-customization - Section: Calendars & Appointments / Creating Calendars - Reading time: 3 min - Images: 8, each explained below - Modified on Wed, 8 Jul at 4:32 AM --- ### **More Tutorials from the Community ** [https://youtu.be/RSU2w1qPNSs](https://youtu.be/RSU2w1qPNSs) [https://youtu.be/yWd2HvfQgG0](https://youtu.be/yWd2HvfQgG0) [https://youtu.be/gSwhkno90Zc](https://youtu.be/gSwhkno90Zc) [https://youtu.be/xhPyG7cGLf8](https://youtu.be/xhPyG7cGLf8) **TABLE OF CONTENTS** - [More Tutorials from the Community](#more-tutorials-from-the-community) - [What is Calendar Widget Customization?](#what-is-calendar-widget-customization)[](#how-to-customize-your-widget) - [How to Customize your Widget?](#how-to-customize-your-widget)[](#note-widget-customizations-work-only-with-neo-widget) - [Note: Widget Customizations work ONLY with NEO WIDGET](#note-widget-customizations-work-only-with-neo-widget)[](#services-booking-flow-ui-enhancements) - [Services Booking Flow UI Enhancements](#services-booking-flow-ui-enhancements)[](#examples) - [Examples](#examples)[](#frequently-asked-questions-faqs) - [Frequently Asked Questions (FAQs)](#frequently-asked-questions-faqs)[](#pro-tip) - [Pro Tip](#pro-tip) --- **Calendar Widget - 'Continue' Button Update** Quick heads up - we've jazzed things up a bit and moved the **Continue button** in the calendar widget to a new spot. If you have applied any CSS customizations, kindly verify and adjust them accordingly to align with the **updated placement.** # ** ![More Tutorials from the Community (image 1 of 8)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014897818/original/gjK47oHkNCfIh1EE1GujIBvd3VT6uyg_Vg.png) **More Tutorials from the Community (image 1 of 8)** This screenshot appears in the "More Tutorials from the Community" section of "Calendar Widget Customization". The text alongside this image reads: Calendar Widget - 'Continue' Button Update Quick heads up - we've jazzed things up a bit and moved the Continue button in the calendar widget to a new spot. If you have applied any CSS customizations, kindly verify and adjust them accordingly to align with the updated placement. Immediately after, the guide continues: Calendar Widget Customization is designed to give you control over the appearance and functionality of your widget. With this powerful feature, you can personalize your widget according to your preferences, making it uniquely your s. - What this covers: Calendar Widget - 'Continue' Button Update Quick heads up - we've jazzed things up a bit and moved the Continue button in the calendar widget to a new spot. If you have applied any CSS customizations, kindly verify and adjust them accordingly to align with the updated placement. - Next: Calendar Widget Customization is designed to give you control over the appearance and functionality of your widget. With this powerful feature, you can personalize your widget according to your preferences, making it uniquely your s. ** # ** ![More Tutorials from the Community (image 2 of 8)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014897647/original/xQ9cBD4JkovK-dPivscHoaZTnruf6fRZAg.png) **More Tutorials from the Community (image 2 of 8)** This screenshot appears in the "More Tutorials from the Community" section of "Calendar Widget Customization". The text alongside this image reads: Calendar Widget - 'Continue' Button Update Quick heads up - we've jazzed things up a bit and moved the Continue button in the calendar widget to a new spot. If you have applied any CSS customizations, kindly verify and adjust them accordingly to align with the updated placement. Immediately after, the guide continues: Calendar Widget Customization is designed to give you control over the appearance and functionality of your widget. With this powerful feature, you can personalize your widget according to your preferences, making it uniquely your s. - What this covers: Calendar Widget - 'Continue' Button Update Quick heads up - we've jazzed things up a bit and moved the Continue button in the calendar widget to a new spot. If you have applied any CSS customizations, kindly verify and adjust them accordingly to align with the updated placement. - Next: Calendar Widget Customization is designed to give you control over the appearance and functionality of your widget. With this powerful feature, you can personalize your widget according to your preferences, making it uniquely your s. ** --- # What is Calendar Widget Customization? Calendar Widget Customization is designed to give you control over the appearance and functionality of your widget. With this powerful feature, you can personalize your widget according to your preferences, making it uniquely yours.  --- ## How to Customize your Widget? - Navigate to **Calendars → Calendar Settings**. - Click **Edit** for the calendar you want to customize. - Open **Advanced settings → Widget appearance** to update widget customization options. ## Note: Widget Customizations work **ONLY** with **NEO** **WIDGET** --- **Understanding Customization Options:** Here, you have the freedom to tailor your calendar widget to suit your preferences. Explore the following customization options: - **Primary Colour:** This will impact buttons, dates, time slots, and various actions within the widget such as Staff Selection, Add Guests etc. - **Background Colour:** The background color sets the tone for both the date-time selector and the form. If you've got a **custom form**, its background will mirror the chosen background color, but the  form's fields are determined by your specific custom form settings.  ![Note: Widget Customizations work ONLY with NEO WIDGET (image 3 of 8)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014006095/original/NJAVE46q85aAL4fkmXnC4ppgKsH9vmx5XA.png) **Note: Widget Customizations work ONLY with NEO WIDGET (image 3 of 8)** This screenshot appears in the "Note: Widget Customizations work ONLY with NEO WIDGET" section of "Calendar Widget Customization". The text alongside this image reads: Background Colour: The background color sets the tone for both the date-time selector and the form. If you've got a custom form, its background will mirror the chosen background color, but the form's fields are determined by your specific custom form settings. Immediately after, the guide continues: Note: When using custom forms, make sure the theme syncs up with your widget customizations for a seamless look. - What this covers: Background Colour: The background color sets the tone for both the date-time selector and the form. If you've got a custom form, its background will mirror the chosen background color, but the form's fields are determined by your specific custom form settings. - Controls: custom form, Example of, Customized Widget with CUSTOM FORM - Next: Note: When using custom forms, make sure the theme syncs up with your widget customizations for a seamless look. ![Note: Widget Customizations work ONLY with NEO WIDGET (image 4 of 8)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014398017/original/XvNYZLuXiGZTLY-WH9ch3Jt2Lei0XtfQmA.png) **Note: Widget Customizations work ONLY with NEO WIDGET (image 4 of 8)** This screenshot appears in the "Note: Widget Customizations work ONLY with NEO WIDGET" section of "Calendar Widget Customization". The text alongside this image reads: Background Colour: The background color sets the tone for both the date-time selector and the form. If you've got a custom form, its background will mirror the chosen background color, but the form's fields are determined by your specific custom form settings. Immediately after, the guide continues: Note: When using custom forms, make sure the theme syncs up with your widget customizations for a seamless look. - What this covers: Background Colour: The background color sets the tone for both the date-time selector and the form. If you've got a custom form, its background will mirror the chosen background color, but the form's fields are determined by your specific custom form settings. - Controls: custom form, Example of, Customized Widget with CUSTOM FORM - Next: Note: When using custom forms, make sure the theme syncs up with your widget customizations for a seamless look. Note: When using custom forms, make sure the theme syncs up with your widget customizations for a seamless look. --- **Example of** **Customized Widget with CUSTOM FORM** ![Note: Widget Customizations work ONLY with NEO WIDGET (image 5 of 8)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014014926/original/zLgNtEM6IsBh8QNfvYInGPsjbAKYbrSO0g.png) **Note: Widget Customizations work ONLY with NEO WIDGET (image 5 of 8)** This screenshot appears in the "Note: Widget Customizations work ONLY with NEO WIDGET" section of "Calendar Widget Customization". The text alongside this image reads: Example of Customized Widget with CUSTOM FORM. Immediately after, the guide continues: Button Text: Customize the text displayed on the button when booking an appointment. This is the text that will be displayed on the final step of booking the appointment. Examples: Book now, Schedule Meeting, Book Appointment. - What this covers: Example of Customized Widget with CUSTOM FORM - Controls: custom form, Example of, Customized Widget with CUSTOM FORM - Next: Button Text: Customize the text displayed on the button when booking an appointment. This is the text that will be displayed on the final step of booking the appointment. Examples: Book now, Schedule Meeting, Book Appointment. - **Button Text:** Customize the text displayed on the button when booking an appointment. This is the text that will be displayed on the final step of booking the appointment. **Examples:** Book now, Schedule Meeting, Book Appointment. ![Note: Widget Customizations work ONLY with NEO WIDGET (image 6 of 8)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014007583/original/aDiDCOr27lN0jT77qxYPGn_v9_Wz3Bc1Bw.png) **Note: Widget Customizations work ONLY with NEO WIDGET (image 6 of 8)** This screenshot appears in the "Note: Widget Customizations work ONLY with NEO WIDGET" section of "Calendar Widget Customization". The text alongside this image reads: Button Text: Customize the text displayed on the button when booking an appointment. This is the text that will be displayed on the final step of booking the appointment. Examples: Book now, Schedule Meeting, Book Appointment. Immediately after, the guide continues: Hide Calendar Details: You can now hide the calendar name, description, and details such as duration, date & time, recurring details, and timezone from the left panel. - What this covers: Button Text: Customize the text displayed on the button when booking an appointment. This is the text that will be displayed on the final step of booking the appointment. Examples: Book now, Schedule Meeting, Book Appointment. - Controls: custom form, Example of, Customized Widget with CUSTOM FORM - Next: Hide Calendar Details: You can now hide the calendar name, description, and details such as duration, date & time, recurring details, and timezone from the left panel. - **Hide Calendar Details:** You can now hide the calendar name, description, and details such as duration, date & time, recurring details, and timezone from the left panel. Note: If you wish not to show the logo, simply remove it from the meeting details tab ![Note: Widget Customizations work ONLY with NEO WIDGET (image 7 of 8)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014398556/original/SsBTXgr3tI0qRumH1PL4AdbJNGSDBnrWIQ.png) **Note: Widget Customizations work ONLY with NEO WIDGET (image 7 of 8)** This screenshot appears in the "Note: Widget Customizations work ONLY with NEO WIDGET" section of "Calendar Widget Customization". The text alongside this image reads: Note: If you wish not to show the logo, simply remove it from the meeting details tab. Immediately after, the guide continues: Preview Your Changes: Utilize the "Preview Widget" feature to visualize how your changes will appear during the appointment booking process. Each time a new change is made, you will need to click on the "Preview Widget" option to see the…. - What this covers: Note: If you wish not to show the logo, simply remove it from the meeting details tab - Controls: custom form, Example of, Customized Widget with CUSTOM FORM - Next: Preview Your Changes: Utilize the "Preview Widget" feature to visualize how your changes will appear during the appointment booking process. Each time a new change is made, you will need to click on the "Preview Widget" option to see the updated setting. - **Preview Your Changes:** **Utilize the "Preview Widget" feature to visualize how your changes will appear during the appointment booking process. Each time a new change is made, you will need to click on the "Preview Widget" option to see the updated setting.** - **Resetting to Default:** If needed, the "Reset to Default" option will revert all customizations to the default blue and white calendar widget settings. ![Note: Widget Customizations work ONLY with NEO WIDGET (image 8 of 8)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155014008386/original/1VCnPDtft7VclBxvCMTAZoZIjroZE_xmhw.png) **Note: Widget Customizations work ONLY with NEO WIDGET (image 8 of 8)** This screenshot appears in the "Note: Widget Customizations work ONLY with NEO WIDGET" section of "Calendar Widget Customization". The text alongside this image reads: Resetting to Default: If needed, the "Reset to Default" option will revert all customizations to the default blue and white calendar widget settings. Immediately after, the guide continues: Small booking-flow improvements can make scheduling feel clearer and more intuitive for customers. These updates improve navigation, visual quality, and booking clarity without changing how the core scheduling flow works. - What this covers: Resetting to Default: If needed, the "Reset to Default" option will revert all customizations to the default blue and white calendar widget settings. - Controls: custom form, Example of, Customized Widget with CUSTOM FORM - Next: Small booking-flow improvements can make scheduling feel clearer and more intuitive for customers. These updates improve navigation, visual quality, and booking clarity without changing how the core scheduling flow works. --- ## **Services Booking Flow UI Enhancements** Small booking-flow improvements can make scheduling feel clearer and more intuitive for customers. These updates improve navigation, visual quality, and booking clarity without changing how the core scheduling flow works. Recent Services booking improvements include: - a Back button for easier navigation through the booking flow - higher-resolution service images for a clearer visual experience - an auto-hidden header when no company name or logo is configured, which is especially useful for embedded booking experiences - a more clearly displayed timezone label on the slot-selection screen so customers know which timezone they are booking in These changes help create a smoother and more polished booking experience for both standalone and embedded scheduling flows. --- ## **Examples** ## **Frequently Asked Questions (FAQs)** **Q: Which calendars support customization?** A: The customization feature is available for all calendar types, including Event, Round Robin, Class Booking, Collective, and Service Calendars. Note: Customizations will **not** work in the **Service Menu** **Q: Can I incorporate a custom form?** A: Absolutely! You can add a custom form, but ensure that your custom form theme complements the overall widget customizations. **Q: What if I have added CSS customizations?** A: CSS customizations take precedence over the widget settings. Your custom styles will be prioritized, ensuring that your personalized design choices shine through in the calendar widget **Q: I want the entire left panel disabled, but even after turning off settings, I still see it. What should I do?** A: To fully disable the entire left panel, make sure to check the following settings: Calendar Details Settings: - Disable Calendar Name. - Disable Calendar Description. - Disable Calendar Details. Logo Removal: - Remove any logo associated with the calendar. Customizations Tab: - Disable "Allow Select Staff" option from the Customizations tab. --- ## **Pro Tip** For the best visual results, we recommend selecting contrasting primary and background colors. Striking a balance between light and dark colors often yields the most aesthetically pleasing outcomes. Experiment with combinations until you find the perfect look for your customized calendar widget. --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com