Optimizing Productivity: Integrate Salesforce with JavaScript Scheduler
Tags: javascript, development, scheduler, web
Published: 2024-05-20 16:04:23

---
title: Optimizing Productivity: Integrate Salesforce with JavaScript Scheduler
published: true
date: 2024-05-14 14:07:15 UTC
tags: javascript, development, scheduler, web
canonical_url: https://www.syncfusion.com/blogs/post/add-salesforce-javascript-scheduler
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n5prruh46kewhh9vi80.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 "JavaScript 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 "Wikipedia Link: Salesforce") is a cloud computing [software-as-a-service](https://en.wikipedia.org/wiki/Software_as_a_service "Wikipedia Link: Software as a service") (SaaS) company specializing in [customer relationship management](https://en.wikipedia.org/wiki/Customer_relationship_management "Wikipedia Link: 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 "Salesforce CLI")

## Configuring Salesforce

Follow these steps to configure the Salesforce to begin the integration process.

1.[Log in](https://login.salesforce.com/ "Salesforce Log in page") with a Salesforce developer account. If you don’t have a Salesforce account, [Sign up](https://developer.salesforce.com/signup "Salesforce Sign up page") 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.[![Enable the Enable Dev Hub option](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 "How Salesforce Developer Experience Changes the Way You Work") 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
```

2.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)

2.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
```

[![Create a scratch org project](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Create-scratch-org-run-command.png)](https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Create-scratch-org-run-command.png)

## 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 <stratch org user name>
```

Replace <**scratch org username**> with the username of your scratch org, which was generated during the creation process.

2.In the **Salesforce setup** menu, search for **Static Resources** and click on **New** in the **Static Resources** tab.[![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)

3.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/ "Custom Resource Generator for Syncfusion EJ2 Components")

4.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.[![Provide a name for the static resource files](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.[![Search for CSP Trusted Sites and click on New Trusted Site](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)

2.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.

3.Enable the following options to bypass the CSP issues and click **Save** to apply the changes.  
  

  - Allow site for font-src
  - Allow site for img-src
  - Allow site for style-src
[![Enable font-src, img-src, style-src options to bypass CSP issues](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)

## Creating data model for appointments

1.First, navigate to the **Object Manager** tab in Salesforce and select **Create,** followed by **Custom Object**.[![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.[![Enter a meaningful label for your 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** ).[![Click 'New' to create a new field (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)

2.Set the data type for the **StartTime** field _as_ **DateTime**. This field will store the starting time of each appointment.[![Set the Data Type for the StartTime field as DateTime](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)

3.Provide a clear label for the StartTime field and click **Next**. Once you’ve reviewed the settings, click **Save & New** to proceed.[![Provide a clear label for the StartTime field and click Next](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)

4.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.[![Create EndTime field](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)

5.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.[![Create an IsAllDay field and choose Checkbox as the data type for it](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.[![Assign an appropriate label to the checkbox field](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)

6.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.[![Choose Text as the data type](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) [![Label the location field](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) [![Label the RecurrenceRule field](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.[![Created Fields & Relationships in the SchedulerEvent object](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 "Get Started with Lightning Web Components") 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
```
[![Generate a Lightning web component named scheduler](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)

2.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]**
```xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
 <apiVersion>57.0</apiVersion>
 <isExposed>true</isExposed>
 <targets>
  <target>lightning__AppPage</target>
 </targets>
 <targetConfigs>
  <targetConfig targets="lightning__AppPage">
   <property name="height" label="Height" type="Integer" default="800" />
  </targetConfig>
 </targetConfigs>
</LightningComponentBundle>
```

3.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]**

```xml
<template>
 <div class="syncfusionscheduler" lwc:dom="manual" style='width: 100%;'></div>
</template>
```

4.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]**

```csharp
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
```
[![Create SchedulerData Apex class](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)

2.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]**

```csharp
public with sharing class SchedulerData {
    @RemoteAction
    @AuraEnabled(cacheable=true)
    public static Map<String, Object> getEvents() {
 
        // fetching the Records via SOQL
        List<SchedulerEvent __c> Events = new List<SchedulerEvent__ c>();
        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<String, Object> result = new Map<String, Object>{'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 <scratch org use name>
```

Replace <**scratch org username**> with the username of your scratch org.[![Pull 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 <scratch org use name>
```

Replace <**scratch org username**> with the username of your scratch org.[![Push 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_**.[![Select Lightning App Builder](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)

2.Then, choose **_App Page_** and click **_Next_**.[![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)

3.Provide a label name for the app page and click **_Next_**. Here, we’ll name it as **_SyncfusionScheduler_**.[![Provide a label name for the app page](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)

4.Now, choose the **_One Region_** option and click **_Finish_**.[![Choose the One Region option](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)

5.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.[![Drag and drop the Syncfusion JavaScript Scheduler under the Add Components Here section](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)[![Scheduler renders in content body](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)

6.Activate the custom Scheduler component with the name **SyncfusionScheduler** and click **Save**.[![Activate the custom Scheduler component with the name SyncfusionScheduler](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 "Lightning App Builder Documentation").[![Search for SyncfusionScheduler](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.

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Integrating-Syncfusion-JavaScript-Scheduler-into-Salesforce.png" alt="Integrating Syncfusion JavaScript Scheduler into Salesforce" style="width:100%">

  <figcaption>Integrating Syncfusion JavaScript Scheduler into Salesforce</figcaption>

</figure>

## 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 "JavaScript Scheduler integration with Salesforce GitHub demo").

## 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 "JavaScript 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 "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). 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 "Blog: Empower Your Data Insights: Integrating JavaScript 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 "Blog: Start Using the npm Query Today: Powerful Commands for Every Developer")
- [Top Linters for JavaScript and TypeScript: Simplifying Code Quality Management](https://www.syncfusion.com/blogs/post/top-linters-javascript-typescript "Blog: Top Linters for JavaScript and TypeScript: Simplifying Code Quality Management")
- [7 JavaScript Unit Test Frameworks Every Developer Should Know](https://www.syncfusion.com/blogs/post/javascript-unit-test-frameworks "Blog: 7 JavaScript Unit Test Frameworks Every Developer Should Know")