Calendar
The Avonni Calendar provides a customizable interface for displaying and managing resources and events in various formats, including calendars, timelines, and agendas.
Overview
The Avonni Calendar displays and manages resources and events inside a Salesforce Screen Flow. It supports three display modes — Timeline, Calendar, and Agenda — with configurable time spans, drag-and-drop event creation and rescheduling, context menus, filtering, search, and a customizable header.
Tutorials
Getting Started
Working with Events
Advanced Configurations
Real-World Examples
Configuration
To configure it, click the component on the Flow screen. The Edit Calendar Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
The Data Source is where you define the necessary information for the calendar to function. It comprises two main elements: Resources and Events.
Resources: The entities or assets involved in your events — meeting rooms, equipment, personnel, etc. Resources provide a structured view of what is available and when.
Events: The scheduled activities or appointments tracked on the calendar. Events are the primary elements users interact with. Each event is typically linked to one or more resources, providing a comprehensive overview of how resources are utilized over time.
Add events and resources directly within the component.
Testing, simple scenarios, data not in Salesforce.
Connect to collections created in Salesforce Flows (via 'Get Records').
Dynamic display based on Salesforce records.
Write queries to pull data, apply filters, and handle large datasets.
Complex data retrieval, multiple Salesforce objects, large volumes.
Data Mappings
Completing the data mappings is crucial when using a variable data source. Data mapping aligns Salesforce fields from the 'Get Records' collections with the corresponding attributes in the Avonni Calendar, ensuring the data fetched from Salesforce is accurately represented in the calendar.
Data mapping is a translation process where you specify which Salesforce field corresponds to each calendar attribute. For example:
If your 'Get Records' collection includes a field for event start dates, map it to the start date attribute of the Avonni Calendar event.
A resource name in Salesforce should be mapped to the resource identifier in the calendar.
After completing the data mappings, the Avonni Calendar will be ready to visually represent your Salesforce data in the chosen display — calendar, timeline, or agenda.
Properties
Selected Display sets which view mode the calendar opens with:
Timeline
Gives users a linear visual representation of their schedule over a selectable period.
Calendar
The traditional grid-based view most people associate with calendars.
Agenda
A list of events in chronological order with details about each entry.
Start Date defines the date the calendar opens to on first load. If empty, the current date is used.
Selected Time Span sets the default time span shown (e.g., Day, Week, Month).
Week Start Day sets the first day of the week in the Calendar display: Default (the running user's locale), or Sunday through Saturday.
Content Document IDs lists the IDs of Content Document records holding ICS files. Events from those calendars are displayed alongside the component's own events.
Full Height is not in this tab: it is a toggle on the Component Builder toolbar, above the canvas. It sizes the calendar to fill the user's current screen height, so the whole calendar is visible without scrolling.
Header
The Header section provides customization options for the top toolbar.
Hide Header
Hides the entire top toolbar.
Title
Sets a custom title that displays prominently on the toolbar.
Avatar
Adds an avatar to the toolbar for personalization or to provide visual context about the calendar's owner.
Actions
Adds button actions to the toolbar, triggered from the Interaction Panel. Each action takes a Label, a Name, an Icon Name, Disabled / Hidden flags, a Title shown on hover, and Alternative Text.
Visible Actions Buttons
Sets how many toolbar actions show as buttons before the rest overflow into a menu.
Hide Actions / Disable Actions
Hide or disable the toolbar actions.
Available Times
The Available Times section customizes which time frames appear on your calendar — useful for focusing on specific periods of interest.
Days
Specify which days of the week should be visible. The calendar hides the unselected days.
Month
Specify which months should be visible. The calendar hides the unselected months.
Time Frame
Define a custom time range for the hours displayed on the calendar.
Context Menu Actions
The Context Menu Actions section adds specific actions to the context menu of calendar events and empty time slots.
Event Actions
Button actions that appear in the context menu and detail popover of an event. Define custom actions users can perform directly from an event, such as editing or deleting it.
Empty Spot Actions
Button actions that appear in the context menu when clicking on an empty time slot. Provides options for actions when no specific event is selected, such as creating a new event. Learn more.
Event Display
The Event Display section customizes the visual appearance of calendar events.
Theme lets you choose a visual theme for your events. Available options: default, transparent, line, hollow, or rounded.
Palette assigns different colors from a chosen palette to each resource, helping visually differentiate resource types at a glance.
Popover Fields defines which fields appear in the popup shown when a user hovers over an event — lets users view essential event details without clicking.
Filter
The Filter section offers options to customize the calendar's filter interface.
Hide Resources Filter
Hides the resources filter (located in the toolbar for Timeline display; in the side panel for other displays).
Resources Filter Label
Renames the "Resources" filter label.
Hide Date Picker
Prevents selecting a specific date from the calendar header.
Type
Controls the position of the filter menu: Horizontal (bar across the component), Popover (compact window on button click), or Panel (side panel that slides from the edge of the component).
Use Record Picklist Values
For a picklist filter, derives the options from the values present in the records instead of the field's full defined value set.
Use Cascading Filter Values
Narrows the options offered in the other filters to the records matching the current selection. When it is on, Use Record Picklist Values is ignored.
Every filter menu carries a Filter mode button that sets how its value is matched. There is nothing to configure in the builder — the modes on offer follow the field's type, and users pick one as they filter.
List, text and picklist filters — Equals (default), Not Equals, Empty, Not Empty.
Number, date and time range filters — Between (default), Not Between, Equals, Not Equals, Less Than, Less or Equal, Greater Than, Greater or Equal, Empty, Not Empty.
Checkbox filters — no mode button; they always match on Equals.
Empty and Not Empty test the field itself, so the menu hides its value inputs when either is selected.
Search
Enable Show Search to add a search bar where users can find events by title. Search Engine Attributes then offers:
Placeholder — the text shown in the search bar before typing (e.g., "Search Events").
Position — where the search bar appears: Left, Right, Center, Fill, or Panel.
Side panel
The side panel is the column the filters and the search move into when their position is set to Panel.
Position — which side the panel opens from: Left or Right.
Closed by Default — the panel starts collapsed.
Hide Toggle Button — removes the header button that opens and closes the panel.
Reset Button Label — renames the button that clears the filter values. Defaults to
Clear all selections.
Advanced Options
These settings sit behind the Advanced toggle of their panel group.
Hidden Displays lets you hide certain display types from the toolbar. The toolbar button is automatically hidden when one or fewer display types remain visible.
Timeline Variant determines the orientation of the schedule when the selected display is Timeline.
Pull to Boundary expands the calendar to the left and right edges, eliminating any margin between the calendar and the main component.
Zoom to Fit prevents horizontal scrolling in the timeline display, ensuring all events fit within the viewable area.
Show Time Zone lets the end user change the current time zone.
Today Button Label renames the toolbar's Today button.
Time Spans — Avonni Calendar allows customizable day, week, or month views with adjustable multi-day spans. Learn more.
From the Event Display group:
Message When No Agenda Events Found replaces the text shown in the Agenda display when the selected date has no events. Defaults to "No events for the selected date."
Number of Events Found Suffix is the text appended after the number of events found in the header. Defaults to "event(s) found".
Custom Palette lists the colors used for the events, overriding the one chosen in Palette.
Interactions
Interactions define what happens when users interact with the Calendar. Configure them from the Interactions tab of the Edit Calendar panel.
Drag New Event
Fires when the user clicks or drags on an empty area of the schedule to create a new event. Requires this interaction to be configured to enable new-event dragging. Exposes the start and end datetimes of the dragged range as output variables (newEventStart, newEventEnd).
Drag Event
Fires when the user drags an existing event to a new time slot to reschedule it. Requires this interaction to be configured to enable existing-event dragging. Exposes the event's unique name (draggedEventName) and its new start and end datetimes (draggedEventStart, draggedEventEnd).
Event Select
Fires when the user clicks on an event. Exposes the full SObject record of the selected event (selectedEvent) and its unique name (selectedEventName).
Event Action Click
Fires when the user clicks a context menu or popover action on an event. Use the Target Name field to scope the interaction to a specific action name. Exposes the clicked action name (clickedEventActionName), the event's unique name (clickedEventActionEventName), and the full event SObject record (clickedEventActionEvent).
Empty Spot Action Click
Fires when the user clicks a context menu action on an empty time slot. Use the Target Name field to scope the interaction to a specific action name. Exposes the action name (clickedCellActionName) and the start and end datetimes of the slot (clickedCellStart, clickedCellEnd).
Toolbar Action Click
Fires when the user clicks a custom action button in the toolbar. Use the Target Name field to scope the interaction to a specific toolbar action name. Exposes the action name as clickedToolbarActionName.
Display Select
Fires when the user picks a display mode (Timeline, Calendar, or Agenda) from the toolbar. Use the Target Name field to scope the interaction to a specific display. Exposes the selected display name via the selectedDisplay output variable.
Time Span Select
Fires when the user picks a time span preset (for example, Day, Week, or Month) from the toolbar. Use the Target Name field to scope the interaction to a specific time span. Exposes the selected time span name via the selectedTimeSpan output variable.
Styling
The Style tab gives you control over the calendar's spacing, dimensions, toolbar, and event labels. Configure it from the Style tab of the calendar's property editor.
Controls the outer spacing around the calendar, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side of the calendar.
Controls the inner spacing between the calendar 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.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Styles the calendar's toolbar.
Background Color: Set the toolbar's background color.
Styles the event labels shown on the calendar.
Label: Set the color of event labels.
Label of Past Events: Set the color of labels for past events.
Styles the side panel the filters and search move into. Only present when a side panel is in use.
Background Color: Set the panel's background color.
Border Color / Border Size / Border Style / Border Radius: Customize the panel's border.
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Dialog width.
Height: Dialog height.
Background Color: Dialog background color.
Adjusts display when opened as a panel inside a Flow screen.
Width: Panel width.
Height: Panel height.
Background Color: Panel background color.
Output Variables
The Calendar exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Calendar component, and pick the output variable you need.
Event Selection
Populated when the user clicks an event.
Selected Event
Record (SObject)
The full record of the event the user clicked.
Selected Event Name
Text (String)
The unique name of the selected event.
Example: After the user clicks a meeting on the calendar, use Selected Event to pre-populate an Edit Record screen with that event's details.
Event Action Click
Populated when the user clicks a context menu or popover action on an event.
Clicked Event Action Name
Text (String)
The name of the action the user clicked.
Clicked Event Action Event Name
Text (String)
The unique name of the event on which the action was clicked.
Clicked Event Action Event
Record (SObject)
The full record of the event on which the action was clicked.
Example: Wire a "Delete" event action to a Delete Records step — gate the deletion on Clicked Event Action Name equaling
delete.
Empty Spot Action Click
Populated when the user clicks a context menu action on an empty time slot.
Clicked Cell Action Name
Text (String)
The name of the empty-spot action the user clicked.
Clicked Cell Action Start
Text (String)
The ISO 8601 start datetime of the slot where the user clicked.
Clicked Cell Action End
Text (String)
The ISO 8601 end datetime of the slot where the user clicked.
Example: Use Clicked Cell Action Start and Clicked Cell Action End to pre-fill the start and end date fields of a New Event creation screen.
Toolbar Action Click
Populated when the user clicks a custom action button in the toolbar.
Clicked Toolbar Action Name
Text (String)
The name of the toolbar action button the user clicked.
Example: Add an "Export" toolbar action and branch the flow on Clicked Toolbar Action Name to trigger an export step.
Drag New Event
Populated when the user clicks or drags on an empty area to create a new event (requires the Drag New Event interaction to be configured).
New Event Start
Text (String)
The ISO 8601 start datetime of the range the user dragged.
New Event End
Text (String)
The ISO 8601 end datetime of the range the user dragged.
Example: Use New Event Start and New Event End to pre-fill a new event creation form shown on the next screen.
Drag Event
Populated when the user drags an existing event to a new time slot to reschedule it (requires the Drag Event interaction to be configured).
Dragged Event Name
Text (String)
The unique name of the event that was moved.
Dragged Event Start
Text (String)
The new ISO 8601 start datetime after the drag.
Dragged Event End
Text (String)
The new ISO 8601 end datetime after the drag.
Example: After a drag, use Dragged Event Name and Dragged Event Start / Dragged Event End to update the corresponding record with an Update Records step.
Others
Number of Items
Integer
The total number of events currently loaded in the calendar.
Flow Interaction Output Variables
Like all interactive Flow components, the Calendar exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?