Comment on page

Calendar

📘 Overview
The Avonni Calendar Component displays resources and events in calendar, timeline, or agenda formats. With its interface and customizable features, the Avonni Calendar offers seamless integration and an organized presentation of your data, visually streamlining event and resource management.
This page walks you through:
​Tutorials​
​Configuring the Calendar​
​Calendar display​
​Advanced options​
​Toolbar configuration​
​Side Panel Configuration​
​Context menu actions​
​Interactions​
👉 Explore Possible Use Cases​
🎓 Tutorials
Name
Description
Illustration
​Assigning multiple source collection to the Calendar​
This tutorial explains how to link multiple sources collection for events to the calendar.
​
​
​Create an edit action on an event​
Learn to enable hover-triggered event editing in Avonni Calendar.
​
​
​Create a new event button on the Header​
Add "New" button to Avonni Calendar for creating Salesforce events.
​
​
​🎥 Learn the basics​
Video tutorial about learning the basics of the Avonni Calendar.
​
​
​Using the Calendar Component​
This tutorial explains how to configure the Avonni Calendar.
​
​
Configuring the Calendar
Configuring the Data Source
Proper data source configuration is crucial to harnessing the full potential of the Avonni Calendar Component. The Data Source is where you define and input the necessary information for the calendar to function effectively. It comprises two main elements: Resources and Events.
Resources: In the context of the Avonni Calendar, 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 need to 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.
If needed, events can come from multiple collections. View this tutorial to learn more.
Feeding Data into the Calendar
There are two primary ways to feed data into the Avonni Calendar:
Manual Data Source: The calendar can be populated manually. This approach is ideal for scenarios where data is not directly pulled from Salesforce records or for initial setup and testing. Here, you enter resources and events into the component, allowing immediate visualization and scheduling without needing pre-existing data.
Using Variable Collections: This method provides the calendar with collections obtained through 'Get Records' in Salesforce Flow Builder. The calendar can dynamically display events and resources using variable collections based on the data retrieved from your Salesforce records.
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 format – 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
This 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
This feature 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
This property enables you to add button actions on the toolbar. These actions are triggered based on the interactions created from the Interaction Panel. 
Side Panel
The Side Panel section offers multiple customization options for the side panel of your calendar. Here are the options available:
Attribute
Description
Hide Side Panel
This option allows you to hide the side panel if it's not required. Please note that this feature only affects the agenda and calendar displays.
Hide Resources Filter
With this feature, 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.
Side Panel Position
This allows you to control the positioning of the side panel relative to the schedule. Similar to the "Hide Side Panel" option, this feature only applies to the agenda and calendar displays.
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).
This format ensures a clear and standardized way to specify time frames, making it easier to configure and understand the available time slots.
​
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.
Event Display
The Event Display section of the Avonni Calendar component properties panel offers a range of options to customize 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.
Theme variations
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: These fields will be displayed in a small popup box (or a 'popover') when a user hovers over an event. This allows users to view essential event details without clicking on them.
🪄 Interactions
Interactions define what will happen when users click on menu items. Here are the available Actions for the Calendar Component:
On Event: defining interactions on event actions.
On Empty Spot: defining interactions on 
On Toolbar: defining interactions on toolbar actions.
On Event Select: defining interactions on event actions.
On Display Select: defining interactions when the user clicks on an event.
On Time Span Select: defining interactions when the user selects a time span from the toolbar. 
You can find a list of interactions that are available here.
Interactions Tutorials
Name
Description
Illustration
​Create an edit action on an event​
Learn to enable hover-triggered event editing in Avonni Calendar.
​
​
​Create a new event button on the Header​
Add "New" button to Avonni Calendar for creating Salesforce events.
​
​
🎨 Style
From the Style panel, you can customize styling attributes for the Calendar component: 
Size: set a specific size for the component.
Toolbar: customize the background color of the toolbar.
🎛️ Specifications
Attributes
Events
Styling
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
💡 Practical Examples
Below, you'll find various examples highlighting how the Avonni Calendar can address your unique business needs.
Name
Description
Event Scheduling for Sales Teams
Sales teams can use the Avonni Calendar to keep track of client meetings, follow-ups, and deadlines, thereby managing their workflow efficiently.
Resource Allocation
Project managers can allocate resources like personnel and meeting rooms by visualizing availability and tasks on the Avonni Calendar.
Customer Appointment Management
Customer service can use the Agenda display to manage customer appointments effectively by restricting views to specific days and time frames.
Marketing Campaign Timeline
Marketing teams can layout their entire campaign timeline, from conception to execution, ensuring everyone is aligned with the key dates and milestones.
Training and Development Calendar
Human Resources can create a training calendar, complete with detailed information in popover fields, and custom actions like "Join Training".
Employee Leave Tracker
HR can use a customized view to track employee leave, making sure there is no overlap or understaffing issues.
Conference Room Booking
The Avonni Calendar can be used to manage and book conference rooms in an organization, allowing for better resource utilization.
Client Project Milestones
Account managers can use the calendar to set and monitor client project milestones, helping keep things on track.
Financial Reporting Deadlines
Finance teams can mark all financial reporting deadlines and automate reminders.
Inventory Replenishment Schedule
Supply chain teams can set reminders for inventory replenishment, ensuring no stockouts.
Personalized User Calendars
Avonni Calendar allows the integration of personalized avatars and titles, making each user's calendar distinct and easy to recognize.
Board Meeting Planner
Executive assistants can plan and manage board meetings, hiding unnecessary views and providing all the required details in popover fields.

Name	Description	Illustration
Assigning multiple source collection to the Calendar	This tutorial explains how to link multiple sources collection for events to the calendar.
Create an edit action on an event	Learn to enable hover-triggered event editing in Avonni Calendar.
Create a new event button on the Header	Add "New" button to Avonni Calendar for creating Salesforce events.
🎥 Learn the basics	Video tutorial about learning the basics of the Avonni Calendar.
Using the Calendar Component	This tutorial explains how to configure the Avonni Calendar.

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.

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	This 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	This feature prevents horizontal scrolling in the timeline display, ensuring all events fit within the viewable area for easy access and clear visualization.

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.

Attribute	Description
Hide Side Panel	This option allows you to hide the side panel if it's not required. Please note that this feature only affects the agenda and calendar displays.
Hide Resources Filter	With this feature, 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.
Side Panel Position	This allows you to control the positioning of the side panel relative to the schedule. Similar to the "Hide Side Panel" option, this feature only applies to the agenda and calendar displays.

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.

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.

Name	Description	Illustration
Create an edit action on an event	Learn to enable hover-triggered event editing in Avonni Calendar.
Create a new event button on the Header	Add "New" button to Avonni Calendar for creating Salesforce events.

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.

Name	Description
Width	Set a specific width for the component
Height	Set a specific height for the component

Name	Description
Background color	Customize a background color for the toolbar

Name	Description
Event Scheduling for Sales Teams	Sales teams can use the Avonni Calendar to keep track of client meetings, follow-ups, and deadlines, thereby managing their workflow efficiently.
Resource Allocation	Project managers can allocate resources like personnel and meeting rooms by visualizing availability and tasks on the Avonni Calendar.
Customer Appointment Management	Customer service can use the Agenda display to manage customer appointments effectively by restricting views to specific days and time frames.
Marketing Campaign Timeline	Marketing teams can layout their entire campaign timeline, from conception to execution, ensuring everyone is aligned with the key dates and milestones.
Training and Development Calendar	Human Resources can create a training calendar, complete with detailed information in popover fields, and custom actions like "Join Training".
Employee Leave Tracker	HR can use a customized view to track employee leave, making sure there is no overlap or understaffing issues.
Conference Room Booking	The Avonni Calendar can be used to manage and book conference rooms in an organization, allowing for better resource utilization.
Client Project Milestones	Account managers can use the calendar to set and monitor client project milestones, helping keep things on track.
Financial Reporting Deadlines	Finance teams can mark all financial reporting deadlines and automate reminders.
Inventory Replenishment Schedule	Supply chain teams can set reminders for inventory replenishment, ensuring no stockouts.
Personalized User Calendars	Avonni Calendar allows the integration of personalized avatars and titles, making each user's calendar distinct and easy to recognize.
Board Meeting Planner	Executive assistants can plan and manage board meetings, hiding unnecessary views and providing all the required details in popover fields.

Last modified 7d ago