web-dev-qa-db-ja.com

FullCalendar open bootstrap modal on dayClick

ユーザーがfullCalendarで1日をクリックしたときに、bootstrapモーダルを開きたい。dayClickイベントを確認したが、モデルの呼び出し方法がわからない。

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

bootstrapモデルを呼び出すための通常のリンク

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

編集：

私はすべてのニーズに1 bootstrapモデルのみを使用し、コンテンツを変更するだけです。これを行う方法は、href ..を呼び出すことです。したがって、リンクは次のようになります。

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

他の誰かが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>
12
George

以下が機能するはずです。

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

モーダルのIDが実際にはmyModalであると仮定します。 .modal()は、モーダルを操作するためにbootstrap）によって使用されるJavaScriptメソッドです...同様に、$("#myModal").modal("hide") ..を使用してモーダルを閉じることができます。

3
Amina

もう1つの方法は、カレンダーの再作成です。

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

同じ問題が発生しましたが、何らかの理由で、「text」メソッドのみが機能しました。

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