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模式對話框中加載外部文件

回答

相關問題