# Calendar

*** ## Tutorials ### **Getting Started**


Learn the basics	image (7).avif	learn-the-basics
101 - How to use the Calendar Component	image (8).avif	calendar-101-tutorial
Watch Tim's guided video tutorial on configuring the Calendar	image (9).avif	https://www.linkedin.com/posts/tim-combridge_avonni-salesforce-salesforceflow-activity-7207245371687792640-N_BU

### Working with Events


How to Schedule Events with Drag & Drop	image (7).gif	how-to-create-events-by-dragging-in-the-avonni-calendar
How to Reschedule Events with Drag & Drop	image (6).gif	how-to-reschedule-events-with-drag-and-drop
How to Edit Events on Hover using Actions	image (10).avif	how-to-add-an-edit-action-to-events
How to Add a "New Event" Button	image (11).avif	how-to-add-a-new-event-button-to-the-avonni-calendar-header
How to Color-Code Calendar Entries	image (12).avif	how-to-color-code-calendar-entries-in-the-avonni-calendar
Nagivate to the record page when clicking on an event	image (10) (1).avif

### Advanced Configurations


How to connect multiple Data Sources	This tutorial explains how to link multiple sources collection for events to the calendar.		image (13).avif	how-to-connect-multiple-data-sources-to-the-avonni-calendar

### Real-World Examples


Building a Unified Marketing Campaign Timeline	Explore how a marketing agency overcomes complex campaign challenges.		image (14).avif	building-a-marketing-campaign-calendar

*** ## Configuring the Calendar ### **Data Source** The [Data Source](https://docs.avonnicomponents.com/flow/component-builder/data-sources/understanding-data-sources) is where you define and input the necessary information for the calendar to function effectively. It comprises two main elements: **Resources and Events**. * **Resources**: Resources refer to the entities or assets involved in your events. These could be meeting rooms, equipment, personnel, or other key elements relevant to your events. Resources are fundamental in providing 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**: Events are the scheduled activities or appointments that must be tracked on the calendar. They are the primary elements that users interact with and can range from meetings, appointments, project deadlines, etc. 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](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-connect-multiple-data-sources-to-the-avonni-calendar) to learn more. {% endhint %}

#### Adding Data The Avonni Calendar offers flexibility in how you provide data:

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="../tutorials/components/calendar/using-a-variable-data-source" %} [using-a-variable-data-source](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/using-a-variable-data-source) {% endcontent-ref %} ### **Data Mappings** **Importance of Data Mapping** Completing the data mappings is crucial when using a variable data source. Data mapping involves aligning Salesforce fields from the 'Get Records' collections with the corresponding attributes in the Avonni Calendar Component. This process ensures that the data fetched from Salesforce is accurately represented and organized within the calendar.

#### **How Data Mapping Works** Data mapping is a translation process where you specify which Salesforce field corresponds to each attribute in the Avonni Calendar. For example: * If your 'Get Records' collection includes a field for event start dates in Salesforce, you need to map this field to the start date attribute of the Avonni Calendar event. * Similarly, 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. Similarly, an event 'Client Presentation' mapped to 'Room B' will be displayed under 'Room B'. * **Without Resource Name Mapping**: If the resource name isn’t mapped, both 'Team Meeting' and 'Client Presentation' will appear under a single, undefined resource, making it difficult to identify which event is happening in which room.

{% endhint %} This mapping process is vital because it dictates how data from your Salesforce environment is displayed and interacted with in the calendar. Correct mapping ensures that events and resources are shown correctly, making the calendar a reliable and effective tool for managing schedules and resources. #### **Finalizing the Setup** 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. ## Changing the Properties ### Selected Display The Avonni Calendar offers three distinct display formats to cater to different scheduling and organizational preferences. Each format provides a unique way of viewing and interacting with your events and resources.

Selected Display	Description	Image
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 in chronological order.

### Advanced Options Here's a concise description of the advanced options available for the Avonni Calendar component

Attribute	Description
Hidden Displays	This option lets you hide certain display types from the toolbar. The toolbar button will be hidden if only one or no display type is visible.
Timeline Variant	Determines the orientation of the schedule when the selected display is a timeline.
Pull to Boundary	Pull to Boundary enables the calendar component to expand to the left and right edges, eliminating any margin between the calendar and the main component.
Zoom to Fit	Zoom to fit prevents horizontal scrolling in the timeline display, ensuring all events fit within the viewable area for easy access and clear visualization.
Time Spans	Avonni Calendar allows customizable day, week, or month views, enhancing planning with adjustable, multi-day spans. Learn more.

These options offer greater customization to fit your needs and enhance the user experience in calendar management and navigation. ### Header The Header section provides various customization options for the top header.

Here's a quick run-down of the options available:

Attribute	Description
Hide Header	This property allows you to hide the top toolbar if necessary. If selected, the entire toolbar will not be displayed.
Title	This property lets you set a custom title for the toolbar. The title you input will prominently display on the toolbar, clearly identifying your calendar.
Avatar	This option lets you add an avatar to the toolbar. This can be useful for personalization or to provide visual cues about the calendar's owner or context.
Actions	This property enables you to add button actions on the toolbar. These actions are triggered based on the interactions created from the Interaction Panel.

### Available Times The Available Times section provides multiple options to customize the time frames that appear on your calendar. This feature is handy for focusing on specific periods of interest. Here are the available options:

Attribute	Description
Days	This option allows you to specify which days of the week should be visible on the calendar. If selected, the calendar will only display the chosen days, effectively hiding the rest.
Month	Similar to the Days option, you can choose which months should be visible on your calendar. Once a selection is made, the calendar will only show the selected months.
Time Frame	This feature allows you to define a custom time frame for the calendar. Using this, you can precisely control the hours visible on your calendar, effectively focusing on the time slots most.

{% hint style="warning" %} You need to use a specific syntax pattern to define an available time frame in the component. Each time frame should be expressed as a string in the format "start-end". The 'start' and 'end' times must be formatted according to the ISO8601 time standard, essentially a 24-hour clock format. **Example:** If you want to set the available time from 8 AM to 6 PM, you should write it as `08:00-18:00`. In this example: * **`08:00`** represents the start time (8 AM). * **`18:00`** represents the end time (6 PM). This format ensures a clear and standardized way to specify time frames, making it easier to configure and understand the available time slots.\ ![](https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FXKQtCyXh5RM8RTRY1Xqc%2F2023-11-26_13-26-01.png?alt=media\&token=1cb279c8-2bc1-4c83-8af8-5f456cf64163) {% endhint %} *** ### Context Menu Actions The Context Menu Action section provides options to add specific actions to the context menu of your calendar. This enhances the interactivity and functionality of your calendar events. Here are the available options:

Attribute	Description
Event Actions	These are button actions that appear in the context menu and detail popover of an event. By setting these, you can define custom actions that users can perform directly from an event, such as editing or deleting the event.
Empty Spot Actions	These are button actions that appear in the context menu when clicking on an empty spot in the calendar. This allows you to provide users with options to perform actions when no specific event is selected, such as creating a new event. Learn more.

### Event Display The Event Display section of the Avonni Calendar component properties panel offers various options for customizing the visual aesthetics of your calendar events.

Here are the available options: #### **Theme**: This option lets you choose a visual theme for your events. You can select from several preset themes, such as **default**, **transparent**, **line**, **hollow**, or **rounded**, each offering a unique visual style to suit your personal preference or brand identity.

#### **Palette**: This feature lets you assign different colors from a chosen palette to each resource. A color palette is a collection of colors that provide consistent color usage across different resources. This helps visually differentiate and quickly identify different types of resources on your calendar. #### **Popover Fields**: When a user hovers over an event, these fields will be displayed in a small popup box (or a 'popover'). This allows users to view essential event details without clicking on them. You can add any field information on the Popover.

### Filter The Filter section offers multiple customization options for your calendar's side panel.

Here are the options available:

Attribute	Description
Hide Resources Filter	You can hide the resources filter. This filter is located in the toolbar in the timeline display, but in other displays, it is found in the side panel.
Resources Filter Label	The 'Resources' filter label can be renamed if no resources were hidden in the previous setting.
Hide Date Picker	Selecting this option prevents you from choosing a specific date from the header of the calendar.
Type	This option controls the position of the filter menu. Choose from: Horizontal: Displays the filter menu in a horizontal bar across the component. Popover: Shows the filter menu in a compact window that appears when a button is clicked. Panel: Presents the filter menu in a side panel that slides out from the edge of the component

*** ### Search This option lets you add a search bar where users can find events by title. If enabled, you can also customize the following: * **Placeholder Text:** This sets the text displayed in the search bar before the user starts typing (e.g., "Search Events"). * **Search Box Position:** Choose where the search bar appears: left, right, centered, filling the width, or as a separate panel. *** ### Side Panel ### Calendar Appearance Tailor the Avonni Calendar's visual presentation to create a seamless, native-like experience within Salesforce. These customizable settings allow you to refine the calendar's appearance, ensuring it integrates smoothly and enhances your Salesforce environment. #### Pull to boundary With this, you can expand your calendar to full screen, pushing out those unnecessary margins. This gives your users a more integrated view of the calendar.

#### Full height Optimize your calendar's integration within the user interface by utilizing the full height setting. This ensures the calendar fits perfectly within the user's current screen size, eliminating the need to scroll and allowing complete calendar visibility at a glance.

## Interactions Interactions connect Calendar events to flow actions. Open the **Interactions** tab in the Component Builder to configure them. Each interaction fires when a specific thing happens on the Calendar — a user drags to create an event, clicks an existing event, clicks a toolbar button, etc. You then choose what the Calendar should do in response: open a flow dialog, navigate to a record, show a toast, update records, and more. ### Prevent Past Event Creation Toggle on **Prevent Past Event Creation** at the top of the Interactions tab to stop users from creating new events or dragging existing events into the past. When enabled, empty spots in the past are not clickable, and existing events cannot be dropped on past dates. ### Interaction Events The Calendar exposes eight interaction events. Each event provides access to different contextual data that you can pass to your actions.

| Interaction | Fires when... | Context data available | | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | **New Event Drag** |

A user clicks or drags on an empty area to create a new event.
View tutorial.

| Start Date Time, End Date Time of the dragged range | | **Existing Event Drag** |

A user drags an existing event to a new time slot.
View Tutorial.

| The event's name (key), plus its new Start Date Time and End Date Time | | **Event Select** | A user clicks on an event | The full event SObject record with all mapped fields | | **Event Action Click** | A user clicks a context menu action on an event (e.g., Edit, Delete) | The full event SObject record, plus the action name that was clicked | | **Empty Spot Action Click** | A user clicks a context menu action on an empty time slot | The action name, plus the Start Date Time and End Date Time of that empty spot | | **Toolbar Action Click** | A user clicks a custom action button in the toolbar | The toolbar action name | | **Toolbar Display Select** | A user picks a display mode from the toolbar (Timeline, Calendar, Agenda) | The selected display name | | **Toolbar Time Span Select** | A user picks a time span from the toolbar (Day, Week, Month, etc.) | The selected time span name | ### Available Action Types Per Event Not every action type is available on every event. Here is what you can configure: | Action type | New Event Drag | Existing Event Drag | Event Select | Event Action Click | Empty Spot Action Click | Toolbar Action Click | Display Select | Time Span Select | | --------------------------- | -------------- | ------------------- | ------------ | ------------------ | ----------------------- | -------------------- | -------------- | ---------------- | | **Navigate** | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | **Open Alert Modal** | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | **Open Confirm Dialog** | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | **Show Toast Notification** | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | **Flow Navigation** | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | **Open Flow Dialog** | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | **Open Flow Panel** | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | **Open Quick Action** | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | **Download** | Yes | Yes | Yes | Yes | Yes | Yes | — | — | | **Update Records** | — | Yes | — | — | — | — | — | — | | **Refresh All Queries** | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | **Fire Confetti** | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | | **Control Console Tab** | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | > **Tip****:** **Update Records** is only available on **Existing Event Drag** because dragging an event to a new position is the most common scenario where you want to save the updated start/end times directly to the record. ### Context Data and Input Variables When you configure an action (such as [Open Flow Dialog](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/open-flow-dialog)), you can pass context data from the interaction event to your action as input variables. The available context data depends on which event you're configuring. #### New Event Drag and Empty Spot Action Click These events provide the start and end datetimes for the area the user interacted with. When you add an input variable to an Open Flow Dialog or Open Flow Panel, the **Value** dropdown shows: | Value option | What it passes | | ------------------- | ---------------------------------------------------------------------------- | | **Start Date Time** | The start datetime of the area the user dragged or clicked (ISO 8601 format) | | **End Date Time** | The end datetime of the area the user dragged or clicked (ISO 8601 format) | | **Custom** | Lets you enter a custom value, flow variable, or expression | > **Example:** You have a "Schedule Appointment" flow that expects two input variables: `varInputStartDateTime` and `varInputEndDateTime`. On the **New Event Drag** interaction, add an **Open Flow Dialog** action, select your flow, then add two input variables. Set the first variable's name to `varInputStartDateTime` and its value to **Start Date Time**. Set the second to `varInputEndDateTime` with the value **End Date Time**. When a user drags across the Calendar, your scheduling flow opens with the correct time range pre-filled. #### Event Select and Event Action Click These events give you access to the full SObject record of the event the user clicked. In the **Value** dropdown, you can select item variables that correspond to any field from your event data mapping. > **Example:** Your events are mapped from the `Event` object. You set up an **Open Flow Dialog** on Event Select that opens an "Edit Event" flow. You add an input variable named `recordId` with the value set to the event's `Id` field from the item variables. Your target flow receives the exact record ID of the event the user clicked. #### Existing Event Drag This event gives you the event's key (name) and its new start/end times after the drag. This is typically used with [**Update Records**](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/update-records) to save the new position directly, or with [**Open Flow Dialog**](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/open-flow-dialog) to confirm the change. #### Toolbar Action Click, Display Select, and Time Span Select These events provide only the name of the action, display, or time span that was selected. They do not expose item-level context data. ### Chaining Actions You can add multiple actions to the same interaction event. They run in the order you define them. For [**Open Flow Dialog**](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/open-flow-dialog) and [**Open Flow Panel**](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/open-flow-panel), you also get three chaining hooks: | Hook | Fires when... | Common use | | ------------- | -------------------------------------------------- | ------------------------------------------------------------ | | **On Finish** | The launched flow finishes successfully | Show a toast confirmation, refresh query data, fire confetti | | **On Close** | The user closes the dialog/panel without finishing | Show a warning toast, navigate somewhere | | **On Error** | The launched flow throws an error | Show an error toast | Each hook supports its own set of chained actions: [Show Toast](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/show-toast), [Flow Navigation](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/flow-navigation), [Refresh All Queries](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/refresh-all-queries), and [Fire Confetti](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel/fire-confetti). > **Example:** You have an Open Flow Dialog that launches a "Create Event" flow. On **On Finish**, you add a **Show Toast** ("Event created!") followed by a **Refresh All Queries** so the Calendar immediately shows the new event. On **On Error**, you add a **Show Toast** with the Error variant so the user knows something went wrong. ### Tutorials | Name | Description | Illustration | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [**Create an edit action on an event**](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-add-an-edit-action-to-events) | Learn to enable hover-triggered event editing in Avonni Calendar. | ![](https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FZGET8vUjrNOuUHwCBKul%2F2023-08-31_11-41-50.png?alt=media\&token=5a8a26bc-b9f1-4037-b836-6ad7ea337f84) | | [**Create a new event button on the Header**](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-add-a-new-event-button-to-the-avonni-calendar-header) | Add "New" button to Avonni Calendar for creating Salesforce events. | ![](https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2Fd0tFXL5D4tnpkLTyArOQ%2F2023-08-31_11-42-26.png?alt=media\&token=169b6962-aaff-42fc-b3e9-471817e6d3a0) | | [**Create events easily by dragging from start time to end time**](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-create-events-by-dragging-in-the-avonni-calendar) | The Avonni Calendar allows users to create events easily by dragging them on the calendar. | ![](https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FXC4WlbWpc4KsXt77E3MR%2F2024-01-24_21-42-02%20\(1\).gif?alt=media\&token=dba4729b-d99b-43dc-bd3b-ed2685b05dd3) | | [**Drag and drop to reschedule events**](https://docs.avonnicomponents.com/flow/tutorials/components/calendar/how-to-reschedule-events-with-drag-and-drop) | How to reschedule events on with simple drag-and-drop functionality. | ![](https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FV8uxAVWScnNvpro7OE4k%2F2024-04-03_21-24-34%20\(1\).gif?alt=media\&token=890545a0-5f40-4a95-8349-14d58e10b3cc) | *** ## Output Variables The Scheduler exposes several output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Scheduler component, and pick the output variable you need. ### Event Selection When users click on an event in the Scheduler, these variables update automatically. {% hint style="warning" %} #### Important All datetime output variables (New Event Start, New Event End, Dragged Event Start, etc.) return values in **ISO 8601 format** as Text. If your target flow expects a DateTime variable, use an Assignment element to convert the text value, or set your flow variable type to Text and parse it downstream. {% endhint %} | Output variable | Type | What it returns | | ----------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Selected Event** | Record (SObject) | The full Salesforce record of the event the user clicked. Use this to display event details on the next screen or update the record. | | **Selected Event Name** | Text (String) | The name of the selected event. | > **Example:** A receptionist clicks on an appointment in the Scheduler. Use **Selected Event** to display the appointment details and offer a "Reschedule" or "Cancel" action on the next screen. ### Event Action Clicks When users click an action from an event's context menu, these variables identify which action was triggered and on which event. | Output variable | Type | What it returns | | ----------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | **Clicked Event Action Event** | Record (SObject) | The full Salesforce record of the event where the user clicked an action. | | **Clicked Event Action Name** | Text (String) | The name of the action the user clicked (e.g., "Edit", "Delete"). Use in a **Decision** element to route the flow based on which action was pressed. | | **Clicked Event Action Event Name** | Text (String) | The name of the event where the action was clicked. | > **Example:** A user clicks "Edit" on an appointment. Use a **Decision** element to check if **Clicked Event Action Name** equals "Edit", then navigate to an edit form pre-filled with data from **Clicked Event Action Event**. ### Empty Spot Actions When users click an action on an empty time slot, these variables capture the time range and action. | Output variable | Type | What it returns | | ----------------------------- | ------------- | ------------------------------------------------------------------------------ | | **Clicked Cell Action Name** | Text (String) | The name of the action the user clicked on the empty spot (e.g., "New Event"). | | **Clicked Cell Action Start** | Text (String) | The start date/time of the empty cell where the user clicked. | | **Clicked Cell Action End** | Text (String) | The end date/time of the empty cell where the user clicked. | > **Example:** A user clicks "New Appointment" on an empty 2:00–3:00 PM slot. Use **Clicked Cell Action Start** and **Clicked Cell Action End** to pre-fill the start and end times on a new event creation screen. ### New Event Drag When users drag across the Scheduler to create a new event, these variables capture the time range. | Output variable | Type | What it returns | | ------------------- | ------------- | -------------------------------------------------- | | **New Event Start** | Text (String) | The start date/time of the range the user dragged. | | **New Event End** | Text (String) | The end date/time of the range the user dragged. | > **Example:** A user drags from 9:00 AM to 10:30 AM on a resource row. Use **New Event Start** and **New Event End** to create a new Event record with those exact times. ### Event Drag (Reschedule) When users drag an existing event to a new time slot, these variables capture the updated position. | Output variable | Type | What it returns | | ----------------------- | ------------- | ----------------------------------------------------- | | **Dragged Event Name** | Text (String) | The name of the event that was dragged to a new time. | | **Dragged Event Start** | Text (String) | The new start date/time after dragging. | | **Dragged Event End** | Text (String) | The new end date/time after dragging. | > **Example:** A dispatcher drags a technician's appointment from 10:00 AM to 2:00 PM. Use **Dragged Event Name** to identify the record and **Dragged Event Start** / **Dragged Event End** to update the Event's DateTime fields. ### Toolbar Actions | Output variable | Type | What it returns | | ------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | **Clicked Toolbar Action Name** | Text (String) | The name of the toolbar action button the user clicked. Use in a **Decision** element to route the flow based on which toolbar button was pressed. | ### Display and Time Span Selection When users switch between calendar views or select a time span from the toolbar, these variables capture the choice. | Output variable | Type | What it returns | | ---------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Selected Display** | Text (String) | The display mode the user selected (e.g., "Timeline", "Calendar", "Agenda"). Use this to conditionally show different components or adjust logic based on the view. | | **Selected Time Span** | Text (String) | The time span the user selected from the toolbar (e.g., "Day", "Week", "Month"). | ### Component Metadata | Output variable | Type | What it returns | | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | **Number of Items** | Integer | The total number of events currently loaded in the Scheduler. Useful for displaying a count or making decisions when the schedule is empty. | *** ## Style Use the Style panel to adjust the visual aspects of your Avonni Calendar: * **occupiesSize:** Choose how much space the calendar component occupies on your screen. You can set a specific height and width. * **Toolbar:** Modify the toolbar's background color to match your application's overall design or branding * **Margin**: Control the amount of space between the calendar component and surrounding elements on your page ## Specifications {% tabs %} {% tab title="Attributes" %}

Name	Type	Description
`Start Date`	String	Define the start date of the calendar. If empty, current date will be displayed.
`Selected Display`	String	Define how the calendar should be display. Available values: `Timeline`, `Calendar`, `Agenda`.
`Selected Time Span`	String	Designed to provide users with the ability to define and navigate through custom time periods
`Hidden Displays`	String	Display(s) that should not appear in the toolbar options. The toolbar button will be hidden if one or zero display is visible.
`Timeline Variant`	String	Orientation of the schedule, when the selected display is timeline.
`Pull to Boundary`	Boolean	Pull the elements on either side of the container to the boundary.
`Zoom to Fit`	Boolean	If present, horizontal scrolling will be prevented in the timeline display.
`Hide Toolbar`	Boolean	If present the top toolbar is hidden.
`Title`	String	Define a title for the top toolbar
`Avatar`	String	To add an avatar on the top toolbar section
`Actions`	String	To create actions for the top toolbar section
`Hide Side Panel`	Boolean	If present, the side panel will be hidden. This attribute only affects the agenda and calendar displays.
`Hide Resources Filter`	Boolean	If present, the resources filter will be hidden. In the timeline display, the filter is in the toolbar. Otherwise, it is in the side panel.
`Side Panel Position`	String	To set a position for the side panel
`Available Times / Days`	String	If present, the scheduler will only show the selected days.
`Available Times / Months`	String	If present, the scheduler will only show the selected months.
`Available Times / Time Frames`	String
`Event`	String	Actions that will be displayed in the event context menu.
`Empty Spot`	String	Actions that will be displayed in the event context menu when clicking on an empty spot.
`Theme`	String	Define a theme for the events.
`Palette`	String	Define one color palette per resource
`Popover Fields`	String	Fields displayed on the popover visible on hover on an event

{% endtab %} {% tab title="Events" %} | Name | Description | | ---------------- | ------------------------------------------------------------------- | | Event | The item data clicked | | Empty Spot | | | Toolbar | Actions defined on the toolbar section | | Event Select | Actions defined when an event is selected | | Display Select | Actions defined when the user selects a display from the toolbar. | | Time Span Select | Actions defined when the user selects a time span from the toolbar. | | {% endtab %} | | {% tab title="Styling" %} #### Size | Name | Description | | ------ | --------------------------------------- | | Width | Set a specific width for the component | | Height | Set a specific height for the component | #### Toolbar | Name | Description | | ---------------- | -------------------------------------------- | | Background color | Customize a background color for the toolbar | | {% endtab %} | | | {% endtabs %} | |