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来分配给所选标签的那个代理。但是正如我所解释的，事件不会被拉到那个特定的位置。你能帮忙吗？。

Fullcalendar下降的事件自动发送到保存该特定数据的日期槽

0 个答案: