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
Mobile Calendar	<b25-mobile-calendar-wrapper>	Displays reservations for a single resource in a mobile friendly format.

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

HTML

<template>
  <div lwc:if={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

JS

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

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>65.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.

Mobile Calendar (b25-mobile-calendar-wrapper)

Use for displaying reservation for a single resource in a mobile friendly format.

Supports providing a reservation prototype (use for pre-populate field on new reservations) and hidden filters.

Example

Component

HTML

<template>
  <b25-mobile-calendar-wrapper
      calendar-name="SingleResourceCalendar"
      start-date="2025-12-08"
      record-id="a0hQI00000BiaEMYAZ"
      prototype-reservation={myPrototypeReservation}>
  </b25-mobile-calendar-wrapper>
</template>

Make sure that the referenced calendar is of record type Single Resource Calendar

Controller

JS

import { LightningElement, track } from 'lwc';

export default class MobileCalendarHost extends LightningElement {
    myPrototypeReservation = {
        sobjectType: 'B25__Reservation__c',
        B25__Title__c: 'Test Title'
    };
}

XML

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>65.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Mobile Calendar (wrapped)</masterLabel>
  <description>Wrapper for GoMeddo Mobile Calendar using LWC.</description>
  <targets>
    <target>lightning__RecordPage</target>
    <target>lightning__AppPage</target>
    <target>lightning__HomePage</target>
  </targets>
</LightningComponentBundle>

Mobile Calendar Properties

Property	Expected Value	Description
calendarName* (calendar-name)	The Name of a Calendar record.	This sets the configuration based on the linked Calendar record. (Views are overridden with the mobile calendar view)
recordId (record-id)	The id of a dimension record.	This sets the dimension record for this calendar. If not specified a record selector is displayed at the top allowing the user to select a record.
startDate (start-date)	A date string in almost any kind of format.	This sets the start date of the currently displayed view.
prototypeReservation (prototype-reservation)	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.
hiddenReservationFilters (hidden-reservation-filters)	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-Filters below.
isReadOnly (is-read-only)	Boolean	When this property is set to `true`, the calendar does not allow the users to create, modify or delete reservations. It will only display the reservations and allow the user to navigate the calendars.

calendarName is a required property.