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.
📣 Brand New on the Avonni Calendar
Tutorials
Getting Started
Working with Events
Advanced Configurations
Real-World Examples
Configuring the Calendar
Data Source
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: 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.
If needed, events can come from multiple collections. View this tutorial to learn more.
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. |
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. |
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:00represents the start time (8 AM).18:00represents 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:
|
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 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. View tutorial.
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. View Tutorial.
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 |
|---|---|---|
| String | Define the start date of the calendar. If empty, current date will be displayed. |
| String | Define how the calendar should be display. Available values: |
| String | Designed to provide users with the ability to define and navigate through custom time periods |
| String | Display(s) that should not appear in the toolbar options. The toolbar button will be hidden if one or zero display is visible. |
| String | Orientation of the schedule, when the selected display is timeline. |
| Boolean | Pull the elements on either side of the container to the boundary. |
| Boolean | If present, horizontal scrolling will be prevented in the timeline display. |
| Boolean | If present the top toolbar is hidden. |
| String | Define a title for the top toolbar |
| String | To add an avatar on the top toolbar section |
| String | To create actions for the top toolbar section |
| Boolean | If present, the side panel will be hidden. This attribute only affects the agenda and calendar displays. |
| 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. |
| String | To set a position for the side panel |
| String | If present, the scheduler will only show the selected days. |
| String | If present, the scheduler will only show the selected months. |
| String | |
| String | Actions that will be displayed in the event context menu. |
| String | Actions that will be displayed in the event context menu when clicking on an empty spot. |
| String | Define a theme for the events. |
| String | Define one color palette per resource |
| String | Fields displayed on the popover visible on hover on an event |
💡 Practical Examples
Below are 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 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 updated