Calendar
The Avonni Calendar provides a customizable interface for displaying and managing resources and events in various formats, including calendars, timelines, and agendas.
Setting Up Your Calendar
Understand Resources and Events
The Avonni Calendar uses two core concepts: Resources and Events.
Resources: The "who" or "what" of your schedule. Think of these as the people, places, or events scheduled for.
Examples: Meeting rooms (Room A, Room B), staff members (John Doe, Jane Smith), equipment (Projector, Laptop).
Purpose: Track availability and prevent scheduling conflicts.
Events: The "when" and "what's happening" of your schedule. These are the scheduled activities.
Examples: "Team Meeting," "Client Call," "Project Deadline."
Purpose: Represent scheduled appointments, tasks, or deadlines, typically linked to a specific resource.
In essence, events are scheduled for resources. You need to define both to populate your calendar. The next step is to connect these concepts to a data source.
Choose Your Data Source Type
Now that you’ve got a handle on Resources (the “who” or “what”) and Events (the “when” and “what’s happening”), it’s time to bring them into your Avonni Calendar! The Data Source is how you feed this information into the component. You’ll pick a method that suits your needs.
Here’s how to choose and set it up:
Data Mappings
Importance of Data Mapping
Data mapping is essential when using a variable data source. It connects fields from your Salesforce Records to the Avonni Calendar's attributes, ensuring your data is displayed correctly.
How Data Mapping Works
Data mapping is a translation process where you specify which Salesforce field corresponds to each attribute in the Avonni 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.
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 challenging to identify which event is happening in which room.
This mapping process is important 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.
Choose a Display Format
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.
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 chronologically.
Pick how your Calendar looks. Each option changes how users see events and resources:
Timeline: A horizontal view of events over time.
Example: See all Room A’s bookings in a week.
Calendar: The classic grid layout (days in rows/columns)
Example: A monthly view of appointments
Agenda: A list of events in order by date.
Example: “9 AM Meeting,” “10 AM Call” listed chronologically.
How: Select your preferred display in the Selected Display setting.
Changing the Properties
Advanced Options
Here's a concise description of the advanced options available for the Avonni Calendar component
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.
Header
The Header section provides various customization options for the top header.
Here's a quick run-down of the options available:
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 by 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:
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).
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:
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 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.
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 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:
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 calendar's header
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.
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.
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.
Last updated
Was this helpful?