I'm working on a project that has me edit the appointments in the scheduler of SyncFusion MVC. Currently I edit the width and position of all the appointmets through JavaScript with the .EventRendered("onEventRendered") method in the .cshtml file.

I've ran into a problem when I edit the width and position of multiple appointments that happen at the same time. My JavaScript code executes as it should but somewhere (in another .js file I presume) it gets overwritten and changes the values back to the default values. Example of what I would like and what it currently is

I am editing the default scheduler that auto generates and here is how I render the actual scheduler:

@{
    ViewBag.Title = "ScheduleFeatures";
}
@using Syncfusion.EJ2.Schedule
<h2>ScheduleFeatures</h2>
<li> Schedule Samples - Default</li>
<li> Theme - Fabric</li>
<br/>
<div id="ControlRegion">
@(Html.EJS().Schedule("schedule")
    .Width("100%")
    .Height("550px")
    .EventRendered("onEventRendered")
    .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
    .SelectedDate(new DateTime(2018, 2, 15))
    .Render())
</div>

Here is my JavaScript code how I change the width and positioning of the appointments:

 let appointmentData = [];
function onEventRendered(args) {
    try {
        args.element.children[1].innerHTML += "<i class=\"" + args.data.IconTag + "\" style=\"float: right\"></i>";
        console.log(args.element.children[1]);
        var scheduleObj = document.querySelector('.e-schedule').ej2_instances[0];
        if (!args.element) {
            return;
        }

        const uniqueElement = appointmentData.find((appointment) => args.data.Id == appointment.Id);
        if (uniqueElement == null) {
            appointmentData.push(args.data)
        }

        args.element.style.width = (args.data.NumberOfRows * 100) / 10 + "%";//"50%"
        const searchObject = appointmentData.filter((appointment) => appointment.StartTime <= args.data.StartTime && appointment.EndTime > args.data.StartTime);

        if (searchObject.length > 0) {
            var left = 0
            searchObject.every(apointment => {
                if (apointment.Id == args.data.Id) {
                    return false;
                }
                else {
                    left += ((apointment.NumberOfRows * 100) / 10);
                }
                return true;
            })
            args.element.style.left = left + "%";
        }
    } catch (error) {
        console.error(error);
    }
}