> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/calendar.md). # Calendar ## 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


Learn the basics	/files/P8a9Kp0dBKcmwygUWGz7	/pages/bTsjAaQvWdNnxxD7fHii
101 - How to use the Calendar Component	/files/cssyQNP5BxWRs3zBTLIu	/pages/OWGqCsUijBUgTcgtanoe
Watch Tim's guided video tutorial on configuring the Calendar	/files/k27NB9mLfwXScvfq11cC	https://www.linkedin.com/posts/tim-combridge_avonni-salesforce-salesforceflow-activity-7207245371687792640-N_BU

### Working with Events


How to Schedule Events with Drag & Drop	/files/RiECu9nomF9v9tT6GzHk	/pages/7K8gt0AQbmSRjtmRyw1T
How to Reschedule Events with Drag & Drop	/files/4Sswm8sTcVZ2C3Wu2nn5	/pages/99IlBfu1PSDpTRMfFVsY
How to Edit Events on Hover using Actions	/files/KuNMTYHwYAzkCtgROoEM	/pages/9BPhrn2i7hpGHtrt0cfC
How to Add a "New Event" Button	/files/5wghHcf5DcYhPeDXkyaZ	/pages/vT88cAEUBv7XM51O77Fj
How to Color-Code Calendar Entries	/files/kV60VaJe49Wvd3cRtp1t	/pages/T0XTyJisBnD1Kofq4sFX
Navigate to the record page when clicking on an event	/files/KuNMTYHwYAzkCtgROoEM

### Advanced Configurations


How to connect multiple Data Sources	This tutorial explains how to link multiple sources collection for events to the calendar.		/files/ywPjiUtWwFew1FNFgmjD	/pages/mAaYS0oD09FSotW67gSd

### Real-World Examples


Building a Unified Marketing Campaign Timeline	Explore how a marketing agency overcomes complex campaign challenges.		/files/mtplQ4vMiSH0BZoIn01c	/pages/9a8Rg2eq8yxgd1zbWrxs

*** ## 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](/flow/component-builder/data-sources/understanding-data-sources.md) 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. {% hint style="info" %} Only a resource collection can be associated with the Avonni Calendar. {% endhint %} * **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. {% hint style="info" %} If needed, events can come from multiple collections. [View this tutorial](/flow/tutorials/components/calendar/how-to-connect-multiple-data-sources-to-the-avonni-calendar.md) to learn more. {% endhint %}

Data Source	Description	Best Use Cases
Manual	Add events and resources directly within the component.	Testing, simple scenarios, data not in Salesforce.
Variable	Connect to collections created in Salesforce Flows (via 'Get Records').	Dynamic display based on Salesforce records.
Query	Write queries to pull data, apply filters, and handle large datasets.	Complex data retrieval, multiple Salesforce objects, large volumes.

{% content-ref url="/pages/TbKHl3rKCy00o7WEq5hN" %} [Using a variable Data Source](/flow/tutorials/components/calendar/using-a-variable-data-source.md) {% endcontent-ref %} ### 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. {% hint style="warning" %} 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.

{% endhint %} 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:

Selected Display	Description	Image
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](/flow/tutorials/components/calendar/how-to-customize-time-spans.md). **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.

| Setting | Description | | --------------- | -------------------------------------------------------------------------------------------------------------------------- | | **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](/flow/component-builder/interactions-panel.md). | ### Available Times The Available Times section customizes which time frames appear on your calendar — useful for focusing on specific periods of interest.

| Setting | Description | | -------------- | ----------------------------------------------------------------------------------------- | | **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. | {% hint style="warning" %} 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`.

{% endhint %} ### Context Menu Actions The Context Menu Actions section adds specific actions to the context menu of calendar events and empty time slots.

Setting	Description
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.

| Setting | Description | | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **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](/flow/component-builder/interactions-panel.md) 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. {% tabs %} {% tab title="Margin" %} 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. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the calendar and its border. * **Top / Right / Bottom / Left:** Adjust the inner spacing on each side. {% endtab %} {% tab title="Size" %} 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. {% endtab %} {% tab title="Toolbar" %} Styles the calendar's toolbar. * **Background Color:** Set the toolbar's background color. {% endtab %} {% tab title="Events" %} 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. {% endtab %} {% endtabs %} *** ## 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. | Output variable | Type | What it returns | | ----------------------- | ---------------- | ---------------------------------------------- | | **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. | Output variable | Type | What it returns | | ----------------------------------- | ---------------- | ------------------------------------------------------------- | | **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. | Output variable | Type | What it returns | | ----------------------------- | ------------- | --------------------------------------------------------------- | | **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. | Output variable | Type | What it returns | | ------------------------------- | ------------- | ------------------------------------------------------- | | **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). | Output variable | Type | What it returns | | ------------------- | ------------- | ---------------------------------------------------------- | | **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). | Output variable | Type | What it returns | | ----------------------- | ------------- | ----------------------------------------------- | | **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 | Output variable | Type | What it returns | | ------------------- | ------- | ------------------------------------------------------------ | | **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](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md). --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/flow/flow-components/calendar.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.