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

所以我想使用FullCalendar和jQuery UI对话框。我不确定如何去把这两个放在一起很好。FullCalendar在jQuery UI模式对话框中加载外部文件

当我选择或点击空白事件时，我想要弹出jQuery模态对话框。尽管我想让它加载一个内部文件（php include）。但与此相关的是，我无法让它关闭对话框，当我得到提交表格

此外，通过使用此方法，我不能让它拉我点击的日期自动填写开始日期字段。

什么是最好的路线去混合jQuery UI模式与fullCalendar对话框？

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

这是目前我有：

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'));

}，

所以像我的代码中提到，当我使用此代码，没有得到更新...但但是当我使用的警报功能我现在把它放在那里，并使它真正生活......输入值将因某种原因而得到更新。这就好像这个函数正在快速实现这些值的应用一样，所以当我将警报停在那里时，它就会工作......任何想法？

来源

2010-08-31 Justin

这是我如何调用对话框，并填充它：

$('#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等）。

来源

2010-09-10 15:55:43 orolo

orolo，谢谢你的工作很不错，除了我遇到了一个小毛病似乎...我已经在我的问题上面添加了我的代码。我希望你能帮我解决这个问题。 – Justin 2010-09-13 22:46:50

嗯，我想到了这个问题，这是因为我正在使用.load（）函数与jQuery对话框，而不是将代码嵌入到主页面中。没有什么大不了的，但是修正了它。如果有解决方案，听起来真棒！ – Justin 2010-09-14 04:33:25

添加事件没有附加在日期框中...请帮助我 – Elankeeran 2011-06-29 18:42:18

也许尝试调用对话框，（）.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

来源

2010-09-14 15:52:45 orolo

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

回答

相关问题