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.
Particular attention should be given to the resource name attribute in the events section. This attribute is crucial because it links each event to its corresponding resource in the calendar.
Examples:
With Resource Name Mapping: Suppose you have two meeting rooms, 'Room A' and 'Room B'. If an event titled 'Team Meeting' is mapped to 'Room A', it will appear under 'Room A' in the calendar.
Without Resource Name Mapping: If the resource name isn't mapped, all events will appear under a single, undefined resource, making it difficult to identify which event is in which room.
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).
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.
Full Height sizes the calendar to fill the user's current screen height, eliminating the need to scroll and allowing complete calendar visibility at a glance.
Time Spans — Avonni Calendar allows customizable day, week, or month views with adjustable multi-day spans. Learn more.
Hide Side Panel hides the side panel (affects Agenda and Calendar displays only).
Side Panel Position sets which side the panel opens from.
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.
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.
Use a specific syntax to define an available time frame: each time frame is a string in the format start-end, where start and end are ISO 8601 24-hour times.
Example: To show 8 AM to 6 PM, write 08:00-18:00.
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).
Search
The Search option adds a search bar where users can find events by title. When enabled, you can also configure:
Placeholder Text — the text shown in the search bar before typing (e.g., "Search Events").
Search Box Position — where the search bar appears: Left, Right, Centered, Fill Width, or Panel.
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.
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?