The Widgets Showcase page provides an overview of various configurations and usage scenarios for the calendar widget. It includes examples ranging from basic setup to advanced features such as month switchers, custom styles, and more. Check out the Widgets Showcase to explore all the possibilities and get inspired for your own implementation.

Custom render element

<div id="calendarWidget"></div>

To initialize the Calendar Widget, place the following code anywhere below the Calendar Widget component(s). (Recommended placement is at the bottom of the document’s body section)

<script src="https://calendar.finale-cdn.uk/latest/calendar.js"></script>
<script>
(function (LTD && LTD.Calendar) {
    LTD.Calendar.init({
        rootElementId: 'your-root-element-id',
        affiliateId: 'your-affiliate-id',
        eventUrlId: 'your-event-url-id',
        performanceSelectionRedirectUrl: 'your-redirect-url',
        // Optional parameters can be added here
    });
}(window.LTD));
</script>

Initialization properties

Calendar can provide communication with your handlers via event handlers bound to following events. Each CustomEvent object can carry additional data bound to the detail property.

<button onClick={() => (window).LTD.Calendar.toggle()}>
    Toggle Calendar
</button>

The Calendar widget provides extensive options for styling and customization. Below, you'll find the full list of CSS classes and variables you can use to adapt the widget to your needs.

When adjusting the colours of text, backgrounds and other elements, consider sufficient contrast to meet accessibility standards. This helps ensure your content is readable for all users, including those with visual impairments.

CSS Variables

The widget uses the following CSS variables for consistent styling. You can override them in your custom styles:

<style>
    /* --Variables-- */
    :root {
    --ltd-calendar-widget-font-family-primary: [your-value];
    --ltd-calendar-widget-font-family-secondary: [your-value];
    --ltd-calendar-widget-color-primary: [your-value];
    --ltd-calendar-widget-color-white: [your-value];
    --ltd-calendar-widget-color-grey: [your-value];
    --ltd-calendar-widget-color-black: [your-value];
    --ltd-calendar-widget-color-icon-close: [your-value];
    --ltd-calendar-widget-radius: [your-value];
    }
    </style>

Components and Classes

CalendarWrapper

• widget-calendar-main-wrapper: Wraps the entire calendar app and performance header, allowing customers to style the main container.
• widget-calendar-main-wrapper--overlay: Wraps the overlay layer of the calendar widget, allowing customers to style the overlay container (mobile-only).

Calendar

• widget-calendar__wrapper: Wraps the entire calendar component, allowing customers to style the container.
• widget-calendar__notice: Used to style the notice that appears when no events are available.
• widget-calendar__table: Allows customers to customize the appearance of the calendar table.
• widget-calendar__table-head: Used to style the table header where the day names are displayed.

CalendarCell

• widget-calendar-cell: Wraps the content of the calendar cell, allowing custom styling.
• widget-calendar-cell--selected: Styles the selected state of a cell.
• widget-calendar-cell--offer: Styles the cell when a special offer is available.
• widget-calendar-cell--disable: Styles the disabled state of a cell.
• widget-calendar-cell__offer-icon: Styles the icon for special offers.

CalendarMonthsSwitcher

• widget-calendar-months-switcher: Wraps the entire month switcher component, allowing customers to style the main container.
• widget-calendar-months-switcher__dropdown: Styles the dropdown element for selecting months in the month switcher.
• widget-calendar-months-switcher__button: Styles the buttons used for switching between months.

CalendarMobileFooter

• widget-calendar-mobile-footer__wrapper: Wraps the entire mobile footer, allowing customers to style the main container.
• widget-calendar-mobile-footer: Styles the main mobile footer container.
• widget-calendar-mobile-footer__price: Styles the pricing section of the mobile footer.
• widget-calendar-mobile-footer__price-label: Styles the label for the pricing section in the mobile footer.
• widget-calendar-mobile-footer__price-value: Styles the price in the mobile footer.
• widget-calendar-mobile-footer__notice: Styles the notice when no performances are available in the mobile footer.

CalendarPerformanceItem

• widget-calendar-performance-item__wrapper: Wraps the entire performance item, allowing customers to style the main container.
• widget-calendar-performance-item__time: Styles the time display for the performance.
• widget-calendar-performance-item__price: Styles the price display for the performance.
• widget-calendar-performance-item__offer: Styles the special offer section.
• widget-calendar-performance-item__notice: Styles the notice section for any special notices.

CalendarPerformanceSelector

• widget-calendar-performance-selector__notice: Styles the notice displayed when no performances are available.
• widget-calendar-performance-selector__divider: Styles the divider between performance items.

PerformanceHeader

• widget-calendar-performance-header__wrapper: Wraps the entire performance header, allowing customers to style the main container.
• widget-calendar-performance-header__title: Styles the title of the performance header.

PerformanceOffer

• widget-calendar-offer: Wraps the entire offer section, allowing customers to style the main offer container.
• widget-calendar-offer__header: Styles the header of the offer section.
• widget-calendar-offer__title: Styles the title of the offer.
• widget-calendar-offer__date: Styles the date range display in the offer.
• widget-calendar-offer__icon: Styles the icon in the offer header.
• widget-calendar-offer__content-wrapper: Styles the wrapper around the offer content.
• widget-calendar-offer__content: Styles the main content of the offer.
• widget-calendar-offer__text: Styles the text content within the offer.

<style>
.widget-calendar__wrapper, .widget-calendar-months-switcher__dropdown {
    background-color: rgb(240, 240, 240) !important;
}

.widget-calendar-cell--selected {
    background-color: #fff !important;
}

.widget-calendar__wrapper {
    border-radius: 0px !important;
}

.widget-calendar-performance-header__title {
    color: #fff !important;
}

:root {
    --ltd-calendar-widget-color-primary: #630c79 !important;
    --ltd-calendar-widget-radius: 0px !important;
}

.widget-calendar-main-wrapper {
    background-color: #630c79 !important;
    padding: 20px 10px 10px !important;
    border-radius: 0px !important;
}

.widget-calendar-months-switcher__button {
    border: 1px solid #630c79 !important;
}
</style>