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

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();

Data provided

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.