2

我需要帮助将完整的日历（取自arshaw.com/fullcalendar 议程视图日历）放入一个 jquery 对话框中，该对话框将在单击图像时弹出。

我对带有日历的 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 回答