Page Comparison

Booker25 comes with a number of calendar components that can be included in your Lightning solutions. One way to include them is through the Lightning App Builder, through drag & drop. Doing so is fast and easy, but only lets you control certain attributes of the component. If you want more control over the calendars, you can consider wrapping them in your own custom components. This article explains how.

B25:multiCalendarWrapper

Property	Expected Value	Description
calendarId*	The Name of a Calendar record.	This sets the configuration based on the linked Calendar record.
view	The Unique Identifier of a View record.	This sets the currently displayed view. Make sure to choose a View record that is linked to the Calendar record, otherwise this property will be ignored.
startDate	A date string in almost any kind of format.	This sets the start date of the currently displayed view.
prototypeReservation	An object that represents a Reservation record.	Allows you 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.
maxHeight	An integer.	The maximum pixel height that the calendar will stretch to. If the content is larger, a scroll bar will be shown.
hiddenDimensionFilters	A list of filter objects.	Sets filters on the dimension records shown in the calendar. These filters are not visible to users. See Passing Hidden Filters below.
hiddenReservationFilters	A list of filter objects.	Sets filters on the reservation records shown in the calendar. These filters are not visible to users. See Passing Hidden Filters below.
filterIdentifierPrefix	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	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.

\* This property is required.

Code Sample

Below is a basic aura component that can be included on a Lightning Record page. This component shows a week view starting at a specific date, and sets the Staff lookup to a the staff record this component is placed on.

When copying this sample, keep a few things in mind:

If you want to display a different calendar, make sure to pass an existing calendar name to calendarId
Make sure that the referenced calendar is of record type Multi Resource Calendar
Make sure that the string passed to view is the unique identifier of a view that is linked to the selected calendar

Component

Code Block

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="recordId" type="String" />
    <aura:attribute
        name="myPrototypeReservation"
        type="B25__Reservation__c"
    />
    <B25:multiCalendarWrapper
        calendarId="Resources"
        view="week"
        startDate="2020-12-31"
        prototypeReservation="{!v.myPrototypeReservation}"
    >
    </B25:multiCalendarWrapper>
</aura:component>

Controller

Code Block
({ doInit : function(component, event, helper) { component.set("v.myPrototypeReservation", { sobjectType: 'B25__Reservation__c', B25__Staff__c: component.get('v.recordId') }); } })

B25:singleCalendarWrapper

Property	Expected Value	Description
calendarId*	The Name of a Calendar record.	This sets the configuration based on the linked Calendar record.
recordId*	The id of a dimension record.	This sets the dimension record for this calendar.
view	The Unique Identifier of a View record.	This sets the currently displayed view. Make sure to choose a View record that is linked to the Calendar record, otherwise this property will be ignored.
startDate	A date string in almost any kind of format.	This sets the start date of the currently displayed view.
prototypeReservation	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.
maxHeight	An integer.	The height of the calendar in pixels. The single calendar does not automatically resize based on the height of the content of the calendar like the multi calendar does.
hiddenReservationFilters	A list of filter objects.	Sets filters on the reservation records shown in the calendar. These filters are not visible to users. See Passing Hidden Filters below.
filterIdentifierPrefix	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.

\* This property is required.

Code Sample

Below is a basic aura component that can be included on a Lightning page. This component shows a week view starting at a specific date, and sets the Staff lookup to a specific record.

When copying this sample, keep a few things in mind:

If you want to display a different calendar, make sure to pass an existing calendar name to calendarId
Make sure that the referenced calendar is of record type Single Resource Calendar
Make sure that the string passed to view is the unique identifier of a view that is linked to the selected calendar
If you want to prepopulate the Staff lookup like the code sample does, make sure to replace the Staff record id (a0h1j000001H4SkAAK) with an id of an actual Staff record that exists in your org.

Code Block

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute
        name="myPrototypeReservation"
        type="B25__Reservation__c"
        default="{'sobjectType':'B25__Reservation__c', 'B25__Staff__c':'a0h1j000001H4SkAAK'}"
    />
    <B25:singleCalendarWrapper
        calendarId="SingleResourceCalendar"
        recordId="a0h1j000001H3SkAAK"
        view="week"
        startDate="2020-12-31"
        prototypeReservation="{!v.myPrototypeReservation}"
    >
    </B25:singleCalendarWrapper>
</aura:component>

Passing Hidden Filters

You can pass a list of filter objects to the properties hiddenReservationFilters (available on both single and multi calendars) and hiddenDimensionFilters (available only on multi calendars). These properties control which records are visible on the calendar. Because they are hidden, the user can’t change them and they will always apply.

Each item in the list is expected to have the following properties:

Property	Description
fieldName	The API name of the field being filtered.
operator	The operator being applied. Valid values are: '=', '!=', '>', '<', '<=', '>='.
value	The value being compared against.
displayedValue	(Optional) The value being displayed to the user. This is useful for lookups, where the passed value is a record id, but you might want to display the record name to the user instead.

Code Block

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute
        name="myFilters"
        type="Object[]"
        default="[{'fieldName':'Name', 'operator':'=', 'value':'Nice'}]"
    />
    <B25:multiCalendarWrapper
        calendarId="Resources"
        view="week"
        startDate="2020-12-31"
        hiddenDimensionFilters="{!v.myFilters}"
    >
    </B25:multiCalendarWrapper>
</aura:component>

Filters can be grouped by using a logicalOperator, allowing you to do AND and OR statements in the grouping. For Example:

Code Block

language	json

{
  type: 1,
  logicalOperator: 'OR',
  subFilters: [
    { 'fieldName': 'Name', 'operator': '=', 'value': 'Awesome'},
    { 'fieldName': 'Name', 'operator': '=', 'value': 'Nice'}    
  ]
}

The following properties are required

Property	Description
type	Indicates that it is a grouping, all belonging in the same logicalOperator
logicalOperator	Either AND or OR. Indicating if the filters should both be true (AND) or one of them should be true (OR)
subFilters	A list of hiddenFilters as described in the passing hidden filters section above.

The example below is more complex, it shows resources that are marked Active AND that have a name Awesome OR Nice.

Code Block

/* calendar.cmp */
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute
        name="myFilters"
        type="Object[]"
    />
    
    <B25:multiCalendarWrapper
        calendarId="Resources"
        view="week"
        startDate="2020-12-31"
        hiddenDimensionFilters="{!v.myFilters}"
    >
    </B25:multiCalendarWrapper>
</aura:component>

/* calendarController.js */
({
  doInit: function (cmp, event, helper) {
    var recordId = cmp.get('v.recordId');
    cmp.set('v.myFilters', [
        { 'fieldName': 'B25__Is_Active__c', 'operator': '=', 'value': 'true'},
        {
            type: 1,
            logicalOperator: 'OR',
            subFilters: [
                { 'fieldName': 'Name', 'operator': '=', 'value': 'Awesome'},
                { 'fieldName': 'Name', 'operator': '=', 'value': 'Nice'}       
            ]
        }
    ]);
  }
})

Table of Contents

Versions Compared

Old Version 22

New Version 23

Key

B25:multiCalendarWrapper

Code Sample

B25:singleCalendarWrapper

Code Sample

Passing Hidden Filters