Цвета событий FullCalendar

Question

У меня есть календарь, и кроме этого у меня есть поле, в которое я помещаю значения событий (клиента, парикмахера, услуги и я выбираю цвет). После загрузки значений создается элемент, который я могу выбрать и перетащить в календарь. Со мной происходит следующее:

Когда я создаю событие и перетаскиваю его в календарь, оно помещается в цвет, который я настроил. Если я нажму кнопку «Сохранить», она будет правильно загружена в базу данных. json сохраняется с информацией о событии, например:

{"id":2,"title":"Maria Marco","barbero":"Diego","servicio":"Corte","start":"2020-03-21T10:30:00","end":"2020-03-21T11:00:00","color":"rgb(0, 86, 179)"}

Предположим, у меня нет элементов в базе данных, я создаю 3 события и перетаскиваю их в календарь. Если я нажму кнопку «Сохранить», эти 3 будут сохранены правильно, как указано выше.

Теперь, если я выполню загрузку нового события, эти новые элементы будут загружены правильно, но в предыдущих элементах свойство color теперь исчезает.

Буду признателен, если кто-нибудь обнаружит ошибку в этих спагетти js

$(function() {         
        var containerEl = document.getElementById('external-events');
        var calendarEl = document.getElementById('calendar');

        // initialize the external events
        // -----------------------------------------------------------------

        new FullCalendarInteraction.Draggable(containerEl, {
            itemSelector: '.external-event',
            eventData: function(eventEl) {

                var barbero = $("#barbero").children(".opcion-barbero:selected").html()
                var servicio = $("#servicio").val()
                return {
                    title: eventEl.innerText,
                    extendedProps: { "barbero": barbero, "servicio": servicio, "color": eventEl.style.backgroundColor },
                    backgroundColor: eventEl.style.backgroundColor,
                    borderColor: eventEl.style.backgroundColor
                };
            }
        });

        view = 'timeGridDay';
        header = {
            left: 'prev,next timeGridDay,timeGridWeek,dayGridMonth',
            center: '',
            right: ''
        };

        var calendar = new FullCalendar.Calendar(calendarEl, {
            timeZone: 'local',
            plugins: ['interaction', 'dayGrid', 'timeGrid'],
            eventSources: [
                // your event source
                {
                    url: 'ajax/turnos2.ajax.php'
                }
            ],

            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar !!!
            drop: function(info) {

                info.draggedEl.parentNode.removeChild(info.draggedEl);

            }
        });

        calendar.render();
        /* ADDING EVENTS */
        var currColor = '#3c8dbc' //Red by default
            //Color chooser button
        var colorChooser = $('#color-chooser-btn')
        $('#color-chooser > li > a').click(function(e) {
            e.preventDefault()
                //Save color
            currColor = $(this).css('color')
                //Add color effect to button
            $('#add-new-event').css({
                'background-color': currColor,
                'border-color': currColor
            })
        })

        $('#add-new-event').click(function(e) {
            e.preventDefault()
                //Get value and make sure it is not null
            var val = $('#new-event').val()
            if (val.length == 0) {
                return
            }


            //Create events
            var event = $('<div />')
            event.css({
                'font-weight': 300,
                'background-color': currColor,
                'border-color': currColor,
                'color': '#fff'
            }).addClass('external-event')
            event.html(val)


            $('#external-events').prepend(event)

            //Add draggable funtionality
            ini_events(event)

            //Remove event from text input
            $('#new-event').val('')
        })


        /*==============================================
        Apply changes to the events
        ==============================================*/

        $(document).on("click", "span.guardarCalendario", function() {

            var arrayEventos = new Array();
            var eventos = calendar.getEvents();

            // Contador para ID
            var num = 1;
            eventos.forEach(e => {

                // Nombre del turno
                title = (e._def["title"]);
                barbero2 = (e._def.extendedProps["barbero"]);
                servicio = (e._def.extendedProps["servicio"]);
                color = (e._def.extendedProps["color"]);
                id = num;
                num = num + 1;

                var evento = new Object();
                evento["id"] = id;
                evento["title"] = title;
                evento["barbero"] = barbero2;
                evento["servicio"] = servicio;
                evento["start"] = start;
                evento["end"] = end;
                evento["color"] = (e._def.extendedProps["color"]);

                arrayEventos.push(evento);

            })

            $("#turnos").val(JSON.stringify(arrayEventos))

            var data = { 'data': JSON.stringify(arrayEventos) }

            $.ajax({
                type: 'POST',
                url: 'ajax/turnos.ajax.php',
                dataType: 'json',
                data: data,
                success: function(data, status, xhr) {
                    alert("response was " + data);
                },
                error: function(xhr, status, errorMessage) {
                    $("#debug").append("RESPONSE: " + xhr.responseText + ", error: " + errorMessage);
                }
            });
        })

оборотов. ajax. php

<?php

require_once "../modelos/turnos.modelo.php";
require_once "../controladores/turnos.controlador.php";

class AjaxTurnos{

    public $data;
    public function ajaxActualizarTurnos(){
        $datos = ($this->data);
        foreach(json_decode($datos) as $value){
              $respuesta = ModeloTurnos::mdlActualizarTurnos(json_encode($value).PHP_EOL);
        }
        return $respuesta;
    }

}

    /*==============================
    ACTUALIZAR TURNOS
    ==============================*/
    if(isset($_POST["data"])){

        ModeloTurnos::mdlTruncarTurnos();
        $turnos = new AjaxTurnos();
        $turnos -> data = $_POST["data"];
        $turnos -> ajaxActualizarTurnos();
    }

turnos2. ajax. php

<?php

require_once "../modelos/turnos.modelo.php";
require_once "../controladores/turnos.controlador.php";



    $data = ControladorTurnos::ctrMostrarTurnos();
    $data2 = [];
    foreach($data as $key=>$value){
        $data2[] = json_decode($value["datos"]);
    }
    //returns data as JSON format
    echo (json_encode($data2));