Question

我在资源视图中使用 fullcalendar 插件。（http://www.ikelin.com/jquery-fullcalendar-resource-day-view/）。

我正在尝试在单击空单元格时显示引导程序表单模式。（defaultView：'resourceDay'）。

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

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

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

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

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

回调fullcalendar的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 bootstrap模式

<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>

Answer 1

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

只有点击关闭或保存按钮，我才会致电

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

在关闭和保存 onClicks中运行此功能。

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

jQuery完整日历：当点击创建的事件消失时

1 个答案: