LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Guide
    • Learn the Basics
    • Installation & Licenses management
    • Flow vs. Dynamic Components
    • Integrating with Experience Cloud
  • Tutorials
    • Videos
    • Projects Tutorials
    • Components Tutorials
      • Alert
        • Create a custom branding alert
        • Create an error alert dismissible
      • Avatar
        • Create an avatar with actions
        • Create an avatar with details
      • Avatar Group
        • Display a list of contacts related to an account
        • Display a list of sharing users related to the record
      • Barcode
        • Generating and Displaying Barcodes for Product Codes
      • Biometrics
        • 101 Tutorial
      • Button
        • Customizing Flow Navigation Buttons
        • How to Add a "Cancel and Close" Button
        • How to Open Flows from Buttons
      • Button Groups
        • Identifying Clicked Buttons
      • Button Menu
        • How to change dynamically Avonni Button Menu Icons
      • Calendar
        • Calendar 101 Tutorial
        • How to Connect Multiple Data Sources to the Avonni Calendar
        • How to Customize Time Spans
        • How to Customize the Right-Click Menu
        • How to Add an Edit Action to Events
        • How to Add a New Event Button to the Avonni Calendar Header
        • How to Create Events by Dragging in the Avonni Calendar
        • How to Reschedule Events with Drag and Drop
        • How to Color-Code Calendar Entries in the Avonni Calendar
        • Using a variable Data Source
        • Using a Query Data Source
      • Carousel
        • Build a Related Products Carousel
      • Combobox
        • Implement Dependent Picklists in Comboboxes
        • How to Dynamically Enable/Disable Dependent Picklists
        • Using Multi-Select Comboboxes with Reactive Formulas
      • CSV Parser
        • 101 Tutorial
      • Data Table
        • Adding Filters
        • How to add Images onthe Data Table
        • Creating Row Actions
        • Displaying a Record as a QR Code
        • Displaying Record Name field as a link
        • Learn the Basics
        • Making a field editable
        • Setting Up Data Export
        • Tips and Tricks
          • Activate infinite scrolling
          • Creating an action from a button or a link
          • Customizing the Badge Color using a formula
          • How to Grayscale Header Actions Dynamically in Avonni Data Table
          • How to Conditionally Color Cells
          • Enabling auto-refresh on the Data Table when pressing a button
          • Handling formula text field
          • How to set column visibity
          • Passing multiple record IDs to another flow
          • Data Table Editor
      • Date Picker
        • Display a date picker with Marked Dates from a Get Records
      • Date Time Picker
        • How to create Collection Variables for StartDateTime and EndDateTime
        • How to Block Out Times
      • Delay Interaction
        • Creating a Confetti Celebration on the Final Screen
        • Launch a flow dialog without a screen
      • Dual Listbox
        • Display contacts with custom icons
        • Accounts list group by industry
      • Expandable Section
        • How to add components into an expandable section
      • Header
        • Building Engaging Card Headers
        • Crafting a Profile Header
        • Adding Action Buttons to Headers
        • Adding a Background Image to Your Header
      • Input Pen
        • Add the custom Toolbar
        • How to Store Input Pen Drawings as Attachments in Salesforce
      • Kanban
        • 📹Introduction
      • List
        • Create a grid list with images
        • Create a sortable list
        • How to Reorder Items and Update Records
        • Vertical List with Actions
      • Navigation
      • Map
        • Customize the Map Marker
        • Visualizing Account Information on a Map
      • Metric
        • 📹Introduction
      • Microphone
        • Save the Microphone recording file as an attached on a record
      • Progress Indicator
        • Creating a Universal Dynamic Progress Step Collection
        • How to Change the Appearance of Your Progress Indicator using a variable
        • Error Handling
      • QR Code
        • Generate a QR Code from a record field
      • Record Detail
        • Using the Record Detail with Reactive Screens
      • Scoped Notification
        • Display message based on a value
      • Text Area
        • TextArea issue with max length when clicking on the next button
      • Tree
        • Build a Tree View with Dynamic Record Details
      • Timeline
        • Assigning multiple source collection to the Timeline
        • Customizing Date Format in the Timeline Component using Luxon
        • Create a horizontal activity timeline
        • Display Tasks
        • Perform actions on selected tasks
      • Vertical Visual Picker
        • Adding sub-items
        • Display a list of online contacts
    • Interactions
      • Enabling auto-refresh for queries after the Flow Dialog ends
      • Creating a Confetti Celebration on the final screen
      • How to create an interaction to navigate to an object
      • How to create an interaction to a record page
      • How to create an interaction to open another flow
      • How to pass an Input Variable from One Flow to Another
      • How to setup an Open Flow Panel interaction
    • Reactive Query Tutorials
      • How to make Data Tables Reactive
      • Build a reactive Data Table Using Dependent Picklists
      • Building a Dynamic Metrics Dashboard with the Data Table
      • How to build a reactive 'Quarterly Opportunity Tracker' component
      • How to Create a Combobox-Filtered Data Table
      • Create a Dynamically Linked Account-Contact View
      • Troubleshooting
    • Tips and Tricks
      • Copy / Paste a component settings
      • Create a link to the record using the href attribute
      • Create a variable and use it in a component property
      • Data Table
      • Hide Standard Header and Footer in a flow
      • How to pass your current RecordID in your screen flow
    • Platform Events
      • Configuration tutorial
  • Flow Components
    • Explore All Components
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Barcode
    • Barcode Scanner
    • Biometrics
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Calendar
    • Carousel
    • Chart
    • Chip Container
    • Combobox
    • Color Picker
    • CSV Parser
    • Date Picker
    • Data Table
    • Date Time Picker
    • Delay Interaction
    • Document Scanner
    • Dual Listbox
    • Expandable Section
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Hero Banner
    • Icon Picker
    • Image
    • Input Choice Set
    • Input Choice Set Grid
    • Input Counter
    • Input Date Range
    • Input Pen
    • Illustration
    • Interaction service
    • Kanban
    • List
    • Map
    • Metric
    • Microphone
    • Navigation
    • NFC Scanner
    • Pill Container
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Progress Popover
    • QR Code
    • Rating
    • Record Detail
    • Scoped Notification
    • Separator
    • Slider
    • Tabs
    • Text Area
    • Timeline
    • Tree
    • User Location
    • Vertical Visual Picker
    • Visual Picker
    • Visual Picker Link
    • Video Player
    • Welcome Mat
  • Component Builder
    • Overview
    • Properties Pane
    • Interactions Pane
      • Copy Records
      • Download
      • Export To
      • Fire Confetti
      • Flow Navigation
      • Navigate
      • Show Toast
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
      • Open Flow Panel
      • Update Records
      • Refresh Query
      • Refresh All Queries
      • Open Quick Action
    • Style Pane
    • Component Templates
    • Layout and Customization
      • Alignment controls
      • Copy / Paste component settings
      • Margin / Padding
      • Pull To Boundary
      • Undo / Redo
  • Data Sources
    • Understanding Data Sources
    • Manual
    • Variable
    • Query
    • Query VS Variable
    • Picklist
  • Actions
    • Overview
    • Data Manipulation and Transformation
      • Convert Lead
      • Create file
      • Split Text to Text Collection
      • SObject Collection Math
      • SObject Collection Join
      • Get Record from SObject Collection
      • SObject Collection to Activity Timeline Items
      • SObject Collection to Calendar Marked Date Collection
      • SObject Collection to Scheduler Events
      • SObject Collection to Text Collection
    • Data Conversion and Formatting
      • Text Collection Get Value
      • Get Value from String Collection
      • Number Collection Get Value
      • Join Text Collection
      • Format Text in SObject Collection
      • Format Text Collection
      • Text Collection to Combobox Options
      • Text Collection to Dual Listbox Options
      • Text Collection to Progress Indicator Steps
    • UI & Navigation
      • New Avatar Action Collection
      • New Button Menu Item Collection
      • New Carousel Item Collection
      • New Combobox Option Collection
      • New Dual Listbox Option Collection
      • New Header Action Collection
      • New Header Avatar Action Collection
      • New List Action Collection
      • New Navigation Item Collection
      • New Progress Indicator Step Collection
      • New Progress Popover Step Collection
      • New Slider Custom Label Collection
  • Help
    • Performance Guide
    • How do I contact support?
    • How do I report Bugs?
    • Troubleshooting
    • Release Process
  • Miscellaneous
    • Live use cases examples
    • Release Notes
    • Salesforce Flow Limit
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Tutorials
  • Getting Started
  • Working with Events
  • Advanced Configurations
  • Real-World Examples
  • Configuring the Calendar
  • Data Source
  • Data Mappings
  • Changing the Properties
  • Selected Display
  • Advanced Options
  • Header
  • Available Times
  • Context Menu Actions
  • Event Display
  • Filter
  • Search
  • Side Panel
  • Calendar Appearance
  • Interactions
  • Interactions Tutorials
  • Style
  • Specifications

Was this helpful?

  1. Flow Components

Calendar

The Avonni Calendar provides a customizable interface for displaying and managing resources and events in various formats, including calendars, timelines, and agendas.

Last updated 1 month ago

Was this helpful?


Tutorials

Getting Started

Working with Events

Advanced Configurations

Real-World Examples


Configuring the Calendar

Data Source

  • 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.

Only a resource collection can be associated with the Avonni Calendar.

  • 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.

Adding Data

The Avonni Calendar offers flexibility in how you provide data:

Data Source
Description
Best Use Cases

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

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.

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.

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.

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

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.

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).


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

Empty Spot Actions

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 define what will happen when users click on menu items.

Interactions allow you to control how the Avonni Calendar responds to user actions. Here's a breakdown of the available interaction types and what they achieve:

  • On Event: Control actions when a user interacts with an existing event. This could include opening an edit form, displaying event details, or requesting confirmation before deletion.

  • On Empty Spot: Determine what happens when a user clicks a space on the calendar. Perhaps initiate creating a new event at that specific time slot.

  • On Toolbar: Customize how the calendar reacts to button presses on the toolbar (e.g., changing views, navigation).

  • On Event Select: Trigger actions when a user selects an existing event, such as displaying details or offering edit/delete options.

  • On Display Select: Similar to 'On Event Select', but with more customization options based on how the user selects the event (single click, double click, etc.)

  • On Time Span Select: Dictate what happens when a user selects a time range on the calendar via the toolbar. You might enable the quick creation of a new event spanning that time slot.

Please refer to this page for a comprehensive list of available interactions and their detailed usage.

Interactions Tutorials

Name
Description
Illustration

Learn to enable hover-triggered event editing in Avonni Calendar.

Add "New" button to Avonni Calendar for creating Salesforce events.

The Avonni Calendar allows users to create events easily by dragging them on the calendar.

How to reschedule events on with simple drag-and-drop functionality.

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

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

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.

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

The is where you define and input the necessary information for the calendar to function effectively. It comprises two main elements: Resources and Events.

If needed, events can come from multiple collections. to learn more.

Avonni Calendar allows customizable day, week, or month views, enhancing planning with adjustable, multi-day spans. .

This property enables you to add button actions on the toolbar. These actions are triggered based on the interactions created from the .

This format ensures a clear and standardized way to specify time frames, making it easier to configure and understand the available time slots.

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, or deleting the event.

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

On New Event Drag: Define what happens when a user drags across the calendar to create a new event. You might trigger a form to gather event details or directly save the new event with default values. .

On Existing Event Drag: Let users change an event's start time, end time, and date by dragging it to a new position on the calendar. .

Data Source
View this tutorial
Using a variable Data Source
View tutorial
View Tutorial
Manual
Variable
Query
Time Spans
Learn more
Interaction Panel
Create an edit action on an event
Create a new event button on the Header
Create events easily by dragging from start time to end time
Drag and drop to reschedule events
such as editing
Learn more
Cover

Learn the basics

Cover

101 - How to use the Calendar Component

Cover

Watch Tim's guided video tutorial on configuring the Calendar

Cover

Nagivate to the record page when clicking on an event

Cover

How to Schedule Events with Drag & Drop

Cover

How to Reschedule Events with Drag & Drop

Cover

How to Edit Events on Hover using Actions

Cover

How to Add a "New Event" Button

Cover

How to Color-Code Calendar Entries

Cover

How to connect multiple Data Sources

This tutorial explains how to link multiple sources collection for events to the calendar.

Cover

Building a Unified Marketing Campaign Timeline

Explore how a marketing agency overcomes complex campaign challenges.

Theme variations