FullCalendar 在 dayClick 上打开 bootstrap 模态

Question

我想在用户单击 fullCalendar 中的某一天时打开一个 bootstrap 模式。我查看了 dayClick 事件，但不知道如何调用模型。

dayClick: function(date, jsEvent, view) {
     // call the model 
},

正常link调用一个bootstrap模型

<a href="#" data-toggle="modal" data-target="#myModal"..................../>

编辑：

我只使用 1 个 bootstrap 模型来满足我的所有需求，只需更改内容即可。我这样做的方法是调用 href .. 所以我的 link 看起来像 :

<a href="<?php echo site_url('model/add') ?>" data-toggle="modal" data-target="#myModal" role="button" class="btn-u btn-block"> Add</a>

Answer 1

以下应该有效：

dayClick: function(date, jsEvent, view) {
    $("#myModal").modal("show");
},

假设你的模态ID实际上是myModal。 .modal()是bootstrap用来操作模态框的JavaScript方法...同样，你可以使用$("#myModal").modal("hide")...

关闭模态框

Answer 2

如果其他人需要在 bootstrap 模型中打开 fullCalendar 事件，我找到了方法：

添加：

        eventClick:  function(event, jsEvent, view) {
            $('#modalTitle').html(event.title);
            $('#modalBody').html(event.description);
            $('#eventUrl').attr('href',event.url);
            $('#calendarModal').modal();
        },

模型：

<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span class="sr-only">close</span></button>
            <h4 id="modalTitle" class="modal-title"></h4>
        </div>
        <div id="modalBody" class="modal-body"> </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>
</div>

Answer 3

另一种方式是日历渲染：

eventRender: function(event, element) {
                        element.attr('data-toggle', "modal");
                        element.attr('data-target', "#sched-modal");
                        element.attr('href', "/details");
                    }

Answer 4

我遇到了同样的问题，但出于某种原因，只有 'text' 方法对我有用。

$('#calendar').fullCalendar({
    dayClick: function(date, jsEvent, view) {
        alert('Clicked on: ' + date.format());
        $('#modalTitle').text(date.format());
        $('#fullCalModal').modal('show');
    }
});

FullCalendar 在 dayClick 上打开 bootstrap 模态

FullCalendar open bootstrap modal on dayClick

fullcalendar

twitter-bootstrap