fullcalendar 不會讓我調整事件的大小（光標不顯示，我做錯了）

Question

嗨堆棧跟蹤錯誤追逐者，我在這里尋求幫助......我在 symfony2 上，使用 twitter bootstrap，我正在拼命嘗試通過執行以下操作來調整通過 JSON 發送到日歷的元素的大小，我可以拖動事件，但不能調整它們的大小...：

截圖： http : //nimga.fr/f/oDrdH.png

進入控制器：

foreach($events as $event) {

    $start = $event - > getDate();
    $allDay = ($event - > getLength() >= 8);
    $newevent = array('title' = > $event - > getTask() - > getName(),
        'start' = > $start - > format('Y-m-d H:i:s'),
        'id' = > $event - > getId(),
        'allDay' = > $allDay,
        'end' = > $start - > modify('+'.$event - > getLength().
            ' hour') - > format('Y-m-d H:i:s'));
    $eventsArray[] = $newevent;
}
return $this - > render('IntranetTimesheetBundle:Task:displayall.html.twig', array('htmlTree' = > $htmlTree, 'eventlist' = > json_encode($eventsArray)));

並在視圖中：

$('#calendar').fullCalendar({
    droppable: true, // this allows things to be dropped onto the calendar !!!
    weekends: false, // will hide Saturdays and Sundays
    defaultView: 'agendaWeek',
    slotMinutes: 60,
    minTime: 7,
    maxTime: 19,
    events: {
        {
            eventlist | raw
        }
    },
    editable: true,
    resizable: true,
    eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
        var DATA = {
            "event_title": event.title,
            "event_id": event.id,
            "event_date": event.start,
            "dayDelta": dayDelta,
            "minuteDelta": minuteDelta,
            "allDay": allDay
        };
        $.ajax({
            type: "POST",
            url: "move",
            data: DATA,
            cache: false,
            success: function (data) {
                //to do in case of success
            }
        });
    },
    eventResizeStart: function (event, jsEvent, ui, view) {
        console.log('RESIZE START ' + event.title);

    },
    eventResizeStop: function (event, jsEvent, ui, view) {
        console.log('RESIZE STOP ' + event.title);

    },
    eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
        console.log('RESIZE!! ' + event.title);
        console.log(dayDelta + ' days'); //this will give the number of days you extended the event
        console.log(minuteDelta + ' minutes');

    }
})

我得到了 jQuery，它加載了 UI 和可放置的擴展，但仍然沒有箭頭光標指示我可以調整事件的大小。 這是我的“依賴關系”

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel='stylesheet' type='text/css' href="http://arshaw.com/js/fullcalendar-1.6.4/fullcalendar/fullcalendar.css" />
<link rel='stylesheet' type='text/css' href="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>

Answer 1

好的，我剛剛發現問題出在哪里：“fullcalendar.print.css”覆蓋基本的“fullcalendar.css”並在“display：none”中設置調整大小的句柄，因此通過擦除打印css，它可以工作。 感謝閱讀。

Answer 2

只有長事件是可調整的。 那個事件沒有時間和日期。 例子：

events: [
    {
        title: 'All Day Event',
        start: '2014-06-01'
    },
    {
        title: 'Long Event',
        start: '2014-06-07',
        end: '2014-06-10'
    },
    {
        id: 999,
        title: 'Repeating Event',
        start: '2014-06-09T16:00:00'
    },
    {
        id: 999,
        title: 'Repeating Event',
        start: '2014-06-16T16:00:00'
    },
    {
        title: 'Meeting',
        start: '2014-06-12T10:30:00',
        end: '2014-06-12T12:30:00'
    },
    {
        title: 'Lunch',
        start: '2014-06-12T12:00:00'
    },
    {
        title: 'Birthday Party',
        start: '2014-06-13T07:00:00'
    },
    {
        title: 'Click for Google',
        url: 'http://google.com/',
        start: '2014-06-28'
    }
]

Answer 3

最后我找到了解決方案：將 allDay 添加到每個事件中！

var event = {
    start: startEvent,
    end: endEvent,
    title: "Test",
    allDay: true
}

Answer 4

您可以將 allDay : True 添加到每個事件或僅將 allDayDefault={true} 放在日歷屬性中。 它會做同樣的事情。

希望它有幫助。

Answer 5

將可編輯內容添加到以下代碼中（fullcalendar的1.6.4版本的工作代碼，更新的版本不起作用）

var DATA = {
        "event_title": event.title,
        "event_id": event.id,
        "event_date": event.start,
        "dayDelta": dayDelta,
        "minuteDelta": minuteDelta,
        "allDay": allDay
        "editable":true     <<<<<<<<<--THIS
    };