画像をクリックするとポップアップするjqueryダイアログにフルカレンダー( arshaw.com/fullcalendarアジェンダビューカレンダーから取得)を配置するのに助けが必要です。
カレンダー付きのjqueryダイアログについて少し混乱しています。
画像をクリックするとポップアップするjqueryダイアログにフルカレンダー( arshaw.com/fullcalendarアジェンダビューカレンダーから取得)を配置するのに助けが必要です。
カレンダー付きのjqueryダイアログについて少し混乱しています。
を「標準的な使用法」として使用し、そのjQuery UI dialog
中で jQuery fullcalendar を定義できます。
次のコードでは:
myCalendar
myDialog
コントロールの 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/
次の URL をチェックインすると、 http://jqueryui.com/dialog/#modal-formが解決されます