Question

我正在使用fullcalendar并尝试将事件从一个插槽拖到另一个插槽，以及尝试修改事件的结束时间，似乎没有任何工作。 jQueryUI已加载，fullcalendar已正确加载，否则我将无法获得完整日历视图，并且数据会显示在日历中。

注意：这是火花laravel。

视图：

@extends('spark::layouts.app')

@section('content')
...

<div class="container-fluid>
    <div id="calendar"></div> 
</div>
...

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<script>
    $(document).ready(function() {

        $('a.fc-draggable').draggable();

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '2016-07-12',
            defaultView: 'agendaWeek',
            editable: true,
            events: <?php echo json_encode($data); ?>,
            editable: true,
            droppable: true,
            selectable: true,
            selectHelper: true,
            disableDragging: false,
            disableResizing: false,
            eventDragStart: function( event, jsEvent, ui, view ) { 
                // console.log('event:', event);
                // console.log('js-event:', jsEvent);
                // console.log('ui:', ui);
                // console.log('view:', view);
            },
            eventDragStop: function( event, jsEvent, ui, view ) { 
                // console.log('event:', event);
                // console.log('js-event:', jsEvent);
                // console.log('ui:', ui);
                // console.log('view:', view);
            },
            eventReceive: function(event) {
               alert('eventReceive fired.'); 
            },
            drop: function(date) {
                console.log('drop fired.');
            },
            allDaySlot: false,
            slotDuration: '00:30:00',
            slotLabelInterval: '00:30:00',
            displayEventEnd: true,
            minTime: '00:05:00',
            maxTime: '24:00:00'
        });

    });

</script>

控制器功能：

public function week()
{
    $filters_boolean = 'ON';
    $data = array (
        array(
            'name' => 'Joe Swanson',
            'start' => '2016-07-10T08:30:00',
            'end' => '2016-07-10T11:30:00',
            'account_name' => 'Joe Swanson',
            'phone' => '(604) 555-1234',
            'email' => 'admin@a.com',
            'workers' => 2,
            'created_on' => '2016-07-02T07:00:00',
            'last_activity_on' => '2016-07-02T07:00:00'
        ),
        array (
            'name' => 'Peter Griffin',
            'start' => '2016-07-11T08:30:00',
            'end' => '2016-07-11T11:30:00',
            'account_name' => 'Joe Swanson',
            'phone' => '(604) 555-1235',
            'email' => 'admin@b.com',
            'workers' => 2,
            'created_on' => '2016-07-02T08:00:00',
            'last_activity_on' => '2016-07-02T08:00:00'
        ),
        array (
            'name' => 'Peter Griffin',
            'start' => '2016-07-12T09:30:00',
            'end' => '2016-07-12T14:30:00',
            'account_name' => 'Joe Swanson',
            'phone' => '(604) 555-1235',
            'email' => 'admin@b.com',
            'workers' => 2,
            'created_on' => '2016-07-02T08:00:00',
            'last_activity_on' => '2016-07-02T08:00:00'
        ),
        array (
            'name' => 'Glen Quagmire',
            'start' => '2016-07-10T14:30:00',
            'end' => '2016-07-10T17:30:00',
            'account_name' => 'Quahog Air',
            'phone' => '(604) 555-1236',
            'workers' => 2,
            'email' => 'giggity@quahog-air.com',
            'created_on' => '2016-07-02T09:00:00',
            'last_activity_on' => '2016-07-03T13:00:00'
        ),            
        array (
            'name' => 'Glen Quagmire',
            'start' => '2016-07-15T08:30:00',
            'end' => '2016-07-15T11:30:00',
            'account_name' => 'Quahog Air',
            'phone' => '(604) 555-1236',
            'workers' => 2,
            'email' => 'giggity@quahog-air.com',
            'created_on' => '2016-07-02T09:00:00',
            'last_activity_on' => '2016-07-03T13:00:00'
        ),
        array (
            'name' => 'Glen Quagmire',
            'start' => '2016-07-11T14:30:00',
            'end' => '2016-07-11T17:30:00',
            'account_name' => 'Quahog Air',
            'phone' => '(604) 555-1236',
            'workers' => 2,
            'email' => 'giggity@quahog-air.com',
            'created_on' => '2016-07-02T09:00:00',
            'last_activity_on' => '2016-07-03T13:00:00'
        ),
    );

    return view('calendar-week', ['data' => $data, 'filters_boolean' => $filters_boolean]);
}

Answer 1

好吧，我想出来了 - 真的很傻。它是：我加载我的资源的顺序（即使它没有给出错误作为线索），以及我使用jQuery和jQueryUI的事实。

fullcalendar的可拖动问题

1 个答案: