Skip to main content
Skip table of contents

Wrapping Calendar Components - LWC

GoMeddo provides several Lightning Web Components to display calendars in Lightning pages.

This page shows how to wrap them in your own LWC to:

  • Pre-populate reservations

  • Control filters and highlights

  • Dynamically set availability

  • Provide context-sensitive calendars

Available Calendar Components

Component

Tag

Description

Horizontal Calendar

<b25-multi-calendar-wrapper>

Displays reservations across multiple resources (rows = dimensions)

Vertical Calendar

<b25-single-calendar-wrapper>

Displays reservations for a single resource (or multiple in one row)

Context-Aware Horizontal Calendar

<b25-context-aware-multi-calendar-wrapper>

Adapts to the current record context, showing dimensions via lookup or related list

Horizontal Calendar (b25-multi-calendar-wrapper)

Use for multi-resource scheduling. Each row represents a dimension record (e.g., Staff, Rooms, Resources).

Supports pre-filling reservations, filtering, highlighting, and multi-dimensional availability.

Example: Horizontal Calendar Wrapper for Record Pages

Component

CODE
<template>
  <div if:true={infoLoaded}>
    <b25-multi-calendar-wrapper
      record-id={recordId}
      calendar-id={calendarId}
      object-api-name={objectApiName}
      prototype-reservation={prototypeReservation}
      is-read-only={isReadOnly}
      mda-context={mdaContext}
      max-height={maxHeight}
      max-height-unit={maxHeightUnit}>
    </b25-multi-calendar-wrapper>
  </div>
</template>

Controller

CODE
import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import RESERVATION_FIELD from '@salesforce/schema/Opportunity.ReservationLookup__c';

export default class HorizontalCalendarWrapper extends LightningElement {
  @api recordId;
  @api calendarId;
  @api isReadOnly = false;
  @api maxHeight;
  @api maxHeightUnit = 'px';

  objectApiName;
  mdaContext;

  contextId;
  infoLoaded = false;

  prototypeReservation = {
    sobjectType: 'B25__Reservation__c',
    B25__Staff__c: null
  };

  @wire(getRecord, { recordId: '$recordId', fields: [RESERVATION_FIELD] })
  wireRecord({ data }) {
    if (!data) {
      return;
    }

    const resId = data?.fields?.ReservationLookup__c?.value;

    if (resId) {
      this.objectApiName = 'B25__Reservation__c';
      this.contextId = resId;
    } else {
      this.objectApiName = 'Opportunity';
      this.contextId = this.recordId;
    }

    this.prototypeReservation = {
      ...this.prototypeReservation,
      B25__Staff__c: this.contextId
    };

    this.infoLoaded = true;
  }
}

XML

CODE
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>64.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Horizontal Calendar (wrapped)</masterLabel>
  <description>Wrapper for GoMeddo Horizontal Calendar using LWC.</description>
  <targets>
    <target>lightning__RecordPage</target>
    <target>lightning__AppPage</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightning__RecordPage,lightning__AppPage">
      <property name="calendarId" type="String" label="Calendar" required="true"/>
      <property name="isReadOnly" type="Boolean" label="Read Only"/>
      <property name="maxHeight" type="Integer" label="Max Height"/>
      <property name="maxHeightUnit" type="String" label="Max Height Unit (px|vh)"/>
      <supportedFormFactors>
        <supportedFormFactor type="Small"/>
        <supportedFormFactor type="Large"/>
      </supportedFormFactors>
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

Multi Calendar Properties

Property

Type

Required

Expected Value

Description

calendarId

(calendar-id)

String

The Name of a Calendar record.

This sets the configuration based on the linked Calendar record.

objectApiName

(object-api-name)

String

The sObject API name for the recordId

This sets the sObjectType of the page that the calendar thinks it is displayed on.

prototypeReservation

(prototype-reservation)

Object

An object that represents a Reservation record.

This can be used to prepopulate fields on new reservations being created on the calendar, even if that field is not displayed on the reservation form.

Note: you can include junctions (such as ReservationContacts) or service reservations in the prototype.

dynamicFilters

(dynamic-filters)

Object

An object containing dynamic filter options.

Sets initial values for the dynamic filters available in the multi resource calendar.

See Wrapping Calendar Components - Aura | Passing-Dynamic-Filters for further information.

maxHeight

(max-height)

Number

An integer.

The maximum pixel height that the calendar will stretch to. If the content is larger, a scroll bar will be shown. The minimum allowed value is 650px.

maxHeightUnit

(max-height-unit)

String

A string with value “px” or “vh”.

The unit used for the maximum height of the calendar. Either pixels (px) or percentage of window height (vh).

hiddenDimensionFilterName

(hidden-dimension-filter-name)

String

The name of a globally available dimension filter.

Sets a filter on the dimension records shown in the calendar. This filter will be hidden from the user. Not compatible with hiddenDimensionFilters. The filter needs to be visible to the user that is looking at the calendar. Otherwise an error will be shown.

hiddenDimensionFilters

(hidden-dimension-filters)

Array

A list of filter objects.

Sets filters on the dimension records shown in the calendar. These filters are not visible to users.

See Wrapping Calendar Components - Aura | Passing-Hidden-Filtersfor further information.

hiddenReservationFilterName

(hidden-reservation-filter-name)

String

The name of a globally available reservation filter.

Sets a filter on the reservation records shown in the calendar. This filter will be hidden from the user. Not compatible with hiddenReservationFilters. The filter needs to be visible to the user that is looking at the calendar. Otherwise an error will be shown.

hiddenReservationFilters

(hidden-reservation-filters)

Array

A list of filter objects.

Sets filters on the reservation records shown in the calendar. These filters are not visible to users.

See Wrapping Calendar Components - Aura | Passing-Hidden-Filtersfor further information.

filterIdentifierPrefix

(filter-identifier-prefix)

String

A string.

Any calendars with the same filterIdentifierPrefix will share saved filters. By default the name of the calendar record is used. This allows you to share filters between calendars or have separate filters for the same calendar.

unfilteredDimensionIds

(unfiltered-dimension-ids)

A list of record ids.

A list of record ids.

Allows you to limit the dimension records that are displayed on the calendar. Any additional filters will never allow records outside of this list to be displayed.

isReadOnly

(is-read-only)

Boolean

A true / false value.

When this property is set to true, the calendar does not allow the users to create or modify reservations. It will only display the reservations that are in the system.

availabilityFilteringEnabled

(availability-filtering-enabled)

Boolean

A true / false value.

When enabled all dimension records that are fully unavailable in the current view will be hidden.

mdaContext

(mda-context)

Object

An MDAContext object.

Context for filtering multi-dimensional availabilities.

highlights

A list of highlight objects.

A list of highlight objects.

Highlight configuration rules

See Calendar Highlights

showPointerOnReadOnlyReservations

(show-pointer-on-read-only-reservations)

Boolean

A true / false value.

Determines whether to show the mouse pointer when hovering over calendar reservations when it is set to read only mode.

pinnedDimensionIds

(pinned-dimension-ids)

A list of dimension ids.

A list of dimension ids.

Allows specific dimensions to be pinned to the top of the calendar.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.