2

画像をクリックするとポップアップするjqueryダイアログにフルカレンダー（ arshaw.com/fullcalendarアジェンダビューカレンダーから取得）を配置するのに助けが必要です。

カレンダー付きのjqueryダイアログについて少し混乱しています。

4

2 に答える 2

0

を「標準的な使用法」として使用し、そのjQuery UI dialog中で jQuery fullcalendar を定義できます。

次のコードでは:

  1. オブジェクトのフルカレンダー コントロールを開始しますmyCalendar
  2. オブジェクトで jQuery UI ダイアログを開始しますmyDialog
  3. ボタンのクリックイベントで、ダイアログを開きます（カレンダーよりもアンシェ）

コントロールの init は、document.ready 関数でラップされます。

DOM が完全にロードされたときに実行する関数を指定します。

HTML:

<button id="openDialog">Open dialog</button>
<div id="myDialog">
    <div id='myCalendar'></div>
</div>

コード：

$(document).ready(function () {

    $("#openDialog").button().click(function () {
        $("#myDialog").dialog("open");
    });

    $('#myCalendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        eventRender: function (event, element, view) {
            element.bind('click', function () {
                var day = ($.fullCalendar.formatDate(event.start, 'dd'));
                var month = ($.fullCalendar.formatDate(event.start, 'MM'));
                var year = ($.fullCalendar.formatDate(event.start, 'yyyy'));
                alert(year + '-' + month + '-' + day);
            });
        },
        editable: true,
        events: [{
            title: 'event1',
            start: '2011-05-07'
        }, {
            title: 'event2',
            start: '2011-05-10',
            end: '2011-05-15'
        }, {
            title: 'event3',
            start: '2011-05-07 12:30:00',
            allDay: false // will make the time show
        }]

    });

    $("#myDialog").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true
    });

});

ここに実用的なフィドルがあります：http://jsfiddle.net/M3qGM/

于 2013-06-12T06:26:18.360 に答える
0

次の URL をチェックインすると、 http://jqueryui.com/dialog/#modal-formが解決されます

于 2013-06-12T06:12:48.480 に答える