fullcalendar HTML弹出

Question

我一直在想这几天，现在，以及SO检查和API文档，我不能想出一个办法来使用HTML弹出框中FullCalendar API在“选择”属性而不是当前提示来添加事件。有没有简单的方法来做到这一点“没有”使用另一个插件。不是说我反对使用插件，它看起来像是一件简单的事情，但由于某种原因，我无法将其包裹在头上。

编辑

我想这样做......

1. 当一天选择一个弹出框出现。
2. 在弹出框中有一个表格，允许我添加一个事件和描述。

帮助表示感谢，谢谢！

Answer 1

好吧，所以我能够做到这一点。开始在主体部分的形状......

<div class="popup"><h3>Add an Event</h3> 
<form><div>Title: </div><input class="title" type="text" /><br /><br /> 
<a href="#" class="submitForm">submit</a></form></div> 

加一点造型...

.popup { 
    background-color:ivory; border:1px solid gray; 
    position:fixed; top:25%; left:25%; display:none; padding: 0px 20px 10px 10px; z-index:100; 
} 
.popup form div{float:left; width:80px; text-align:left;} 
.popup form input{float:left; text-align:left;} 

并提交表单，像这样......

select: function(start, end, allDay){ 
    $(".popup").show(); // show's pop up 
    $(".title").focus(); // auto focus on the field 
    var start = Date.parse(start)/1000; // parse the start time to retain value 
    var end = Date.parse(end)/1000; // same but with end 
    $(".submitForm").click(function(){ // on submission 
    var title = $(".title").val(); // gets title value 
    if(title != ""){ // if the title exists run script 
     $.post("insertscript.php", {title: title, start:start, end: end, allDay: allDay}, // be sure to filter data 
     function(){ 
     $(".title").val(""); // clear title field 
     start = ""; // clear start time 
     end = ""; // clear end time 
     calendar.fullCalendar('unselect'); 
     calendar.fullCalendar('refetchEvents'); 
     }); 
    } 
$(".popup").hide(); // hide pop up box 
}); 
}, 

现在我知道这可能不是做这件事的最好方式，但它起作用，并且因为我环顾了三天以找到答案，并且没有其他人似乎拥有它或者至少想分享它，所以我终于扣住了我的座位然后继续骑行我自己。我希望它可以帮助别人:)

Answer 2

你有没有想过使用jQuery UI？ http://jqueryui.com/demos/datepicker/