FullCalendar -引导模式加载url和填充输入字段

Question

当我在一个空槽中单击并打开一个bootstrap modal时，我需要他用日历上的日期填充表单输入字段，以创建一个新的记录，这对于shown.bs.modal中的事件select很好。

但是，当我单击使用eventClick的事件时，我只需要加载我在update中已经拥有的表单。但问题是在eventClick中，shown.bs.modal内部的代码也会被触发，字段也会被替换。

模式 (yii2框架)

<?php
Modal::begin([
    'header' => '<b> NEW </b>',
    'id' => 'modal',
    'size' => 'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();
?>

fullcalendar.js (3.10.0)

$('#calendar').fullCalendar({
    defaultView: 'agendaDay',
    locale: 'en-gb',
    contentHeight: 'auto',
    expandRows: true,
    height: '100%',
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'timelineDay,agendaDay'
    },
    groupByResource: true,
    views: {
        timelineDay: {
        slotLabelFormat: ['HH:mm'],
        },
    },
    weekends: false,
    slotLabelFormat : "HH:mm",
    minTime: "08:00:00",
    maxTime: "17:00:00",
    slotLabelInterval: "01:00:00",
    slotDuration: '00:30:00',
    slotWidth: "50",
    slotEventOverlap: false,
    selectable: true,
    defaultDate: day,
    selectOverlap: false,
    displayEventTime: false,
    select: function(start, end, jsEvent, view, resource) {
        $('#modal')
        .on('shown.bs.modal', function (e) {
           $('#salas-date_begin').val(moment(start).format('YYYY-MM-DD HH:mm'));
           $('#salas-date_end').val(moment(end).format('YYYY-MM-DD HH:mm'));
           console.log('here!');
        }).modal('show').find('#modalContent').load('http://url/create');
    },
    eventClick: function(event, jsEvent, view) {
        $('#modal')
        .modal('show').find('#modalContent').load('http://url/update?id=' + event.id);
    },
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    resourceLabelText: 'Rooms',
    events: events
});

更新所有视图

<?php

use kartik\export\ExportMenu;
use yii\bootstrap\Modal;
use yii\helpers\Html;
use yii\grid\GridView;
use yii\helpers\Json;
use yii\web\View;
use yii\widgets\Pjax;
/* @var $this yii\web\View */
/* @var $searchModel common\models\SalasSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Salas');
$this->params['breadcrumbs'][] = $this->title;

$this->registerJsFile('https://fullcalendar.io/releases/fullcalendar/3.10.0/lib/moment.min.js', ['depends' => [\yii\web\JqueryAsset::className()]]);
$this->registerJsFile('https://fullcalendar.io/releases/fullcalendar/3.10.0/fullcalendar.min.js', ['depends' => [\yii\web\JqueryAsset::className()]]);
$this->registerJsFile('https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/scheduler.min.js', ['depends' => [\yii\web\JqueryAsset::className()]]);

$script2 = <<< JS

$(document).ready(function() {
    $('#modal').on('hide.bs.modal', function (e) {
    console.log($(e.currentTarget).off('shown.bs.modal')); // or $(this)

    });
});
JS;
$this->registerJs($script2);

Modal::begin([
    'header' => '<b> NEW </b>',
    'id' => 'modal',
    'size' => 'modal-lg',
]);
echo "<div id='modalContent'></div>";
Modal::end();

?>


<div class="salas-index">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-body">

                        <link rel="stylesheet" href="https://fullcalendar.io/releases/fullcalendar/3.10.0/fullcalendar.min.css">
                        <link rel="stylesheet" href="https://fullcalendar.io/releases/fullcalendar-scheduler/1.9.4/scheduler.min.css">

                        <div id='calendar-container'>
                            <div id="calendar" class="fc fc-ltr fc-unthemed"></div>
                        </div>

                </div>
            </div>
        </div>
    </div>
</div>

<?php

$script = <<< JS
    
  $('#calendar').fullCalendar({
    defaultView: 'agendaDay',
    locale: 'en-gb',
    contentHeight: 'auto',
    expandRows: true,
    height: '100%',
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'timelineDay,agendaDay'
    },
    groupByResource: true,
    views: {
        timelineDay: {
        slotLabelFormat: ['HH:mm'],
        },
    },
    weekends: false,
    slotLabelFormat : "HH:mm",
    minTime: "08:00:00",
    maxTime: "17:00:00",
    slotLabelInterval: "01:00:00",
    slotDuration: '00:30:00',
    slotWidth: "50",
    slotEventOverlap: false,
    selectable: true,
    defaultDate: day,
    selectOverlap: false,
    displayEventTime: false,
    select: function(start, end, jsEvent, view, resource) {
        $('#modal')
        .on('shown.bs.modal', function (e) {
           $('#salas-date_begin').val(moment(start).format('YYYY-MM-DD HH:mm'));
           $('#salas-date_end').val(moment(end).format('YYYY-MM-DD HH:mm'));
           console.log('here!');
        }).modal('show').find('#modalContent').load('http://url/create');
    },
    eventClick: function(event, jsEvent, view) {
        $('#modal')
        .modal('show').find('#modalContent').load('http://url/update?id=' + event.id);
    },
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    resourceLabelText: 'Rooms',
    events: events
});

JS;
$this->registerJs($script);


?>

Answer 1

这是因为一旦您单击日历中的日期，事件shown.bs.modal就绑定到用start和end数据填充输入，我本可以避免第一次这样做。为什么？因为每次您选择日期时，都会再次绑定相同的事件，而不删除前一个事件，这将影响性能，也会有奇怪的行为。

相反，我将使用$.get在select中通过控制器/操作加载表单/视图，并获取填充了预加载值的所有输入，然后将html推到模型中。

在当前的情况下，您可以做的是，在创建事件后关闭模式窗口后，您可以取消绑定事件shown.bs.modal，因为当您单击完整日历触发的日期和select事件时，它将再次绑定。

您应该在document.ready中的视图顶部注册它

/* First option */
$('#modal').on('hide.bs.modal', function (e) {
    $(e.currentTarget).off('shown.bs.modal'); // or $(this)
});

注意:我使用的是.off()，从jQuery 3开始，.unbind()就不再被推荐为.off()了。

最重要的是，您应该使用yii的可用扩展，集成完整的日历https://www.yiiframework.com/extension/yii2fullcalendar，并使用事件源从数据库加载事件。我在过去添加了一个关于完整日历与数据库事件模式的集成的答案，如果您愿意的话，可以对它们进行here过滤。