Calendar Events
GoMeddo enables you to interact with the calendar through JavaScript events, allowing your custom Lightning Web Components or Aura Components to respond to calendar activity.
Below is a list of supported events.
All Supported Events
Action | Event Name | Cancellable | Data Provided |
|---|---|---|---|
| Yes |
| |
| Yes |
|
Additional events will be introduced in future releases.
ReservationClick Event
The ReservationClick event enables you to act on the user clicking the reservation on the calendar.
You could for example decide to prevent the Reservation Form from opening, and load the reservation details into the Standalone Reservation Form or any other component on the same page.
To prevent the Reservation Form from opening, you can cancel the event using event.preventDefault();
Action | Event Name | Cancellable |
|---|---|---|
Clicking on a reservation |
| Yes |
Sample Payload
{
"reservationId": "a1B5g00000RsvXYZAA1",
"dimensionId": "a0R5g00000DimABCQW1",
"start": "2025-06-16T15:38:19",
"end": "2025-06-16T16:38:19",
"reservationTimeZone": "Europe/Amsterdam",
"dimensionTimeZone": "Europe/Amsterdam"
}Data provided
Property Name | Description |
|---|---|
| The Salesforce Id of the reservation |
| The Salesforce Id of the dimension record associated with the reservation |
| The start date and time of the reservation in format |
| The end date and time of the reservation in format |
| The IANA timezone name of the reservation (ex. |
| The IANA timezone name of the dimension record associated with the reservation (ex. |
TimeRangeSelect Event
The TimeRangeSelect event enables you to act on the user making a time range selection (single or multiple) on the calendar.
To prevent the Reservation Form from opening, you can cancel the event using event.preventDefault();
There cannot be a single and multi-selection happening at the same time. If a single selection was made multiselection will be null. If a multi-selection was made, selection will be null.
Action | Event Name | Cancellable |
|---|---|---|
Selecting a time range |
| Yes |
Single Selection
Sample Payload
{
"selection": {
"dimensionId": "a0R5g00000XyABC",
"start": "2025-06-16T15:00:00",
"end": "2025-06-16T16:00:00"
},
"multiselection": null
}Data provided under selection
Property Name | Description |
|---|---|
| The Salesforce Id of the selected dimension record |
| The start date and time of the reservation in format |
| The end date and time of the reservation in format |
Multi Selection
Sample Payload
{
"selection": null,
"multiselection": [
{
"dimensionId": "a0R5g00000XyABC",
"start": "2025-06-16T09:00:00",
"end": "2025-06-16T10:00:00",
},
{
"dimensionId": "a0R5g00000XyDEF",
"start": "2025-06-16T10:30:00",
"end": "2025-06-16T11:30:00",
}
]
}Data provided under multiselection
List of the following object:
Property Name | Description |
|---|---|
| The Salesforce Id of the selected dimension record |
| The start date and time of the reservation in format |
| The end date and time of the reservation in format |
Intercepting Events
There are two ways to intercept events: the Declarative Event Listener and the JavaScript Event Listener.
Declarative Event Listener (LWC)
The declarative event listener allows Lightning Web Components (LWC) to respond to wrapped calendar events directly in the template using standard HTML event binding. This method is simple and requires no additional JavaScript logic beyond the handler functions in your component.
Example Usage (with reservationclick)
In the HTML file of your LWC:
<template>
<b25-multi-calendar-wrapper>
calendarId="Resources"
view="weekView"
startDate="2025-06-16"
objectApiName="B25__Resource__c"
onreservationclick={handleReservationClick}
</b25-multi-calendar-wrapper>
</template>In the JavaScript file of your LWC:
import { LightningElement } from 'lwc';
export default class MyWrappedCalendarComponent extends LightningElement {
handleReservationClick(event) {
const eventData = event.detail;
console.log(`Reservation ${eventData.reservationId} clicked:`, eventData);
// Add your logic here
}
}Event names follow the pattern on[eventname], such as onreservationclick.
The event.detail object contains the relevant data for the triggered calendar event.
Declarative Event Listener (Aura)
Aura components can also handle wrapped calendar events declaratively by specifying the event handler directly in the markup using the on[eventname] syntax.
Example Usage (with reservationclick)
In your Aura component markup (.cmp):
<aura:component>
<B25:multiCalendarWrapper
calendarId="Resources"
view="weekView"
startDate="2025-06-16"
objectApiName="B25__Resource__c"
onreservationclick="{!c.handleReservationClick}"
>
</B25:multiCalendarWrapper>
</aura:component>In the controller (.js):
({
handleReservationClick: function(component, event, helper) {
const eventData = event.getParam('detail');
console.log(`Reservation ${eventData.reservationId} clicked:`, eventData);
// Add your logic here
}
})Use event.getParam('detail') to access the event data.
Event names follow the pattern on[eventname], such as onreservationclick.
JavaScript Event Listener
The JavaScript event listener provides more flexibility and is ideal when you need to attach or remove listeners programmatically or want to listen to events from a non wrapped calendar on the same page.
In your LWC JavaScript file:
import { LightningElement } from 'lwc';
export default class MyCalendarListener extends LightningElement {
connectedCallback() {
this.template.addEventListener('reservationclick', this.handleReservationClick.bind(this));
}
handleReservationClick(event) {
const eventData = event.detail;
console.log(`Reservation ${eventData.reservationId} clicked:`, eventData);
// Add your logic here
}
disconnectedCallback() {
this.template.removeEventListener('reservationclick', this.handleReservationClick);
}
}Use event.getParam('detail') to access the event data.
Event names follow the pattern on[eventname], such as onreservationclick.