Question

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

我对日历的jquery对话框感到困惑。

Answer 1

检查以下网址将解决您的问题 http://jqueryui.com/dialog/#modal-form

Answer 2

您可以使用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/

如何在jquery对话框中放入fullcalendar？

2 个答案: