yii2完整日历事件不会拖动

时间:2017-03-31 15:03:55

标签: yii2 fullcalendar

我将事件从数据库传递到视图。使用最新的日历插件。 但是我无法将事件从一天拖到另一天。 这是控制器:

    public function actionAllEventsmod()
{
    $events = Events::find()->all();
    $tasks = [];
    $draggable = "fc-draggable fc-resizable";
    foreach ($events as $eve) {

        $event = new \yii2fullcalendar\models\Event();

        $house = House::getHouseAddress($eve->house_id);
        $details = $house->address_line_1 . " -- " . $house->city . " -- " . $house->comments;

        $event->id = $eve->event_id;
        $event->start = $eve->start;
        $event->end = $eve->end;
        $event->title = $eve->title;
        $event->description = $details;
        $event->className = $draggable;
        $event->editable = true;
        $event->backgroundColor = $eve->background_color;
        $tasks[] = $event;
    }

        return $this->render('all-events', [
        'events' => $tasks,
    ]);

}

视图:

use yii\helpers\Html;
use yii\grid\GridView;
use yii\web\JsExpression;

$JSEventClick = <<<EOF
function(calEvent, jsEvent, view) {
    alert(calEvent.title + ' -- ' + calEvent.description);
}
EOF;

$this->registerJs($JSEventClick);
?>

<?= yii2fullcalendar\yii2fullcalendar::widget(array(
        'events' => $events,
        'id' => 'calendar',
        'clientOptions' =>[
        'allDaySlot' => false,
        'eventLongPressDelay' => 1500,
        'selectLongPressDelay' => true,
        'hiddenDays'=> [0],
        'height' => 'auto',
            'minTime' => '08:00:00',
            'maxTime' => '20:00:00',
        'selectable' => true,
        'selectHelper' => true,
        'select' => function(start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                    },
                    true // make the event "stick"
                );
            }
            calendar.fullCalendar('unselect');
        },
        'droppable' => true,
        'draggable' => true,
        'editable' => true,
        'eventStartEditable' => true,
        'drop' => new JsExpression($JSDropEvent),
        'select' => new JsExpression($JSCode),
        'eventClick' => new JsExpression($JSEventClick),
        'eventLimit' => true,
        'eventDrop' => function(event, delta, revertFunc) {
            alert(event.title + " was dropped on " + event.start.format());
            if (!confirm("Are you sure about this change?")) {
                revertFunc();
            }
        }),
        'eventRender' => new JsExpression($JSEventRender),
        'eventResize' => new JsExpression("
            function(event, delta, revertFunc, jsEvent, ui, view) {
                console.log(event);
            }"),
  ],
  ));
?>

<?php

$JSCode = <<<EOF
function(start, end) {
    var title = prompt('Event Title:');
    var eventData;
    if (title) {
        eventData = {
            title: title,
            start: start,
            end: end
        };
        $('#w0').fullCalendar('renderEvent', eventData, true);
    }
    $('#w0').fullCalendar('unselect');
}
EOF;

$JSDropEvent = <<<EOF
function(date) {
    alert("Dropped on " + date.format());
    if ($('#drop-remove').is(':checked')) {
        // if so, remove the element from the "Draggable Events" list
        $(this).remove();
    }
}
EOF;

?>
<div class="well"> 
<pre>
Event Hover:
<?= Html::encode($JSCode); ?>

Event JSDropEvent:
<?= Html::encode($JSDropEvent); ?>  

</pre>
</div>

</div>

非常感谢任何帮助。

0 个答案:

没有答案