Question

我在ASP.NET MVC应用程序中使用FullCalendar v1.6.4（作为模拟）。

一方面，我实施了'dayRender'回调来引入“cell.bind（'dblclick'，function（）{...}）;” （通过双击日期单元格添加事件）。

另一方面，我已经实现了'eventClick'回调，以便在点击事件时弹出KendoUI窗口。

在这个窗口中，我有一些版本控制＆amp; 2个按钮：一个用于修改具有版本控件中的新值的事件，另一个用于删除事件。

'删除'按钮触发'removeEvents'回调以将当前事件删除到日历中。

一切运作良好，但当我处理删除事件时，我就无法添加新事件。

'dblclick'事件似乎被解雇了（我已经放置了一些JS警报进行测试）。我在Chrome调试器中发现没有javascript错误：s

有人看到我错在哪儿吗？

这是我的代码：

@{
    ViewBag.Title = "Mock";
}

<h2 class="content-title">Mock</h2>

<div class="divSetAddedActivity">
    <input id="ddlMissions" style="width: 250px" />
    <input id="tbxDuration" type="number" value="8" min="1" max="24" step="1" />
    <textarea rows="1" cols="50" id="tbxComment" placeholder="Add a comment"></textarea>
</div>

<div>
    <div id='calendar'></div>
</div>

<div id="window">
    <p id="activityDate"></p>
    <input type="hidden" id="itemId"/>
    <input id="ddlMissions2" style="width: 250px" />
    <input id="tbxDuration2" type="number" min="1" max="24" step="1" />
    <textarea rows="1" cols="50" id="tbxComment2" placeholder="Add a comment"></textarea>
    <button id="btnModifyActivity">Modify</button>
    <button id="btnDeleteActivity">Delete</button>
</div>

<script>
    jQuery(document).ready(function () {
        var window = $("#window");

        $("#tbxDuration").kendoNumericTextBox({
            format: "# h",
            decimals: 0
        });
        $("#tbxDuration2").kendoNumericTextBox({
            format: "# h",
            decimals: 0
        });

        if (!window.data("kendoWindow")) {
            window.kendoWindow({
                width: "500px",
                visible: false,
                modal: true,
                title: "Modify activity"
            });
        }

        var today = new Date();
        var d = today.getDate();
        var m = today.getMonth();
        var y = today.getFullYear();

        var userEvents = [];

        var missions = [{ Id: 1, DisplayLabel: 'Mission1' },
                        { Id: 2, DisplayLabel: 'Mission2' },
                        { Id: 3, DisplayLabel: 'Mission3' },
                        { Id: 4, DisplayLabel: 'Mission4' },
                        { Id: 5, DisplayLabel: 'Mission5' },
                        { Id: 6, DisplayLabel: 'Mission6' },
                        { Id: 7, DisplayLabel: 'Mission7' },
                        { Id: 8, DisplayLabel: 'Mission8' }];

        jQuery("#ddlMissions").kendoDropDownList({
            dataSource: missions,
            dataTextField: "DisplayLabel",
            dataValueField: "Id"
        });
        jQuery("#ddlMissions2").kendoDropDownList({
            dataSource: missions,
            dataTextField: "DisplayLabel",
            dataValueField: "Id"
        });

        jQuery('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: ''
            },
            editable: true,
            firstDay: 1,
            eventClick: function(calEvent, jsEvent, view) {
                jQuery("#itemId").val(calEvent.id);
                jQuery("#activityDate").text(calEvent.start);
                jQuery("#ddlMissions2").data("kendoDropDownList").value(calEvent.missionId);
                jQuery("#tbxDuration2").val(calEvent.duration);
                jQuery("#tbxComment2").val(calEvent.comment);

                window.data("kendoWindow").open();
                window.data("kendoWindow").center();
            },
            eventMouseover: function (calEvent, jsEvent) {
                var tooltip = '<div class="tooltipevent" style="width:150px;background:rgb(159,201,175);position:absolute;z-index:10001;"><b>' + calEvent.title + '</b><br/>'+ calEvent.duration + 'h<br/><i>' + calEvent.comment +'</i></div>';
                $("body").append(tooltip);
                $(this).mouseover(function (e) {
                    $(this).css('z-index', 10000);
                    $('.tooltipevent').fadeIn('500');
                    $('.tooltipevent').fadeTo('10', 1.9);
                }).mousemove(function (e) {
                    $('.tooltipevent').css('top', e.pageY + 10);
                    $('.tooltipevent').css('left', e.pageX + 20);
                });
            },

            eventMouseout: function (calEvent, jsEvent) {
                $(this).css('z-index', 8);
                $('.tooltipevent').remove();
            },
            eventRender: function(event, element) { 
                element.find('.fc-event-title').append("<br/>" + event.duration + "h"); 
                element.find('.fc-event-time').hide();
            },
            dayRender: function (date, cell) {
                cell.bind('dblclick', function () {
                    var ddlMissions = $("#ddlMissions").data("kendoDropDownList");
                    var numDuration = $("#tbxDuration").data("kendoNumericTextBox");

                    alert('a');
                    userEvents.push({
                        id: userEvents[userEvents.length - 1].id + 1,
                        title: ddlMissions.text(),
                        missionId: ddlMissions.value(),
                        start: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
                        allDay: false,
                        duration: numDuration.value(),
                        comment: jQuery("#tbxComment").val(),
                        color: "green"
                    });
                    alert('b');

                    jQuery('#calendar').fullCalendar('refetchEvents');
                    alert('c');
                });
            },
            events: userEvents
        });

        jQuery("#btnModifyActivity").click(function () {
            var currentId = jQuery("#itemId").val();
            var activity = jQuery.grep(userEvents, function (e) { return e.id == currentId; })[0];
            activity.title = jQuery("#ddlMissions2").data("kendoDropDownList").text();
            activity.missionId = jQuery("#ddlMissions2").data("kendoDropDownList").value();
            activity.duration = jQuery("#tbxDuration2").val();
            activity.comment = jQuery("#tbxComment2").val();

            for (var i = 0; i < userEvents.length; i++) {
                if (userEvents[i].id === activity.id) {
                    userEvents[i] = activity;
                }
            }
            jQuery('#calendar').fullCalendar('refetchEvents');
            window.data("kendoWindow").close();
        });

        jQuery("#btnDeleteActivity").click(function () {
            var currentId = jQuery("#itemId").val();
            jQuery('#calendar').fullCalendar('removeEvents', [currentId]);
            jQuery('#calendar').fullCalendar('refetchEvents');
            window.data("kendoWindow").close();
        });
    });
</script>

谢谢！

Answer 1

好的，似乎可以解决这个问题：

jQuery('#calendar').fullCalendar('removeEvents');
jQuery('#calendar').fullCalendar('addEventSource', userEvents);
$('#calendar').fullCalendar('rerenderEvents');

取代这个（在'dayRender'回调结束时）：

jQuery('#calendar').fullCalendar('refetchEvents');

FullCalendar - 在'removeEvents'调用之后，dayRender似乎无法正常工作

1 个答案: