AX - Calendar

Overview

AX - Calendar is a Lightning App Builder component that displays your Salesforce records as events in an interactive calendar view on record pages, app pages, and home pages.

Use it to visualize any date-based records—like tasks, events, deadlines, appointments, or custom objects with date fields. Users can view events by month, week, day, or agenda format and click events to see details or take action.

Key features

• Data Integration: Pulls events from any Salesforce object using queries.

• View Options: Supports calendar (grid), agenda (list), or timeline layouts with day/week/month spans.

• Dynamic Bindings: Use {{Record.FieldApiName}} to pull record data for titles or filters.

• Interactivity: Filtering, search, sorting, and customizable headers.

• Customization: Hide headers, date pickers, or tailor event fields for clarity.

• Use Cases: Track activities across Accounts, Projects, or Campaigns.

Component Comparison

This is a lightweight version of the Calendar component optimized for Lightning App Builder's drag-and-drop interface. If you need more advanced options, such as custom event color coding, drag-and-drop event management, interactive event actions, advanced calendar styling, or specialized scheduling workflows, consider using the Calendar component in Dynamic Components for complete customization.

Use Cases

• Account/Contact Page: Display upcoming meetings or follow-ups tied to the record.

• Project Record Page: Visualize milestones, task deadlines, or team meetings.

• Event Management Page: Track schedules, sessions, or bookings for campaigns.

• Team Dashboard: Show shared calendars for meetings or company events.

• Sales/Service Overview: Highlight demos, follow-ups, or case check-ins.

• Training Enablement: List training sessions or onboarding timelines.

---

Configuration

Add the Calendar to a Lightning Record Page in App Builder and configure via the Properties Panel.

Public Properties

These control data, display, and behavior.

Property	Label	Type	Description	Example
sObjectApiName	Object Api Name	String	API name of the Salesforce object for events (e.g., Event, Task, Project_Task__c).	Event
filter	Filter	String	SOQL WHERE clause to filter records (e.g., OwnerId = '{{Record.Id}}').	Status = 'Scheduled'
orderBy	Order By	String	Field API name for sorting events (e.g., StartDateTime).	StartDateTime ASC
limit	Maximum Number of Records	Integer	Maximum events to display.	100
titleFieldName	Title Field Name	String	Field for event titles (e.g., Subject, Name, Title__c). Supports Auto Number, Email, Phone, Picklist, Multi-Select Picklist, Text.	Subject
fromFieldName	From Field Name	String	Field for start date/time (e.g., StartDateTime, Due_Date__c). Date or Date/Time only.	StartDateTime
toFieldName	To Field Name	String	Field for end date/time (e.g., EndDateTime). Date or Date/Time only.	EndDateTime
allDayFieldName	All Day Field Name	String	Checkbox field indicating all-day events (appears in all-day section).	IsAllDayEvent
filterableFields	Filter Fields	String	Comma-separated field API names for user filters (e.g., OwnerId, Status).	Status,OwnerId
showSearch	Show Search	Boolean	Displays search bar for title/other fields.	On
selectedDisplay	Selected Display	String	Default layout: calendar (grid), agenda (list).	calendar
hideHeader	Hide Header	Boolean	Hides toolbar (view switchers, navigation).	Off
selectedTimeSpan	Selected Time Span	String	Default view: day, week, month.	month
hideDatePicker	Hide Date Picker	Boolean	Hides date picker for navigation.	Off
headerTitle	Header Title	String	Custom title above calendar.	"Team Events"
headerIconName	Header Icon Name	String	SLDS icon for header (e.g., standard:event).	standard:event

Best Practice: Use {{Record.FieldApiName}} in filter or headerTitle (e.g., {{Record.Name}} to make the calendar context-aware on Record Pages. Test SOQL filters for accuracy.

---

Examples

Example 1: Account Meetings Calendar

Scenario: Display all meetings and events related to an account in a monthly calendar view with search and filtering capabilities.

Steps

1

Navigate to Lightning App Builder

Edit your Account record page (Setup > Lightning App Builder > find your Account page)

2

Drag the AX - Calendar component onto your page layout

3

Configure Data Source

• Set sObjectApiName to Event

• Set filter to WhatId = '{{Record.Id}}' (links to current Account)

• Set titleFieldName to Subject

• Set fromFieldName to StartDateTime

• Set toFieldName to EndDateTime

• Set allDayFieldName to IsAllDayEvent

4

Set Display and Header

• Set selectedDisplay to calendar

• Set selectedTimeSpan to month

• Set headerTitle to "Meetings for {{Record.Name}}"

• Set headerIconName to standard:event

5

Enable Features

• Set showSearch to On

• Set filterableFields to ActivityType,OwnerId

6

Save and test the calendar functionality

(verify events appear and filtering works)

Result: A monthly calendar of meetings tied to the Account, searchable and filterable by type or owner.

Example 2: Project Task Agenda

Scenario: Display project tasks in a weekly agenda format with priority and status filtering for better task management.

Steps

1

Navigate to Lightning App Builder

Edit your Project record page (Setup > Lightning App Builder > find your Project page)

2

Drag the AX - Calendar component onto your page layout

3

Configure Data Source

• Set sObjectApiName to Task

• Set filter to WhatId = '{{Record.Id}}' (links to current Project record)

• Set titleFieldName to Subject

• Set fromFieldName to ActivityDate

• Set orderBy to ActivityDate ASC

4

Set Display

• Set selectedDisplay to agenda

• Set selectedTimeSpan to week

• Set hideHeader to Off

• Set headerTitle to "Project Tasks"

5

Enable Filters

Set filterableFields to Priority,Status

6

Save and test the agenda view

Result: A list-style agenda of Tasks, sorted by date, with priority/status filters for efficient project task management.

This matches the step-by-step format and provides the complete implementation process from Lightning App Builder setup through final testing.

Result: A list-style agenda of Tasks, sorted by date, with priority/status filters.

---

Key Considerations

• Dynamic Bindings: Use {{Record.FieldApiName}} for context-aware filters or titles on Record Pages.

• Field Types: Ensure titleFieldName uses supported types; from/toFieldName must be Date or Date/Time.

• Performance: Set limit for large datasets; test filterableFields to avoid overloading.

• Event Duration: Map toFieldName for accurate spans; use allDayFieldName for all-day events.

• Search and Filters: Enable only relevant fields for efficiency; test search on titleFieldName.

• Accessibility: Use clear header titles; ensure view switches are keyboard-navigable.

---

Troubleshooting Common Issues

• No Events Shown: Verify sObjectApiName, filter syntax, and field mappings; check object permissions.

• Incorrect Event Timing: Confirm fromFieldName/toFieldName are Date or Date/Time; test allDayFieldName.

• Search/Filters Missing: Enable showSearch/filterableFields; ensure fields are mapped.

• Display Issues: Check selectedDisplay/selectedTimeSpan; toggle hideHeader if toolbar missing.

• Bindings Fail: Validate {!Record.FieldApiName} context; test in Record Page preview.

• Slow Loading: Reduce limit or simplify filters; test on sample data.

---

Summary

The Avonni Calendar component provides a visual, interactive way to manage time-based data on Salesforce Record Pages, with flexible layouts and filtering. It's ideal for scheduling and tracking across various roles.

Need More Advanced Features?

This App Builder version provides essential calendar functionality with simple configuration. For advanced capabilities like custom event styling, drag-and-drop scheduling, and specialized calendar workflows, explore the Calendar component in Dynamic Components for unlimited customization options.