# 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 flowId="LAemvU2Nh0q00Uu2l9ZW" url="" %} ### **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. {% 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](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/calendar) 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 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. *** ## Use Case Examples ### Example 1: Add a weekly calendar to your Home Page {% @arcade/embed flowId="LLDnT5PDmwEoRr0MTvsZ" url="" %} **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 flowId="A0DOjWxKDLn8M5q0guol" url="" %} **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. *** ## 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. {% 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**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/components/calendar) for unlimited customization options. {% endhint %}