Breadcrumbs

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

JavaScript
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
<?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.

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.

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.

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.

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.

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.

Vertical Calendar (b25-single-calendar-wrapper)

Use for single-resource scheduling on a record page. The calendar displays reservations for the resource linked to the current record.

Supports pre-filling reservations, filtering, and read-only modes.

Example: Vertical Calendar Wrapper for Record Pages

Component

HTML
<template>
  <b25-single-calendar-wrapper
    calendar-id={calendarId}
    record-id={recordId}
    object-api-name={objectApiName}
    prototype-reservation={prototypeReservation}
    is-read-only={isReadOnly}
    max-height={maxHeight}
    max-height-unit={maxHeightUnit}>
  </b25-single-calendar-wrapper>
</template>

Controller

JavaScript
import { LightningElement, api } from 'lwc';

export default class VerticalCalendarWrapper extends LightningElement {
  @api recordId;
  @api objectApiName;
  @api calendarId = 'MyVerticalCalendar';
  @api isReadOnly = false;
  @api maxHeight = 700;
  @api maxHeightUnit = 'px';

  prototypeReservation = {
    sobjectType: 'B25__Reservation__c',
    B25__Status__c: "a0hQI00000BiaEMYAZ"
  };
}

XML

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>Vertical Calendar (wrapped)</masterLabel>
  <description>Wrapper for GoMeddo Vertical Calendar using LWC.</description>
  <targets>
    <target>lightning__RecordPage</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightning__RecordPage">
      <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)"/>
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>


Single Calendar Properties

Property

Type

Required

Expected Value

Description

calendarId
(calendar-id)

String

✅

The Name of a Calendar record.

Sets the calendar configuration. Must reference a Single Resource Calendar record.

recordId
(record-id)

String


The Id of the current record.

Used to resolve the linked dimension record to display on the calendar.

objectApiName
(object-api-name)

String


The sObject API name of the current record page.

Required when using recordId to resolve the linked dimension.

prototypeReservation
(prototype-reservation)

Object


An object that represents a Reservation record.

Pre-populates fields on new reservations created via the calendar.

maxHeight
(max-height)

Number


An integer. Defaults to 700.

Maximum pixel height before the calendar shows a scrollbar. Minimum allowed value is 650px.

maxHeightUnit
(max-height-unit)

String


"px" or "vh"

Unit for maxHeight. Use px for pixels, vh for percentage of the window height.

isReadOnly
(is-read-only)

Boolean


true / false

When true, users cannot create or modify reservations.

hiddenReservationFilters
(hidden-reservation-filters)

Array


A list of filter objects.

Hidden filters applied to reservation records. Not visible to users.


Vertical Column Calendar (b25-single-calendar-wrapper)

Use to display multiple resources as side-by-side columns in a vertical layout. Pass an explicit list of dimension record IDs via dimension-ids to render each resource as a column.

Each dimension ID becomes a column in the calendar, making it easy to compare availability across multiple resources at a glance.

Example: Vertical Column Calendar Wrapper

Component

HTML
<template>
  <b25-single-calendar-wrapper
    calendar-id={calendarId}
    dimension-ids={dimensionIds}
    prototype-reservation={prototypeReservation}
    is-read-only={isReadOnly}
    max-height={maxHeight}
    max-height-unit={maxHeightUnit}>
  </b25-single-calendar-wrapper>
</template>

Controller

JavaScript
import { LightningElement, api } from 'lwc';

export default class VerticalColumnCalendarWrapper extends LightningElement {
  @api calendarId = 'MyVerticalCalendar';
  @api isReadOnly = false;
  @api maxHeight = 700;
  @api maxHeightUnit = 'px';

  // Explicitly pass the dimension record IDs to display as columns
  dimensionIds = [
    'a0hQI00000BiaEMYAZ',
    'a0hQI00000BibFNYAZ',
    'a0hQI00000BicGOYAZ'
  ];

  prototypeReservation = {
    sobjectType: 'B25__Reservation__c',
    B25__Status__c: "a0hQI00000BiaEMYAZ"
  };
}

XML

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>Vertical Column Calendar (wrapped)</masterLabel>
  <description>Wrapper for GoMeddo Vertical Column 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)"/>
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>


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).

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

JavaScript
import { LightningElement, track } from 'lwc';

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

XML

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 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.