> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-calendar.md). # 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. {% @arcade/embed url="" flowId="LAemvU2Nh0q00Uu2l9ZW" %} ### 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. {% hint style="success" %} #### 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](/dynamic-components/components/calendar.md) for complete customization. {% endhint %} ### 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 {% @arcade/embed url="" flowId="LLDnT5PDmwEoRr0MTvsZ" %} **Scenario**: Give your users a clear view of their week by adding an event calendar to their Home page. **Steps** {% stepper %} {% step %} #### **Navigate to Lightning App Builder** Edit your Account record page (Setup > Lightning App Builder > find your Home page) {% endstep %} {% step %} #### **Drag the AX - Calendar component onto your page layout** {% endstep %} {% step %} #### **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` {% endstep %} {% step %} #### **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 {% endstep %} {% step %} #### **Customize Header** * Set **Header Title** to `My Meetings` * Set **Header Icon Name** to `standard:event` {% endstep %} {% step %} #### **Save and test the calendar functionality** {% endstep %} {% endstepper %} ### Example 2: Account Meetings Calendar {% @arcade/embed url="" flowId="A0DOjWxKDLn8M5q0guol" %} **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** {% stepper %} {% step %} #### Navigate to Lightning App Builder Edit your Account record page (Setup > Lightning App Builder > find your Account page) {% endstep %} {% step %} #### Drag the **AX - Calendar** component onto your page layout {% endstep %} {% step %} #### **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` {% endstep %} {% step %} #### **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` {% endstep %} {% step %} #### **Enable Features** * Set **Show Search** to `On` * Set **Filterable Fields** to `Subject` {% endstep %} {% step %} #### **Enable Actions** * Check **Full screen** * Check **Record create** * Check **Record edit** * Check **Record delete** {% endstep %} {% step %} #### Save and test the calendar functionality (verify events appear and filtering works) {% endstep %} {% endstepper %} **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** {% stepper %} {% step %} #### Navigate to Lightning App Builder Edit your Project record page (Setup > Lightning App Builder > find your Project page) {% endstep %} {% step %} #### Drag the **AX - Calendar** component onto your page layout {% endstep %} {% step %} #### **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` {% endstep %} {% step %} #### **Set Display** * Set **selectedDisplay** to `agenda` * Set **selectedTimeSpan** to `week` * Set **hideHeader** to `Off` * Set **headerTitle** to `"Project Tasks"` {% endstep %} {% step %} #### **Enable Filters** Set **filterableFields** to `Priority,Status` {% endstep %} {% step %} #### Save and test the agenda view {% endstep %} {% endstepper %} **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. *** {% hint style="success" %} ## 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**](/dynamic-components/components/calendar.md) for unlimited customization options. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/app-builder-components/app-builder-components/ax-calendar.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.