JSFiddle - React, Tailwind, and code Playground

JavaScript

var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'id', type: 'string' },
                    { name: 'description', type: 'string' },
                    { name: 'subject', type: 'string' },
                    { name: 'client', type: 'string' },
                    { name: 'activity', type: 'string' },
                    { name: 'timeZone', type: 'string' },
                    { name: 'from', type: 'date' },
                    { name: 'to', type: 'date' }
                ],
                id: 'id',
                url: '${pageContext.request.contextPath}/dpc?c=loadall'
            };
            var adapter_cals = new $.jqx.dataAdapter(source);
           
            $("#scheduler").jqxScheduler({
                //date: new $.jqx.date('todayDate'),
                width: 1224,
                height: 1000,
                source: adapter_cals,
                renderAppointment: function(data)
                {
                    // data Object properties
                    // appointment - Object with the properties from the Scheduler.s source object.
                    // width - int
                    // height- int
                    // textColor - hex
                    // background - hex
                    // borderColor - hex
                    // style - string
                    // cssClass - string
                    // html - html string
                    // view - string
                    var img = "<img style='top: 2px; position: relative;' src='./img/person.png'/>";
                    data.html =  img + "<i>" + data.appointment.subject + "</i>";
                    return data;
                },
                theme: "darkblue",
                showLegend: true,
                editDialogCreate: function (dialog, fields, editAppointment) {
                	console.log(fields);
                    // hide repeat option
                   ...