FullCalendar-Bootstrap模态加载url和填充输入字段 [英] FullCalendar - Bootstrap Modal load url and fill inputs fields

问题描述

当我单击一个空插槽并打开一个 bootstrap模态时，我需要他用日历中的日期填写表单输入字段，以创建新记录，并且在事件中正常工作在 shown.bs.modal 中选择.

when i click in a empty slot and open a bootstrap modal i need he fill a form input fields with dates from calendar, to create a new record and this is working fine with event select in shown.bs.modal.

但是当我使用 eventClick 单击事件时，我只需要加载更新网址中已经存在的表单.但是问题出在 eventClick 中，同时也触发了 shown.bs.modal 中的代码并替换了字段.

but when i click in event with eventClick i need only load a form that i already have in update url. But the problem is in eventClick the code inside shown.bs.modal is also fired and fields are replaced.

模式(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);


?>

推荐答案

这是因为一旦单击日历中的日期，就会绑定事件 shown.bs.modal ，以使用 start 和 end 日期.我会避免第一次这样做.为什么?因为每次选择日期时，您都会再次绑定同一事件而不删除前一个事件，这会影响性能并且也会产生奇怪的行为.

That is because once you click the date in the calendar the event shown.bs.modal is bind to fill in the inputs with the start and end dates.I would have avoided doing it the first time. Why? because every time you select the date you bind the same event again without removing the previous one which will effect the performance and will have weird behavior too.

相反，我会在 select 中使用 $.get 来通过控制器/动作加载表单/视图，并使所有输入都充满预加载的值，然后按模态内的html.

Instead I would use $.get inside the select to load the form/view via controller/action and get all the inputs filled with preloaded values and just push the html inside the modal.

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

In your case currently what you can do is that you can un-bind the event shown.bs.modal once the modal window is closed after creating the event, as it will bind again when you click on the date and the select event of full calendar fires.

您应该在 document.ready

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

注意:自jQuery 3起，我正在使用 .off()，不推荐使用 .unbind()，而推荐使用 .off()

Note: i am using .off() as of jQuery 3 the .unbind() is deprecated in the favor of .off()

首先，您应该使用yii的可用扩展名并集成完整的日历 https://www.yiiframework.com/extension/yii2fullcalendar 并使用事件源从数据库加载事件.我过去添加了一个完整日历与数据库中的事件模式集成并对其进行过滤的答案，

Above all you should use the yii's available extension and integrate the full calendar https://www.yiiframework.com/extension/yii2fullcalendar and use event sources to load the events from the database. I have added an answer in past on the integration of the full calendar with the events modal from the database and filtering them here if you like to see.

这篇关于FullCalendar-Bootstrap模态加载url和填充输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！