jQuery FullCalendar：当点击创建的事件消失答案

【问题标题】：jQuery FullCalendar : When click created event disappersjQuery FullCalendar：当点击创建的事件消失
【发布时间】：2014-03-10 17:17:07
【问题描述】：

我正在使用带有资源视图的 fullcalendar 插件。 (http://www.ikelin.com/jquery-fullcalendar-resource-day-view/)。

我试图在单击空单元格时显示引导表单模式。（默认视图：'resourceDay'）。

当我点击一个空单元格模式时，当我点击保存时，新事件将被添加到日历中。但是有一个小错误。

如果我点击模式/浏览器窗口内的任何地方，事件block将消失（我可以点击日历，这将创建空单元格上的彩色块暂时）。

如果我点击保存，它将被重新添加到日历中。

由于某种原因，如果我将 FullCalendar 的 renderEvent 放在点击函数中，则会出现此错误。如何解决这个问题？谢谢！

（我使用了 jquery UI 对话框并进行了测试，但它向我显示了相同的结果）

回调全日历的JS函数

   select: function(start, end, allDay, event, resourceId) {//select cell (empty)

                var title = 'Sample event';// event name

                $('#add_appt').modal();//open the modal

                $('#save_appt').click(function(e) {//click on the save button
                    //e.preventDefault();

                    if (title) {//Add the event
                        console.log("CONSOLE select event " + event + title + ", start " + start + ", end " + end + ", allDay " + allDay + ", resource " + resourceId);

                        calendar.fullCalendar('renderEvent',
                                {
                                    title: title,
                                    start: start,
                                    end: end,
                                    allDay: allDay,
                                    resourceId: resourceId
                                }, true); // make the event "stick" as true

                    }
                    console.log("closing");
                    calendar.fullCalendar('unselect');

                    $('#add_appt').modal('hide');//close the modal
                });
    }

HTML 引导模式

<div class="modal fade" id="add_appt" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Add New Appointment</h4>
            </div>
            <div class="modal-body">
<!--form -->
                <form id='appt_from' class="form-horizontal">
                    <!-- Text input-->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="textinput">Text Input</label>  
                        <div class="col-md-8">
                            <input id="textinput" name="textinput" type="text" placeholder="placeholder" class="form-control input-md">
                        </div>
                    </div>
                    <!-- Select Basic -->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="selectbasic">Select Basic</label>
                        <div class="col-md-8">
                            <select id="selectbasic" name="selectbasic" class="form-control">
                                <option value="1">Option one</option>
                                <option value="2">Option two</option>
                            </select>
                        </div>
                    </div>
                    <!-- Textarea -->
                    <div class="form-group">
                        <label class="col-md-3 control-label" for="textarea">Text Area</label>
                        <div class="col-md-8">                     
                            <textarea class="form-control" id="textarea" name="textarea">default text</textarea>
                        </div>
                    </div>
                </form>
<!--/ from -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button id='save_appt' type="button" class="btn btn-success">Save</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： jquery twitter-bootstrap onclick modal-dialog fullcalendar

【解决方案1】：

我找到了解决方案。我将 unselectAuto 选项设置为 false。所以当我点击浏览器中的任意位置时，事件块不会消失。

只有当我点击关闭或保存按钮时，我才会调用

 calendar.fullCalendar( 'unselect' );// var calendar = $('.container').fullcalendar();

在 Close 和 Save onClicks 中运行此函数。

希望这会对某人有所帮助。

【讨论】：