--- title: "Optimizing Productivity: Integrate Salesforce with JavaScript Scheduler" published_at: "2024-05-14T14:07:15+00:00" modified_at: "2025-11-06T07:33:23+00:00" url: "https://www.syncfusion.com/blogs/post/add-salesforce-javascript-scheduler" excerpt: "This blog explains the steps to integrate the Syncfusion JavaScript Scheduler component into Salesforce for enhanced productivity." taxonomy_category: - "Development" - "JavaScript" - "Scheduler" - "Syncfusion" - "UI" - "Web" taxonomy_post_tag: - "development" - "JavaScript" - "Salesforce" - "Scheduler" - "Web" --- # Optimizing Productivity: Integrate Salesforce with JavaScript Scheduler [Mugilraj Govindarajan](https://www.syncfusion.com/blogs/author/mugilraj-govindarajan) ![Optimizing Productivity Integrate Salesforce with JavaScript Scheduler](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Optimizing-Productivity-Integrate-Salesforce-with-JavaScript-Scheduler-1.png) **TL;DR:** Learn the steps to integrate the JavaScript Scheduler into Salesforce. This includes creating and configuring a Salesforce project, authorizing it, adding static resources, creating a Lightning web component, and displaying the Scheduler on a Lightning page. Master your appointments effortlessly, unlocking enhanced productivity through this integration. Syncfusion [JavaScript Scheduler](https://www.syncfusion.com/javascript-ui-controls/js-scheduler) , or event calendar, is a fully featured event calendar component that helps users manage their time efficiently. It facilitates easy resource scheduling and rescheduling events or appointments through editor pop-ups, drag and drop, and resizing actions. [Salesforce](https://en.wikipedia.org/wiki/Salesforce) is a cloud computing [software-as-a-service](https://en.wikipedia.org/wiki/Software_as_a_service) (SaaS) company specializing in [customer relationship management](https://en.wikipedia.org/wiki/Customer_relationship_management) (CRM). It allows business users to use cloud technology to connect with their customers and partners better. Let’s see how to integrate the JavaScript Scheduler into Salesforce for better productivity and streamline your scheduling processes. ## Prerequisites - [Salesforce CLI](https://developer.salesforce.com/tools/sfdxcli) ## Configuring Salesforce Follow these steps to configure the Salesforce to begin the integration process. 1. [Log in](https://login.salesforce.com/) with a Salesforce developer account. If you don’t have a Salesforce account, [Sign up](https://developer.salesforce.com/signup) for one to access the necessary tools and resources for integration. 2. After a successful login, search for the **Dev Hub** option in the search box and select it. In the ** Dev Hub setup** tab, ensure that the ** Enable Dev Hub** option is enabled. If it’s not enabled, enable it to proceed further.Refer to the following image.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Enable-the-Enable-Dev-Hub-option-1.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Enable-the-Enable-Dev-Hub-option-1.png) ## Creating a Salesforce project Let’s create a [Salesforce project](https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_intro.htm) by following these steps: 1. In your preferred location, create a base directory for your Salesforce project. For example, you can create a directory named **salesforceApp** using the following command.``` mkdir salesforceApp ``` 1. Navigate to the base directory you created in the previous step and generate a Salesforce DX project using the following CLI command.``` sfdx project:generate -n scheduler-salesforce-app ``` Refer to the following image.![Creating a Salesforce project](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Creating-a-Salesforce-project.png) ## Authorizing salesforce project Now, we need to authorize our Salesforce project by following these steps. 1. Run the following command in the browser to authorize your Salesforce project with your account.``` sfdx org:login:web -d ``` ![Authorize your Salesforce project with your account](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/authorize-your-Salesforce-project-with-your-account.png) 1. Open the ***sfdx-project.json*** file located in the ** salesforceApp/scheduler-salesforce-app** and update the *** sfdcLoginUrl*** with the domain URL of your Salesforce account.![Update the sfdcLoginUrl in sfdx-project.json file](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Update-sfdcLoginUrl-in-sfdx-project.json.png)You can obtain the domain URL from the ** My Domain** setup tab in Salesforce, as shown in the following image. ![Get domain URL in Salesforce settings](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Get-domain-URL-salesforce-settings-2.png) ## Create scratch org Now, we need to create a scratch org project by running the following command. This will provide a new Salesforce environment for development and testing with the org id and username. ``` sfdx org:create:scratch -f config/project-scratch-def.json ``` ## Adding static resources Then, integrate the Syncfusion scripts and styles as static resource files within Salesforce. 1. Use the following command to open the scratch project in the browser.``` sfdx org:open -o ``` Replace **** with the username of your scratch org, which was generated during the creation process. 1. In the **Salesforce setup** menu, search for ** Static Resources** and click on ** New** in the ** Static Resources**tab.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Add-new-Static-Resource-in-Salesforce.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Add-new-Static-Resource-in-Salesforce.png) 1. Load the Syncfusion scripts and styles as static files in a zip format, which you can obtain from this [Custom Resource Generator.](https://crg.syncfusion.com/) 1. In the **Static Resources** tab, provide a name for the static resource files, upload the zip file, and change the cache control to ** Public.** Click ** Save** to add the static resources to your Salesforce project.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Upload-zip-set-cache-save-static-resources.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Upload-zip-set-cache-save-static-resources.png) ## Adding CSP-trusted sites Follow these steps to ensure seamless integration of Salesforce with JavaScript Scheduler and prevent content security policy issues. 1. In the **Salesforce setup** menu, search for **CSP Trusted Sites** and click on ** New Trusted Site**. Refer to the following image.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Add-CSP-Trusted-Site-in-Salesforce-Setup-menu.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Add-CSP-Trusted-Site-in-Salesforce-Setup-menu.png) 1. Enter the trusted site name and URL. For example, if the Syncfusion static styles refer to **https://fonts.googleapis.com**, enter that URL as the trusted site URL. 1. Enable the following options to bypass the CSP issues and click **Save** to apply the changes. [https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Bypass-CSP-issues-Enable-font-src-img-src-style-src.-Save-changes.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Bypass-CSP-issues-Enable-font-src-img-src-style-src.-Save-changes.png) - Allow site for font-src - Allow site for img-src - Allow site for style-src ## Creating data model for appointments 1. First, navigate to the **Object Manager** tab in Salesforce and select ** Create,** followed by ** Custom Object**.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Create-Custom-Object-in-Salesforces-Object-Manager.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Create-Custom-Object-in-Salesforces-Object-Manager.png) 2. In the **custom object** section, enter a meaningful label for your custom object. For this example, let’s name it *** SchedulerEvent***. Once you’ve done this, click ** Save** to create the custom object.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Label-custom-object-as-SchedulerEvent.-Click-Save.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Label-custom-object-as-SchedulerEvent.-Click-Save.png) ### Defining fields and relationships Let’s configure the fields and relationships for the ***SchedulerEvent*** object. 1. To do so, click **New** to create a new field (Say ** StartTime**).[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Click-New-to-create-a-new-field-StartTime.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Click-New-to-create-a-new-field-StartTime.png) 1. Set the data type for the **StartTime** field*as*** DateTime**. This field will store the starting time of each appointment.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/StartTime-DateTime-for-appointment-beginnings.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/StartTime-DateTime-for-appointment-beginnings.png) 1. Provide a clear label for the StartTime field and click **Next**. Once you’ve reviewed the settings, click ** Save & New** to proceed.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Label-StartTime-then-Save-New.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Label-StartTime-then-Save-New.png) 1. Repeat the same steps as above to create the **EndTime** field, which will store the ending time of each appointment. Once you’ve reviewed the settings, click *** Save & New*** to proceed.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Create-EndTime-field-for-appointment-end-times.-Click-Save-New.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Create-EndTime-field-for-appointment-end-times.-Click-Save-New.png) 1. Create an **IsAllDay** field and choose *** Checkbox*** as the data type for it. This field will be marked when an appointment is scheduled for the entire day.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/IsAllDay-checkbox-Marks-appointments-for-full-day-scheduling.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/IsAllDay-checkbox-Marks-appointments-for-full-day-scheduling.png) Assign an appropriate label, such as ** IsAllDay,** to the checkbox field. Click ** Next** to review the settings, then click ** Save & New** to proceed.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Label-checkbox-IsAllDay.-Click-Next-then-Save-New.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Label-checkbox-IsAllDay.-Click-Next-then-Save-New.png) 1. Choose **Text** as the data type for the ** Location/Recurrence Rule/Recurrence Id /Recurrence Exception** field to store each appointment’s location and recurrence details. Click ** Next** to review the settings, and then click ** Save**to proceed.Refer to the following images.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Store-location-recurrence-details-using-Text-data-type.-Save-settings.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Store-location-recurrence-details-using-Text-data-type.-Save-settings.png) [https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Text-data-type-for-location-recurrence.-Review-save-settings..png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Text-data-type-for-location-recurrence.-Review-save-settings..png) [https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Store-details-efficiently.-Proceed.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Store-details-efficiently.-Proceed.png) Following the steps outlined above, you can add more fields to the ** SchedulerEvent** object based on your specific requirements.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Enhance-SchedulerEvent-fields-as-needed.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Enhance-SchedulerEvent-fields-as-needed.png) ## Creating a Lightning web component In the [Lightning](https://developer.salesforce.com/docs/platform/lwc/guide/get-started-introduction.html) version of Salesforce, we can create custom components and use them in the Lightning App Builder tool. This tool contains everything you need for a custom app, such as custom and standard objects and custom tabs. **Note:** The Lightning Apps Builder tool isn’t available in Salesforce Classic. Let’s create a Lightning web component to integrate the JavaScript Scheduler into your Salesforce project. 1. In your Salesforce project, run the following command to generate a Lightning web component named ***scheduler***.``` sfdx lightning:generate:component --type lwc -n scheduler -d force-app/main/default/lwc ``` [https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Generate-scheduler-Lightning-web-component-in-Salesforce-project.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Generate-scheduler-Lightning-web-component-in-Salesforce-project.png) 1. Open the **scheduler.js-meta.xml** file located at **force-app/main/default/lwc/scheduler** and modify the component definition to expose it in the Lightning App Builder. Here’s an example of the modified file. **[force-app/main/default/lwc/scheduler/scheduler.js-meta.xml]**``` 57.0 true lightning__AppPage ``` 1. Now, open the **scheduler.html** file located at ** force-app/main/default/lwc/scheduler** and add an element with a class name to append the Syncfusion JavaScript Scheduler. Here’s an example of the modified file.**[force-app/main/default/lwc/scheduler/scheduler.html]** ``` ``` 1. Now, open the **scheduler.js** file located at ** force-app/main/default/lwc/scheduler** and implement the Scheduler code in the ** renderedCallback**function. The static scripts and styles are loaded using the ** loadScript** and ** loadStyle** imports. Here’s an example of the modified file.**[force-app/main/default/lwc/scheduler/scheduler.js]** ``` import { LightningElement, api } from 'lwc'; import { ShowToastEvent } from "lightning/platformShowToastEvent"; import { loadStyle, loadScript } from "lightning/platformResourceLoader"; import { createRecord, updateRecord, deleteRecord } from "lightning/uiRecordApi"; // Static resources import schedulerFiles from "@salesforce/resourceUrl/syncfusionscheduler"; // Controllers import getEvents from "@salesforce/apex/SchedulerData.getEvents"; function getEventsData(eventData) { const data = eventData.events.map((a) => ({ Id: a.Id, Subject: a.Name, Location: a.Location__c, StartTime: a.Start_Time__c, EndTime: a.End_Time__c, IsAllDay: a.IsAllDay__c, RecurrenceRule: a.RecurrenceRule__c, RecurrenceID: a.Recurrence_Id__c, RecurrenceException: a.RecurrenceException__c })); return data; } export default class Scheduler extends LightningElement { static delegatesFocus = true; @api height; schedulerInitialized = false; renderedCallback() { if (this.schedulerInitialized) { return; } this.schedulerInitialized = true; Promise.all([ loadScript(this, schedulerFiles + "/syncscheduler.js"), loadStyle(this, schedulerFiles + "/syncscheduler.css") ]) .then(() => { this.initializeUI(); }) .catch((error) => { this.dispatchEvent( new ShowToastEvent({ title: "Error loading scheduler", message: error.message, variant: "error" }) ); }); } initializeUI() { const root = this.template.querySelector(".syncfusionscheduler"); root.style.height = this.height + "px"; const scheduleOptions = { height: this.height + "px", selectedDate: new Date(), actionComplete: function (args) { //To perform CRUD in the Salesforce backend if (args.addedRecords && args.addedRecords.length > 0) { var data = args.addedRecords[0]; var insert = { apiName: "SchedulerEvent__c", fields: { Name: data.Subject, Location__c: data.Location, Start_Time__c: data.StartTime, End_Time__c: data.EndTime, IsAllDay__c: data.IsAllDay, RecurrenceRule__c: data.RecurrenceRule, Recurrence_Id__c: data.RecurrenceID, RecurrenceException__c: data.RecurrenceException } }; createRecord(insert).then((res) => { if (scheduleObj) { scheduleObj.eventSettings.dataSource[scheduleObj.eventSettings.dataSource.length - 1].Id = res.id; scheduleObj.refreshEvents(); } return { tid: res.id, ...res }; }); } if (args.changedRecords && args.changedRecords.length > 0) { var data = args.changedRecords[0]; var update = { fields: { Id: data.Id, Name: data.Subject, Location__c: data.Location, Start_Time__c: data.StartTime, End_Time__c: data.EndTime, IsAllDay__c: data.IsAllDay, RecurrenceRule__c: data.RecurrenceRule, RecurrenceException__c: data.RecurrenceException, Recurrence_Id__c: data.RecurrenceID } }; updateRecord(update).then(() => ({})); } if (args.deletedRecords && args.deletedRecords.length > 0) { args.deletedRecords.forEach(event => { deleteRecord(event.Id).then(() => ({})); }); } } }; const scheduleObj = new ej.schedule.Schedule(scheduleOptions, root); getEvents().then((data) => { const eventData = getEventsData(data); scheduleObj.eventSettings.dataSource = eventData; scheduleObj.dataBind(); }); } } ``` ## Creating Apex class An Apex class facilitates smooth interactions between your Lightning component and the data model. Follow these steps to fetch and manipulate data from the **SchedulerEvent** custom object effortlessly. 1. Use the following command to create an Apex class with the name ***SchedulerData****.*``` sfdx apex:generate:class -n SchedulerData -d force-app/main/default/classes ``` [https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Create-SchedulerData-Apex-class.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Create-SchedulerData-Apex-class.png) 1. Open the **SchedulerData.cls** file located at **force-app/main/default/classes/SchedulerData.cls**. This will fetch the event data from the salesforce backend. Here’s an example of the modified file.**[force-app/main/default/classes/SchedulerData.cls]** ``` public with sharing class SchedulerData { @RemoteAction @AuraEnabled(cacheable=true) public static Map getEvents() { // fetching the Records via SOQL List Events = new List(); Events = [SELECT Id, Name, Start_Time__c, End_Time__c, IsAllDay__c, Location__c, RecurrenceRule__c, Recurrence_Id__c, RecurrenceException__c FROM SchedulerEvent__c]; Map result = new Map{'events' => Events }; return result; } } ``` ## Pull scratch org To retrieve the changes made in the scratch org and sync them with your local Salesforce project, use the following command. ``` sfdx project:retrieve:start -o ``` Replace **** with the username of your scratch org.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Sync-changes-from-scratch-org-sfdx-projectretrievestart-o-org-name.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Sync-changes-from-scratch-org-sfdx-projectretrievestart-o-org-name.png) ## Push scratch org To push the changes made in your local Salesforce project to the scratch org, use the following command. ``` sfdx project:deploy:start -o ``` Replace **** with the username of your scratch org.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Update-local-changes-to-Salesforce-scratch-org.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Update-local-changes-to-Salesforce-scratch-org.png) ## Creating Lightning page To display the JavaScript Scheduler on a Lightning page, follow these steps. 1. In your scratch org, search for **Lightning App Builder** in the quick find setup, select ** Lightning App Builder**, and click *** New***.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Create-new-Lightning-App-Builder-in-your-scratch-org..png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Create-new-Lightning-App-Builder-in-your-scratch-org..png) 1. Then, choose ***App Page*** and click *** Next***.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Select-App-Page-then-click-Next.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Select-App-Page-then-click-Next.png) 1. Provide a label name for the app page and click ***Next***. Here, we’ll name it as *** SyncfusionScheduler***.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Name-the-app-page-SyncfusionScheduler-and-proceed.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Name-the-app-page-SyncfusionScheduler-and-proceed.png) 1. Now**,** choose the ***One Region*** option and click *** Finish***.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Select-One-Region-then-click-Finish.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Select-One-Region-then-click-Finish.png) 1. Then**,** drag and drop the Syncfusion JavaScript Scheduler component under the **Add Components Here** section in the Lightning App Builder. Now, the Scheduler will be rendered inside the content body. Refer to the following images.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Drag-drop-Scheduler-in-Lightning-App-Builder.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Drag-drop-Scheduler-in-Lightning-App-Builder.png) [https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Scheduler-renders-in-content-body.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Scheduler-renders-in-content-body.png) 1. Activate the custom Scheduler component with the name **SyncfusionScheduler** and click ** Save**.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Activate-SyncfusionScheduler-Save.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Activate-SyncfusionScheduler-Save.png) ## Launching the JavaScript Scheduler on the home page To access the integrated JavaScript Scheduler on the Salesforce home page, follow these steps. 1. Click on the app launcher icon in Salesforce. 2. Search for **SyncfusionScheduler**, which was registered earlier in the [Lightning App Builder](https://help.salesforce.com/s/articleView?id=sf.lightning_app_builder_overview.htm&type=5) .[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Find-SyncfusionScheduler-in-Lightning-App-Builder.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Find-SyncfusionScheduler-in-Lightning-App-Builder.png) 3. Click on the **SyncfusionScheduler** app, and the Scheduler will be loaded on the home page.[https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Integrating-Syncfusion-JavaScript-Scheduler-into-Salesforce.png](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Integrating-Syncfusion-JavaScript-Scheduler-into-Salesforce.png) Integrating Syncfusion JavaScript Scheduler into Salesforce ## GitHub reference You can check out the GitHub repository demo for the [JavaScript Scheduler integration with Salesforce](https://github.com/SyncfusionExamples/salesforce-integration-in-ej2-javascript-scheduler) . ## Summary Thanks for reading! This blog provides a step-by-step guide for integrating the Syncfusion [JavaScript Scheduler](https://www.syncfusion.com/javascript-ui-controls/js-scheduler) to manage your events and appointments within Salesforce efficiently. Try out the steps discussed in this blog post and enjoy hassle-free appointments and project management! As always, you can contact us through our [support forums](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com/) , or [feedback portal](https://www.syncfusion.com/feedback) . We are always happy to assist you! ## Related blogs - [Empower Your Data Insights: Integrating JavaScript Gantt Chart into Power BI](https://www.syncfusion.com/blogs/post/add-gantt-chart-into-power-bi) - [Start Using the npm Query Today: Powerful Commands for Every Developer](https://www.syncfusion.com/blogs/post/npm-query-commands-for-developers) - [Top Linters for JavaScript and TypeScript: Simplifying Code Quality Management](https://www.syncfusion.com/blogs/post/top-linters-javascript-typescript) - [7 JavaScript Unit Test Frameworks Every Developer Should Know](https://www.syncfusion.com/blogs/post/javascript-unit-test-frameworks)