Optimizing Productivity: Integrate Salesforce with JavaScript Scheduler
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (215)Angular  (112)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (228)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (82)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (948)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (141)Chart of the week  (55)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (662)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (513)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (619)What's new  (334)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Optimizing Productivity Integrate Salesforce with JavaScript Scheduler

Optimizing Productivity: Integrate Salesforce with JavaScript Scheduler

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, 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 is a cloud computing software-as-a-service (SaaS) company specializing in 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

Configuring Salesforce

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

  1. Log in with a Salesforce developer account. If you don’t have a Salesforce account, Sign up 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

Creating a Salesforce project

Let’s create a Salesforce project 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

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

    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

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

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 <scratch org user name>

    Replace <scratch org username> 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.Search for Static Resources and click on New in the Static Resources tab
  1. Load the Syncfusion scripts and styles as static files in a zip format, which you can obtain from this Custom Resource Generator.
  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.Provide a name for the static resource files

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

    • 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

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

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)
  1. 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
  1. 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
  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.Create EndTime field
  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.Create an IsAllDay field and choose Checkbox as the data type for it

    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

  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.Choose Text as the data type Label the location field Label the RecurrenceRule field

    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

Creating a Lightning web component

In the Lightning 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
  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]
    <?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>
  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]

    <template>
     <div class="syncfusionscheduler" lwc:dom="manual" style='width: 100%;'></div>
    </template>
  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
    Create SchedulerData Apex class
  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<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

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

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
  1. Then, choose App Page and click Next.Choose App Page and click Next
  1. 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
  1. Now, choose the One Region option and click Finish.Choose the One Region option
  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.Drag and drop the Syncfusion JavaScript Scheduler under the Add Components Here sectionScheduler renders in content body
  1. Activate the custom Scheduler component with the name SyncfusionScheduler and click Save.Activate the custom Scheduler component with the name SyncfusionScheduler

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.Search for SyncfusionScheduler
  3. Click on the SyncfusionScheduler app, and the Scheduler will be loaded on the home page.
    Integrating Syncfusion JavaScript Scheduler into Salesforce
    Integrating Syncfusion JavaScript Scheduler into Salesforce

GitHub reference

You can check out the GitHub repository demo for the JavaScript Scheduler integration with Salesforce.

Summary

Thanks for reading! This blog provides a step-by-step guide for integrating the Syncfusion 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, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed