Updating Salesforce Object with data coming from a third-party Javascript library

The Apex Class

$ sfdx:force:org <options here>
public with sharing class BookingController {@AuraEnabled(Cacheable=true)public static Booking__c[] getAllBookings () { return [SELECT Name, Account__c, Start_Date__c, End_Date__c FROM  Booking__cORDER BY Name LIMIT 10];}@AuraEnabled
public static void updateBooking(String name, String sfid, String startDate, String endDate){
try {Booking__c booking = [SELECT Id, Name, Account__c, Start_Date__c, End_Date__c FROM Booking__cWHERE Id = :sfid LIMIT 1 FOR UPDATE];Datetime sDatestr = (Datetime)JSON.deserialize(‘“‘ + startDate + ‘“‘, Datetime.class);Datetime eDatestr = (Datetime)JSON.deserialize(‘“‘ + endDate + ‘“‘, Datetime.class);Datetime sysDate = System.now();booking.Start_Date__c = sDatestr;booking.End_Date__c = eDatestr;update booking;} catch (Exception e) {System.debug(‘An error has occurred: ‘ + e.getMessage());} finally { } return; }}

The Lightning Web Component

import { LightningElement, track, wire, api } from ‘lwc’;
import { loadScript, loadStyle } from ‘lightning/platformResourceLoader’;
import FullCalendarJS from ‘@salesforce/resourceUrl/FullCalendarJS’;
import getAllBookings from ‘@salesforce/apex/BookingController.getAllBookings’;
import updateBooking from ‘@salesforce/apex/BookingController.updateBooking’;
import { refreshApex } from ‘@salesforce/apex’;
const FIELDS = [SERVICE_NAME, BOOKING_ID];/*** FullCalendarJs* @description Full Calendar JS — Lightning Web Components*/export default class FullCalendarJs extends LightningElement {
@api recordId;
@track error;
@track sfid;
@track startDate;
@track endDate;
@track name;
@wire (getAllBookings) bookings;
@wire (updateBooking, {name: ‘$name’, sfid:’$sfid’, startDate: ‘$startDate’, endDate: ‘$endDate’}) updateBooking;
//@track bookings;fullCalendarJsInitialised = false;/*** @description Standard lifecyle method ‘renderedCallback’* Ensures that the page loads and renders the* container before doing anything else*/renderedCallback() {// Performs this operation only on first renderif (this.fullCalendarJsInitialised) { return;}this.fullCalendarJsInitialised = true;// Executes all loadScript and loadStyle promises// and only resolves them once all promises are donelet bookingPromise = Promise.resolve(this.bookings.data);Promise.all([bookingPromise,loadScript(this, FullCalendarJS + ‘/jquery.min.js’),
loadScript(this, FullCalendarJS + ‘/moment.min.js’),
loadScript(this, FullCalendarJS + ‘/fullcalendar.min.js’),
loadStyle(this, FullCalendarJS + ‘/fullcalendar.min.css’),
]).then((values) => {// Initialise the calendar configurationconsole.log({message: ‘Values’, values});this.initialiseFullCalendarJs(values[4]);}).catch(error => {// eslint-disable-next-line no-consoleconsole.error({message: ‘Error occured on FullCalendarJS’,error});})}/*** @description Initialise the calendar configuration* This is where we configure the available options for the calendar.* This is also where we load the Events data.*/initialiseFullCalendarJs(bookings) {const ele = this.template.querySelector(‘div.fullcalendarjs’);/* $(‘.cal-draggable’).draggable({revert: true,revertDuration: 0}) */const bookingData = this.bookings.data;let dataObj = {};let events = [];bookingData.forEach(element => {dataObj.title = element.Name;dataObj.sfid = element.Id;dataObj.start = element.Start_Date__c;dataObj.end = element.End_Date__c;dataObj.url = ‘/’ + element.Id;dataObj.account__c = element.Account__c;events.push(dataObj);dataObj = {};});// eslint-disable-next-line no-undef$(ele).fullCalendar({header: {left: ‘prev,next today’,center: ‘title’,right: ‘month,basicWeek,basicDay’},//defaultDate: ‘2019–01–12’,droppable: true,defaultDate: new Date(), // default day is todaynavLinks: true, // can click day/week names to navigate viewseditable: true,eventLimit: true, // allow “more” link when too many eventsevents: events,eventDrop: (event, delta, revertFunc)=>{alert(event.title + “ — “ + event.sfid + “ was dropped on “ + event.start);if (!confirm(“Are you sure about this change?”)) {revertFunc();} else {//update the booking objectthis.sfid = event.sfid;this.startDate = event.start.format();this.endDate = event.end.format();this.name = event.account__c;console.log(‘Passing: ‘, this.name + ‘; ‘ + this.sfid + ‘; ‘ + this.startDate + ‘; ‘ + this.endDate);updateBooking({name: this.name, sfid: this.sfid, startDate: this.startDate, endDate: this.endDate}).then((data)=>{console.log (‘Result affected: ‘, data);return refreshApex(this.bookings)}).catch((error)=>{console.log(‘Error received: ‘, error.errorCode + ‘ ‘ + error.body.message);});//let result = this.updateBooking.data;}}});}}



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jared Odulio

Jared Odulio


Developer of really cool apps in Vue and Bulma, Sketcher wannabe, Mercedes-Benz fanatic, SWAG Equities Trader, Certified Securities Representative