Дроп на fullcalendar не работает после добавления скрипта с событиями laravel

Question

Привет, у меня есть проблема с календарем, когда я пытаюсь перетащить, он перетаскивает событие, но затем не попадает в календарь,

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js'></script>
<script>
    $(document).ready(function() {

        $('#calendar').fullCalendar({

            // put your options and callbacks here
            events : [
                @foreach($appointments as $appointment)
                {
                    title : '{{ $appointment->firstname }}',
                    start : '{{ $appointment->start_at }}',
                   
                },
                @endforeach
            ],
   

        })

        $('#calendar').fullCalendar({
 
      editable: true,
      droppable: true, // this allows things to be dropped onto the calendar
      drop: function() {
        // is the "remove after drop" checkbox checked?
        if ($('#drop-remove').is(':checked')) {
          // if so, remove the element from the "Draggable Events" list
          $(this).remove();
        }
      }
    });
    });
</script>

  <link rel="stylesheet" href="{{ asset('app/assets/libs/fullcalendar/dist/fullcalendar.min.css') }}"/>
<link rel="stylesheet" href="{{ asset('app/assets/extra-libs/calendar/calendar.css') }}"/>
  <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-body">
                                <h4 class="card-title">Agents</h4>
                               
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                   
                                    @foreach($agents as $key=> $agent)
                                    <li class="nav-item"> <a class="nav-link @if($key == 0)active @endif" data-toggle="tab" href="#{{$agent->id}}" role="tab" style="text-align: center;">
                                        <div class="user-profile dropdown m-t-20">
                                     <div class="user-pic">
                                    <img src="{{ asset('app/assets/images/users/1.jpg') }}" alt="users" class="rounded-circle img-fluid" />
                                </div></div><span class="hidden-xs-down">{{$agent->name}}</span></a> 
                                 </li>
                                 @endforeach
                           
                              
                                </ul>

            <!-- Tab panes -->
            <div class="tab-content tabcontent-border">
               
                <div class="tab-pane active" id="{{$agent->id}}" role="tabpanel">

                    
                    <div class="p-20">
                      <div class="col-md-12">
                        <div class="card">
                            <div class="">
                                <div class="row">
                                    <div class="col-lg-3 border-right p-r-0">
                                        <div class="card-body border-bottom">
                                            <h4 class="card-title m-t-10">Drag & Drop Event</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div id="calendar-events" class="">
                                                        @foreach($appointments as $appointment)
                                                        <div class="calendar-events m-b-20 draggable" data-class="bg-info"><i class="fa fa-circle text-info m-r-10"></i>
                                                            {{$appointment->firstname }} <br>   {{$appointment->start_at}}</div>

 
                                                      
                                                            @endforeach

                                                       <!--  <div class="calendar-events m-b-20" data-class="bg-success"><i class="fa fa-circle text-success m-r-10"></i> Event Two</div>
                                                        <div class="calendar-events m-b-20" data-class="bg-danger"><i class="fa fa-circle text-danger m-r-10"></i>Event Three</div>
                                                        <div class="calendar-events m-b-20" data-class="bg-warning"><i class="fa fa-circle text-warning m-r-10"></i>Event Four</div> -->
                                                    </div>
                                                    <!-- checkbox -->
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input" id="drop-remove">
                                                        <label class="custom-control-label" for="drop-remove">Remove after drop</label>
                                                    </div>
                                                    <a href="javascript:void(0)" data-toggle="modal" data-target="#add-new-event" class="btn m-t-20 btn-info btn-block waves-effect waves-light">
                                                            <i class="ti-plus"></i> Add New Event
                                                        </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-9">
                                        <div class="card-body b-l calender-sidebar">
                                            <div id="calendar"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
             
                
            </div>
            
           <!--  <div class="tab-pane  p-20" id="profile" role="tabpanel">2</div>
            <div class="tab-pane p-20" id="messages" role="tabpanel">3</div> -->
         </div>
        </div>
        </div>
    </div>
    </div>
</div>

Встреча показывается в моем календаре. Я хочу иметь возможность перетаскивать событие и перетаскивать в календарь, перетаскивание работало, но когда я добавилСкрипт с событиями, которые показывают встречи внутри календаря, перетаскивание не работает и на консоли не показывает никаких ошибок.Кто-нибудь может мне помочь?