Событие при отбрасывании в fullcalendar автоматически отправляется на временной интервал, в котором хранятся эти данные.

Question

Может кто-нибудь, пожалуйста, помогите мне с этим, я застрял, и мне нужна ваша помощь ..: / Итак, моя проблема заключается в следующем: у меня на левой стороне события (встречи), которые содержат такие данные, как (название и дата / время), что янужно, когда я перетаскиваю событие и помещаю его в календарь, это событие содержит информацию о данных, которую я хочу, чтобы она автоматически переходила в этот временной интервал, чтобы его перетаскивали в этот временной интервал, даже если я сбросил его в другом месте.

Так вот мой код:

<div id='external-events'>
  @foreach($appointments as $appointment)
    <div class='fc-event {{ $colors[array_rand($colors)] }}' apo_id="{{$appointment->id}}"  >  
        {{$appointment->firstname}}  <br>{{$appointment->start_at}}</div><br>    
     @endforeach
    <p>
        <input type='checkbox' id='drop-remove' checked/>
        <label for='drop-remove'>remove after drop</label>
    </p>
</div>

<div class="tab-content tabcontent-border">
        <?php $i=1; ?>
 @foreach($agents as $key=> $agent)
    <div class="tab-pane agent tabs{{$key}}" id="agent{{$agent->id}}"  agent_id="{{$agent->id}}"   role="tabpanel">

               <div class="card-body b-l calender-sidebar">

                    <div id='calendar-container'>
                        <div id='calendar{{$agent->id}}' class="calendar" agent-id="{{{$agent->id}}}"></div>
                    </div>
                </div>
        </div>
        <?php $i++; ?>
@endforeach
    </div>

И здесь у меня есть мой js:

<script src="{{ asset('app/assets/libs/fullcalendar/dist/fullcalendar.min.js') }}"></script>


<script>
  $(document).ready(function(){
      var appointments = <?php  echo json_encode($appointments_agents) ?>;
       console.log(appointments);


$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var agent_id = $(e.target).attr("agent_idja") 


  $('#external-events .fc-event').each(function() {

    $(this).data('event', {

      title: $.trim($(this).text()), 
      stick: true 
    });


    $(this).draggable({
      zIndex: 999,
      revert: true,  
      revertDuration: 0  
    });

  });
  var getEvent = []; 
  for(i=0; i<appointments.length; i++)

  if(appointments[i]['agent_id'] == agent_id){

  var firstname =  appointments[i]['firstname'];
  var start_at  = appointments[i]['start_at'];

color1 = '#000',
color2 = '#ef6e6e',
color3 = '#22c6ab',
color4 = 'yellow'

var colors = [color1,color2,color3, color4];
var colorss = colors[Math.floor(Math.random()*colors.length)];

    var insertEvents = {};
        insertEvents =
        {
            title: firstname,
            start: start_at,
            color  : colorss,
        }
    getEvent.push(insertEvents);
}

  $('#calendar' + agent_id).fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    droppable: true, 
       events: getEvent,
    drop: function(event) {
         var apo_id = $(this).attr('apo_id');
          console.log(agent_id);

            $.ajax({

                method: "POST",
                url: "{{ url('/change-agent') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    agent_id: agent_id,
                    appointment_id:apo_id
                },
                success: function () {

                  console.log("ok");

                },
                error: function () {
                    console.log("error");
                }
            });

      if ($('#drop-remove').is(':checked')) {

        $(this).remove();
      }
    }
  });
});
});
</script>

Так что здесь я использую этот js для показа событий, которые уже назначены агенту,и с ajax on drop, чтобы назначить этому агенту этой выбранной вкладки.Но, как я объяснил, событие не будет перенесено в этот конкретный слот.Не могли бы вы помочь ..?