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.

Getting Started

Use this simple tutorial to learn the basics of the Calendar component and start building your use cases.

Key features

Data Integration: Pulls events from any Salesforce object using queries.
View Options: Supports calendar (grid) or agenda (list) 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, app, or home page in App Builder and configure via the Properties Panel.

Properties

Label

Type

Default

Required

Description

Object API Name

String

—

The API name of the Salesforce object that contains the records to display as events in the calendar. This determines the data source for all displayed entries.

Filter

String

—

A string representing SOQL WHERE clause conditions to filter the records retrieved from the specified object.

Order By

String

—

The API name of the field used to sort the records fetched for the calendar. This determines the display order of overlapping or adjacent events.

Maximum Number of Records

Integer

—

The maximum number of records to fetch and display on the calendar. This prevents performance issues on pages with large datasets and allows users to control data volume.

Title Field Name

String

—

The field API name from the selected object that provides the title or label for each event displayed. This is the main descriptor shown in the calendar block.

From Field Name

String

—

The API name of the field that defines the start date and time for an event. This field anchors the event's beginning on the calendar.

To Field Name

String

—

The API name of the field representing the event's end date and time. Used to calculate the duration and time span of the calendar entry.

All Day Field Name

String

—

The API name of a checkbox or boolean field that indicates if the event is an all-day activity. When true, the event appears at the top of the calendar in an all-day section.

Selected Display

String

calendar

Specifies the default layout mode for the calendar. Accepted values include calendar for traditional grid layout or agenda for a linear list view. Defaults to calendar. Options: calendar, agenda.

Selected Time Span

String

week

Determines the default time span shown when the calendar loads. Supported values include day, week, or month. Helps users focus on the most relevant time window for their tasks. Options: day, week, month.

Day Start Time

String

00:00

Time at which the days start. The accepted format is an ISO 8601 time string, for example 09:00. Defaults to 00:00.

Day End Time

String

23:59

Time at which the days end. The accepted format is an ISO 8601 time string, for example 19:30. Defaults to 23:59.

Week Start Day

String

default

Day that the week starts on. Defaults to the user locale default. Options: default, Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday.

Hide Header

Boolean

—

If true, hides the toolbar that provides controls like view switchers, date navigation, and other calendar tools. Useful for embedding a simplified or read-only calendar view.

Hide Date Picker

Boolean

false

If true, hides the date picker control, preventing users from navigating directly to specific dates. Suitable for use cases where date navigation should be restricted.

Show Search

Boolean

false

If set to true, a search bar is displayed above the calendar, allowing users to quickly find specific events by keyword or phrase from the title field or other searchable fields.

Filterable Fields

String

—

A comma-separated list of field API names that users can filter by within the UI. Enables dynamic filtering of the calendar view based on values like OwnerId, Status, or Type__c.

Action - Full Screen

Boolean

false

If true, displays a button that allows users to expand the data table to full screen, improving visibility for large datasets or detailed analysis.

Action - Enable Record Create

Boolean

false

If true, displays a button that allows users to create a new record in the calendar.

Action - Enable Record Edit

Boolean

false

If true, add an action that allows users to edit a record in the calendar.

Action - Enable Record Delete

Boolean

false

If true, add an action that allows users to delete a record in the calendar.

Action - Enable Record Duplicate

Boolean

false

If true, add an action that allows users to duplicate a record in the calendar.

Header - Title

String

—

Custom text that appears as the main header above the calendar. Allows personalization of the calendar context, such as “Team Events” or “Campaign Schedule.”

Header - Icon Name

String

—

The name of the SLDS (Salesforce Lightning Design System) icon to show alongside the calendar header. For example, standard:event adds a visual identifier to enhance context.

Use Case Examples

Example 1: Add a weekly calendar to your Home Page

Scenario: Give your users a clear view of their week by adding an event calendar to their Home page.

Steps

Navigate to Lightning App Builder

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

Drag the AX - Calendar component onto your page layout

Configure Data Source

Set Object Api Name to Event
Set Filter to OwnerId = {{User.Id}}
Set Title field name to Subject
Set From field name to StartDateTime
Set To field name to EndDateTime
Set All day field name to IsAllDayEvent

Set Display

Set Selected Display to calendar
Set Selected Time Span to week
Pick the Day Start Time and End Time to match your business hours

Customize Header

Set Header Title to My Meetings
Set Header Icon Name to standard:event

Save and test the calendar functionality

Example 2: Account Meetings Calendar

Scenario: Display all meetings and events related to an account in a monthly calendar view with search and filtering capabilities. Empower your users further with record actions.

Steps

Navigate to Lightning App Builder

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

Drag the AX - Calendar component onto your page layout

Configure Data Source

Set Object Api Name to Event
Set Filter to WhatId = '{{Record.Id}}' (links to current Account)
Set Title field name to Subject
Set From field name to StartDateTime
Set To field name to EndDateTime
Set All day field name to IsAllDayEvent

Set Display and Header

Set Selected Display to calendar
Set Selected Time Span to month
Set Header Title to "Meetings for {{Record.Name}}"
Set Header Icon Name to standard:event

Enable Features

Set Show Search to On
Set Filterable Fields to Subject

Enable Actions

Check Full screen
Check Record create
Check Record edit
Check Record delete

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 from which users cam act on data.

Example 3: Project Task Agenda

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

Steps

Navigate to Lightning App Builder

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

Drag the AX - Calendar component onto your page layout

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

Set Display

Set selectedDisplay to agenda
Set selectedTimeSpan to week
Set hideHeader to Off
Set headerTitle to "Project Tasks"

Enable Filters

Set filterableFields to Priority,Status

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.

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.

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.

Last updated 12 hours ago

Was this helpful?