Page cover

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.

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

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.

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

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
Illustration

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:

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


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?