Question

所以我试图使用FullCalendar和jQuery UI对话框。而且我不确定如何将两者放在一起非常好。

当我选择或点击空白日活动时，我希望弹出jQuery模态对话框。虽然我想让它加载一个内部文件（PHP包含）。但是，当我收到表单提交时，我无法让它关闭对话框

此外，通过使用此方法，我无法将其拉到我点击的日期以自动填写开始日期字段。

使用fullCalendar在jQuery UI模式对话框中混合的最佳途径是什么？

任何帮助将不胜感激。如果可能，加载外部文件有一个好方法吗？

这是我目前所拥有的：

select: function(start, end, date, allDay, jsEvent, view, calEvent) {
    $("#addEventDialog").dialog("open");

$("#addEventDialog").load('dialog.CalendarNewEvent.php').dialog({
    title: 'Add Event',
    modal: true,
    buttons: {
        "Save": function() {
           $("#calendarWidget2").ajaxSubmit({
                target: "#calendarResponse",
                dataType: 'json',
                clearForm: true,
                success: function(response, event) {
                    //If the widget says it's okay to refresh, refresh otherwise, consider it done
                    if(response.refreshEvents == '1') {
                      $("#calendar").fullCalendar("refetchEvents");
                    }
                    // Close the dialog box when it has saved successfully
                    $("#addEventDialog").dialog("destroy");
                    // Update the page with the reponse from the server
                    $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />"); 

                },
                error: function() {
                    alert("Oops... Looks like we're having some difficulties.");    
                }
          }); // Close ajax submit
        },
        "Cancel": function() { $(this).dialog("close"); } 
    }, //End buttons
});

//alert("The inputs will work if i un-comment this alert");

/* UPDATE ALL THE VALUES IN THE DIALOG BOX */
$("#startDate").val($.fullCalendar.formatDate(start, 'yyyy/MM/dd'));
$("#endDate").val($.fullCalendar.formatDate(end, 'yyyy/MM/dd'));

}，

就像我的代码提到的那样，当我使用这段代码时，什么都没有得到更新......但是当我使用ALERT函数时，我现在放置它，并使它实际生效...输入值将得到由于某种原因更新。这几乎就好像函数快速运行以使值适用，所以当我在那里停止警报时，它会使它工作....任何想法？

Answer 1

以下是我如何调用对话框并填充它：

    $('#calendar').fullCalendar({ 
dayClick: function (date, allDay, jsEvent, view) {  
            $("#dialog").dialog('open');     
            $("#name").val("(event name)");
            $("#date-start").val($.fullCalendar.formatDate(date, 'MM/dd/yyyy'));
            $("#date-end").val($.fullCalendar.formatDate(date, 'MM/dd/yyyy'));
            $("#time-start").val($.fullCalendar.formatDate(date, 'hh:mmtt'));
            $("#time-end").val($.fullCalendar.formatDate(date, 'hh:mmtt')); 
    }, 
});

    $("#dialog").dialog({
        autoOpen: false,
        height: 350,
        width: 700,
        modal: true,
        buttons: {
            'Create event': function () {
                $(this).dialog('close');
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        },

        close: function () {
        }

    });

html

            <div id="dialog" class="event-dialog" title="Event">
            <div id="dialog-inner">
                <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all title"><br>
                <span class="inline"><input type="text" name="date-start" id="date-start" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline"><input type="text" name="time" id="time-start" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline">To:</span> <span class="inline"><input type="text" name="date" id="date-end" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline"><input type="text" name="time" id="time-end" class="text ui-widget-content ui-corner-all"></span>
                <span class="inline">&nbsp;All day <input id="all-day" type="checkbox"></span> 
                <!--<label for="description">Description:</label> 
                <textarea name="description" id="description" class="text ui-widget-content ui-corner-all" rows="8" cols="73">       
</textarea>
            </div>
        </div>
        <div id="calendar"></div>

我不能在没有看到它的情况下谈论php的东西，但它应该在理论上起作用。您可以看到此示例是正在进行的工作，但功能不完全（post，get等）。

Answer 2

也许尝试将对话框作为.load（）函数调用：

 $("#addEventDialog").load("'dialog.CalendarNewEvent.php'", function() {  
          $("#addEventDialog").dialog({  
 title: 'Add Event',
    modal: true,
    buttons: {
        "Save": function() {
           $("#calendarWidget2").ajaxSubmit({
                target: "#calendarResponse",
                dataType: 'json',
                clearForm: true,
                success: function(response, event) {
                    //If the widget says it's okay to refresh, refresh otherwise, consider it done
                    if(response.refreshEvents == '1') {
                      $("#calendar").fullCalendar("refetchEvents");
                    }
                    // Close the dialog box when it has saved successfully
                    $("#addEventDialog").dialog("destroy");
                    // Update the page with the reponse from the server
                    $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />"); 

                },
                error: function() {
                    alert("Oops... Looks like we're having some difficulties.");    
                }
          }); // Close ajax submit
        },
        "Cancel": function() { $(this).dialog("close"); } 
    }, //End buttons

});

我不确定这是否正确，但它可能会有所帮助。还有一个提示：http://www.coderanch.com/t/122420/HTML-JavaScript/JQuery-UI-Dialog-load-JavaScript

FullCalendar在jQuery UI模式对话框中加载外部文件

2 个答案: