Calendar
The Avonni Calendar provides a customizable interface for displaying and managing resources and events in various formats, including calendars, timelines, and agendas.
The Avonni Calendar is a full scheduling application that displays and manages resources and events in multiple formats: Timeline, Calendar, and Agenda. Use it to visualize bookings, assignments, or any time-based data across people, rooms, or equipment.
Overview
The Avonni Calendar uses two core concepts: Resources and Events.
Resources: The "who" or "what" of your schedule. Think of these as the people, places, or things being scheduled.
Examples: Meeting rooms (Room A, Room B), staff members (John Doe, Jane Smith), equipment (Projector, Laptop).
Purpose: Track availability and prevent scheduling conflicts.
Events: The "when" and "what's happening" of your schedule. These are the scheduled activities.
Examples: "Team Meeting," "Client Call," "Project Deadline."
Purpose: Represent scheduled appointments, tasks, or deadlines, typically linked to a specific resource.
In essence, events are scheduled for resources. You need to define both to populate your calendar. The next step is to connect these concepts to a data source.
Configuration
To configure the Calendar, select it on the canvas. The Edit Calendar panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
Before you build your calendar, you must tell it where to get the data it should display. You have two options, depending on the source and nature of your data:
Manual
Enter data directly into the component configuration.
Query
This is the most common option for displaying Salesforce records.
Data Mappings
When using a dynamic data source, you'll need to configure the Data Mappings section to tell the component how to map your Salesforce records to calendar events and resources.
Why are Data Mappings Important?
Without data mapping, the calendar wouldn't know which part of your data to use, resulting in incorrect or irrelevant information.
How Data Mapping Works
Data mapping is a translation process where you specify which Salesforce field corresponds to each calendar attribute. Particular attention should be given to the Resource Names mapping in the events section — this attribute is crucial because it links each event to its corresponding resource.
With Resource Names Mapping: If an event titled 'Team Meeting' is mapped to 'Room A', it will appear under 'Room A' in the calendar. Similarly, an event 'Client Presentation' mapped to 'Room B' will be displayed under 'Room B'.
Without Resource Names Mapping: If the resource name isn't mapped, all events will appear under a single, undefined resource.
After completing the data mappings, the Avonni Calendar will be ready to visually represent your Salesforce data in the chosen display format.
Filter Fields
In the Data Mappings section, select which fields are available to end-users as filters. Only the fields you select here will appear in the filter menu.
Search Fields
By default, the search covers all searchable fields you map in the Data Mappings section. Use Search Fields to limit the search to specific mapped fields.
Content
The Content section controls the display format, time scope, and calendar behavior.
Start Date
The Start Date sets the date the calendar opens on. If left empty, the current date is always used. Bind it to a variable or formula to open the calendar on a specific date.
Selected Display
The Selected Display setting chooses how events are presented. Each option provides a unique way of viewing your schedule:
Timeline
Gives users a linear visual representation of their schedule over a selectable period.
Calendar
This is the traditional grid-based view that most people associate with calendars.
Agenda
Each entry in the list includes details about the event and is arranged chronologically.
Timeline: A horizontal (or vertical) view of events over time — see all Room A's bookings for a week at a glance.
Calendar: The classic grid layout with days in rows and columns — ideal for a monthly view of appointments.
Agenda: A chronological list of events — "9 AM Meeting," "10 AM Call," listed in order by date.
Hidden Displays
The Hidden Displays setting removes one or more display modes from the toolbar. If only one or no display mode remains visible, the display-switch button is hidden entirely.
Timeline Variant
The Timeline Variant setting controls the orientation of the schedule when the Timeline display is selected. Choose Horizontal (default) for a left-to-right timeline, or Vertical to stack resources vertically. Requires: Selected Display = Timeline.
Selected Time Span
The Selected Time Span setting sets the active time span preset. The default presets are Day, Week, and Month. You can customize the available presets using the Time Spans advanced option.
Week Start Day
The Week Start Day setting controls which day appears first in the week — Sunday through Saturday. The Default option follows the user's locale.
Advanced Options
Pull to Boundary
When enabled, aligns the visible range to the nearest natural boundary for the chosen unit (for example, week or month boundaries), eliminating any margin between the calendar and the main component.
Zoom to Fit
When enabled in the timeline display, prevents horizontal scrolling by fitting all events within the viewable area for easy access and clear visualization.
Today Button Label
Customizes the label on the "Today" navigation button in the toolbar.
Time Spans
Defines the list of available time span presets. Each preset has a Label, Name, optional Icon, a Unit (Day, Week, or Month), a Span count, and Timeline Headers that control the horizontal header layout in the timeline display.
Header
The Header section provides customization options for the toolbar displayed at the top of the Calendar.
Hide Header
If enabled, the entire toolbar is hidden.
Caption
Text displayed above the selected date in the toolbar. Requires: Hide Header = disabled.
Avatar
Optional avatar displayed in the toolbar. Set an Image, a Fallback Icon Name, or Initials, and adjust the size and variant under Advanced Options. Requires: Hide Header = disabled.
Actions
Button actions added to the toolbar. Triggered based on the interactions created in the Interaction Panel. Requires: Hide Header = disabled.
Visible Actions Buttons
Maximum number of action buttons displayed directly in the toolbar before overflow behavior applies.
Hide Actions
If enabled, the actions menu is hidden.
Disable Actions
If enabled, the actions menu is disabled.
Available Times
The Available Times section restricts which days, months, and time frames appear on your calendar, helping you focus on specific periods of interest.
Days
Restricts the calendar to only show selected days of the week. Unselected days are hidden.
Months
Restricts the calendar to only show selected months. Unselected months are hidden.
Time Frames
Defines custom time ranges shown in the calendar. Each time frame must follow the format start-end using ISO8601 time strings.
Example: To show only 8 AM to 6 PM, enter 08:00-18:00.
Context Menu Actions
The Context Menu Actions section adds custom actions to context menus on your calendar, enhancing interactivity for both events and empty time slots.
Event
Actions displayed in the context menu and detail popover when interacting with an event. Use these to define custom actions users can perform directly on an event, such as editing or deleting it.
Empty Spot
Actions displayed in the context menu when clicking on an empty spot in the calendar, such as creating a new event.
Event Display
The Event Display section customizes the visual appearance of calendar events.
Theme
The Theme setting chooses a visual style for all events. Options: Default, Hollow, Line, Rounded, or Transparent.
Theme variations
Palette
The Palette setting assigns different colors from a chosen palette to each resource. One color per resource ensures visual differentiation across the calendar. Options include: Aurora (default), Bluegrass, Dusk, Fire, Heat, Lake, Mineral, Nightfall, Ocean, Pond, Sunrise, Water, Watermelon, and Wildflowers.
Popover Fields
The Popover Fields setting defines which event fields are shown in the hover popover. By default, the From and To dates are shown. Add any event field by specifying its Value (the field key), an optional Label, and a display Variant (Standard, Label Hidden, Label Inline, or Label Stacked).
Advanced options in the Event Display section include a Custom Palette to override the built-in palette with your own hexadecimal colors, a Message When No Agenda Events Found to customize the empty-state text shown in the Agenda display, and a Number of Events Found Suffix to customize the text appended after the event count in the Agenda header.
Filter
The Filter section controls how the filter menu is presented to end-users. Filter fields are enabled in the Data Mappings section.
Hide Resources Filter
Hides the resources filter. In the timeline display this filter appears in the toolbar; in other displays it is found in the side panel.
Resources Filter Label
Renames the label of the resources filter. Requires: Hide Resources Filter = disabled.
Hide Date Picker
If enabled, the date picker in the calendar header is hidden and users cannot navigate to a specific date.
Type
Controls the layout of the filter menu. Options:
Horizontal: Displays filters in a horizontal bar across the component (default).
Popover: Shows filters in a compact window that appears when a button is clicked.
Panel: Presents filters in a side panel that slides out from the edge of the component.
Use Record Picklist Values
When filtering by a picklist field, derives filter options from values present in the records rather than the field's full defined value set.
Use Cascading Filter Values
When a user applies a filter, other filters' options are narrowed to only those matching the current selection. Overrides Use Record Picklist Values.
Search
The Search section lets users find events by title using a search bar.
Show Search: Enables the search bar.
Placeholder: Sets the text displayed in the search bar before the user starts typing (for example, "Search Events"). Requires: Show Search = enabled.
Position: Controls where the search bar appears — Left (default), Right, Center, Fill, or Panel. Requires: Show Search = enabled.
Side Panel
The Side Panel section appears when filters or search are positioned in the panel layout.
Position
Controls which side the panel slides out from — Left (default) or Right.
Is Closed
If enabled, the side panel starts hidden when the page loads.
Hide Toggle Button
If enabled, the toggle button in the header is hidden. Use this when you want the panel to open and close programmatically via interactions.
Reset Button Label
Customizes the label of the button used to reset all filter values.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the Calendar. Configure them from the Interactions tab of the Edit Calendar panel.
Empty Spot Action Click
Fires when a user clicks one of the context menu actions on an empty time slot. Use the targetName output to identify which action was clicked, and use clickedCellStart and clickedCellEnd to capture the selected time range for creating new records.
Event Action Click
Fires when a user clicks an action from an event's context menu or detail popover. Use the targetName output to identify which action was triggered, and clickedEventActionEvent (or clickedEventActionEventSObject for query data sources) to access the related event's data.
Event Drag
Fires when a user finishes dragging an event to a new time slot or resource. Use draggedEventName, draggedEventStart, and draggedEventEnd to update the event's start date, end date, or resource assignment in Salesforce. Only active when at least one interaction is configured on this trigger.
Event Select
Fires when a user clicks an event. Use selectedEvent (or selectedEventSObject for query data sources) to access the selected event's data and drive downstream logic such as navigation or record updates.
New Event Drag
Fires when a user clicks or drags on an empty area of the schedule to create a new event. Use newEventStart and newEventEnd to capture the selected time range. Only active when at least one interaction is configured on this trigger.
Toolbar Action Click
Fires when a user clicks one of the toolbar action buttons. Use the targetName output to identify which action was clicked and branch your flow logic accordingly.
Toolbar Display Select
Fires when a user switches the active display mode from the toolbar (for example, from Calendar to Timeline). Use the targetName output to identify the selected display.
Toolbar Time Span Select
Fires when a user selects a different time span preset from the toolbar (for example, switching from Day to Week). Use the targetName output to identify the selected time span.
Output Variables
The Calendar exposes these output variables you can reference elsewhere on the page after the user interacts with it.
Event Selection
When a user clicks an event, these variables update with the selected event's data.
Selected Event
Object
The selected event's data — same properties as the static data source items (title, start date, end date, resource, etc.).
Selected Event sObject
Record (SObject)
The full Salesforce record associated with the selected event. Requires a Query data source.
Example: When a user clicks a calendar event for a case, use Selected Event sObject to display the case's details in a record-detail component beside the calendar.
Event Context Menu Actions
When a user clicks an action from an event's context menu or detail popover, these variables update.
Clicked Event Action - Name
Text (String)
The name of the event action the user clicked.
Clicked Event Action - Event
Object
The event associated with the clicked action — same properties as the static data source items.
Clicked Event Action - Event sObject
Record (SObject)
The full Salesforce record associated with the event. Requires a Query data source.
Example: When a user clicks an "Edit" action on an event, use Clicked Event Action - Event sObject to pre-populate a record edit form.
Empty Spot Actions
When a user clicks an action from the context menu on an empty time slot, these variables update.
Clicked Cell Action Name
Text (String)
The name of the empty spot action the user clicked.
Clicked Cell Start
Text (String)
The start date and time of the empty time slot the user clicked or selected.
Clicked Cell End
Text (String)
The end date and time of the empty time slot the user clicked or selected.
Example: When a user clicks a "New Booking" action on an empty slot, use Clicked Cell Start and Clicked Cell End to pre-populate the start and end fields of a new event creation form.
Event Drag
When a user finishes dragging an event to a new time slot or resource, these variables update.
Dragged Event Name
Text (String)
The unique name of the event that was dragged.
Dragged Event Start
Text (String)
The new start date and time of the dragged event after it was dropped.
Dragged Event End
Text (String)
The new end date and time of the dragged event after it was dropped.
Example: After a user drags a shift to a new time, use Dragged Event Name, Dragged Event Start, and Dragged Event End to update the corresponding record in Salesforce.
New Event Drag
When a user clicks or drags on an empty area of the schedule to create a new event, these variables update.
New Event Start
Text (String)
The start date and time of the new event the user created by clicking or dragging.
New Event End
Text (String)
The end date and time of the new event the user created by clicking or dragging.
Toolbar Actions
Clicked Toolbar Action - Name
Text (String)
The name of the toolbar action button the user clicked.
Others
Number of Items
Number
The total number of events currently loaded in the calendar.
Styling
Configure the Calendar's appearance from the Style tab of the Edit Calendar panel.
Controls the outer spacing around the calendar.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the calendar's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the calendar's dimensions.
Width / Height: Set fixed dimensions for the calendar.
Customizes the border surrounding the calendar.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Styles the calendar toolbar.
Background Color: Set the toolbar background color.
Styles the event labels.
Label: Set the color of event labels.
Label of Past Events: Set the color of labels for events in the past.
Label Line Clamp: The number of lines an event label can use. The default is 1, so a long title is truncated on a single line. Increase it to let the title wrap onto that many lines.
Last updated
Was this helpful?