Skip to main content

Calendar Widget Customization

Enhance your booking experience by personalizing your calendar widget in Stack. This guide will walk you through customizing your widget to reflect your style and preferences.

Table of Contents​

What is Calendar Widget Customization?​

Calendar Widget Customization in Stack allows you to tailor the appearance and functionality of your widget. Make it uniquely yours by adjusting colors, button text, and more, to suit your personal or brand aesthetic.

How to Customize Your Widget​

  1. Navigate to Calendar Settings
    Access your calendar settings to begin customization.

  2. Select the Calendar
    Click on "Edit" for the specific calendar you wish to modify.

  3. Open the Customizations Tab
    Head to the "Customizations" tab to start personalizing your widget.

Customization Options​

  • Primary Color: This setting affects buttons, dates, time slots, and actions like Staff Selection and Add Guests.

  • Background Color: Sets the tone for the date-time selector and form. If using a custom form, ensure the background color matches your widget for a cohesive look.

  • Button Text: Customize the text on the booking button. Examples include "Book Now", "Schedule Meeting", or "Book Appointment".

  • Hide Calendar Details: Choose to hide calendar name, description, and details such as duration, date & time, recurring details, and timezone from the left panel.

  • Preview Your Changes: Use the "Preview Widget" feature to see how your changes appear during the booking process. Remember to preview after each change.

  • Resetting to Default: If needed, revert all customizations to the default settings using the "Reset to Default" option.

Frequently Asked Questions (FAQs)​

Q: Which calendars support customization?
A: Customization is available for all calendar types, including Event, Round Robin, Class Booking, Collective, and Service Calendars.

Q: Can I incorporate a custom form?
A: Yes, you can add a custom form. Ensure your form theme complements the widget customizations for a seamless appearance.

Q: What if I have added CSS customizations?
A: CSS customizations will override widget settings, allowing your personalized design choices to take precedence.

Q: How can I disable the entire left panel?
A: To fully disable the left panel, ensure the following:

  • Disable Calendar Name, Description, and Details.
  • Remove any associated logo.
  • Disable the "Allow Select Staff" option in the Customizations tab.

Pro Tip​

For the best visual results, select contrasting primary and background colors. A balance of light and dark colors often creates the most appealing look. Experiment with different combinations to find the perfect style for your customized calendar widget.