Calendar 101 Tutorial

Overview

This tutorial is designed to guide you through the basics and beyond, demonstrating the dynamic features and customizability of the Avonni Calendar.

Let's dive in and start exploring!

Video Tutorial

Use Case

Envision a typical scenario where a team leader or project manager needs to track various tasks assigned to a group of users. Using the Avonni Calendar Component we can create a comprehensive, easy-to-navigate calendar view that shows these tasks.

1️⃣ Create Get Records collections

Our first step revolves around integrating data into our calendar. Using Flow Builder, we will add two Get Records collections to our flow. One collection fetches our users' details, and the other collects all the task information.

Once these collections are in place, we will link them to the Avonni Calendar Component as resources and events. Our users become the resources of our calendar, while the tasks represent the events that will be assigned to these resources.

1. Start Flow Builder: Open the Flow Builder tool in Salesforce.

2. Create New Flow: Click 'New Flow' and select 'Screen Flow'.

3. Add Get Records Elements: On the canvas, click the '+' sign to add an element. From the dropdown menu, select 'Get Records'.

4. Configure the Get Records for Users:

   • Choose the Object: For the first Get Records element, choose 'User' as the object from the dropdown menu.

   • Set the Conditions: Define your conditions to fetch the desired set of users. You could bring all active users or users belonging to a specific profile or role. If you wish to fetch all users, leave the conditions blank.

   • Choose 'All Records': Select 'All records' under the 'How Many Records to Store' section. This ensures all user records meeting the conditions are fetched.

5. Add Another Get Records Element: Repeat the process to add a second Get Records element. This time, choose 'Task' as the object.

6. Configure the Get Records for Tasks:

   • Set the Conditions: Define your conditions to fetch the tasks assigned to the users fetched in the previous step. This could be based on task status, assignment date, due date, or other task fields.

   • Choose 'All Records': Select 'All records' under the 'How Many Records to Store' section.

2️⃣ Add a screen element

In this second step, we'll incorporate the Avonni Calendar Component into a new screen element. Here's how:

1. Add a Screen Element: Select the '+' sign on the Flow Builder canvas to add a new element. From the dropdown list, choose 'Screen'. This will create a new screen on which you can add the Avonni Calendar Component.

2. Name the Screen: Give your screen a meaningful name such as 'TaskCalendarScreen'. This will help you quickly identify the screen in your flow.

3. Add the Avonni Calendar Component: In the Screen Components section on the left, scroll down until you find 'Avonni Calendar' (under Custom Components). Drag and drop this component onto your newly created screen.

3️⃣ Configure the Data Source section

In the Data Source Section, select "Variable" and map the Get Records collection for Resources and Events.

• Resources: For resources, select the 'Get Users' collection variable you created in the first step. These are the user records fetched from the Get Records element, representing the users for whom tasks will be displayed.

• Events: For events, select the 'Get Tasks' collection variable. These are the task records assigned to the users and fetched in the Get Records element.

4️⃣ Configure the Data Source section

One of the essential steps in configuring the Avonni Calendar Component is setting up the Data Mapping. This process assigns specific fields from your data to relevant attributes in the calendar component, ensuring your task and user data is presented accurately.

It's important to know that these field mappings are purely illustrative based on our specific use case. When setting up the Avonni Calendar Component for your projects, your field mappings depend on your unique data and requirements.

For this tutorial, we'll walk through the following mappings:

Resources Mapping: This process associates user data with the calendar.

• Label: This will be mapped to 'Full Name.' The users' full names will be displayed on the calendar to indicate to whom each task is assigned.

• Name: This should be mapped to 'User ID.' This attribute associates the user records with unique identifiers for efficient data management.

Events Mapping: This section links task data with the calendar.

• Title: This will be mapped to 'Subject.' The subject of each task will be shown on the calendar, providing a quick overview of what the task involves.

• Name: This should be mapped to 'Activity ID.' This attribute ensures each task has a unique identifier, making data handling and tracking more efficient.

• Resource Name: This should be mapped to 'Created by ID.' This associates each task with the user who created it.

• From: This will be mapped to 'Due Date only.' The due dates of the tasks will be reflected on the calendar, helping to keep track of deadlines.

5️⃣ Adjust display settings

In the Avonni Calendar Component, the ability to adjust display settings allows you to control how your task data is presented. You can easily switch between Timeline, Calendar, and Agenda views. Here's how to adjust these settings:

1. Select Avonni Calendar Component: Click on the Avonni Calendar Component you added to your screen. This will open up the settings panel on the right-hand side. Then, click on the button "Open Component Builder"

2. Locate the Selected Dislay option: Scroll down in the properties panel until you find the 'Selected Dislay' option. Here, you'll see a dropdown option for 'Timeline'.

3. Adjust the Selected Display View: Click on the dropdown to see three options: 'Timeline', 'Calendar,' and 'Agenda'. Each option will alter how your tasks are displayed in the calendar.

   • Timeline: If you want to provide a linear, visual representation of tasks over a selectable period, choose this option. It presents a clear picture of task progress and duration.

   • Calendar: This is your traditional grid-based view, offering a familiar and easy-to-understand layout. It's perfect if you want a classic calendar view of tasks.

   • Agenda: Opt for this view if you prefer a list-style layout of tasks. Each task is arranged in chronological order with its details shown.

4. Save the Configuration: After selecting your preferred default view, remember to save your configuration.

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.

5️⃣ Adjust other settings if needed

• Selected Time Span

• Toolbar

• Side Panel

Set Avonni Calendar to Full Height

To display the full calendar on your home screen without the need to scroll, tweak the height settings in the Component Builder. Activate this feature from the settings panel for a seamless view.

• Available Times

The "Available Times" section in the Avonni Calendar Component is for customizing which days and months are displayed on your calendar. By selecting specific days and months, you can tailor your calendar view to focus on the most important periods for your tasks and projects. Any days or months that aren't selected will be ignored and won't appear on your calendar.

However, if you don't specify any days or months in the "Available Times" section, the Avonni Calendar Component will default to displaying all days and months.

• Context Menu Actions

The "Context Menu Actions" section allows you to add interactive button actions at an event level. These buttons become visible and actionable when a user clicks on a particular event.

You can define the specifics of these event actions from the interaction pane, adding another layer of customization.

• Event Display

To specify a Theme and palette for events.