Question

我已经考虑了几天了，并且检查了SO和API文档，我无法找到在 FullCalendar API中使用HTML弹出框的方法在“select”属性上，而不是当前提示添加事件。是否有一种简单的方法来“不使用”另一个插件。并不是说我反对使用插件，这似乎是一件简单的事情，但由于某些原因我无法绕过它。

修改

我想做什么......

当选择一天时，会出现一个弹出框。
在弹出框中有一个表单，允许我添加事件和说明。

感谢帮助，谢谢！

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/

fullcalendar html弹出窗口

2 个答案: