在全日历中两次切换表格的日期至星期或月份

时间:2018-11-15 16:29:13

标签: javascript fullcalendar

当我尝试在fullcalendar上滚动到其他视图并尝试在fullcalendar中将日期切换为星期或月份时,当我只输入一个条目并且下一个动作是切换视图时,母猪会重复输入两个条目。这没有记录到数据库,一旦我注销并再次登录,问题就消失了。所以这是在查看器中,但我不知道确切地去修复它。有什么建议吗?

当我仅添加一个并滚动视图显示两个条目时,此图片显示了查看器中的问题: This Picture show the issue in viewer when i add only one entrly and scrolling the views shows two entries.

我的HTML代码也包含模式。如果需要,我可以发布它。   
我使用完整日历的最新版本。   
完整的日历javascript代码为:

$(document).ready(function () {
  var calendar = $('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'agendaDay,agendaWeek,month'
    },
    defaultView: 'agendaDay',
    editable: true,
    selectable: true,
    allDaySlot: false,
    displayEventTime: false,
    slotDuration: '02:00:00',
    contentHeight: 'auto',
    longPressDelay: 10,
    eventLongPressDelay: 20,
    selectLongPressDelay: 25,

    events: "index.php?view=1",

    eventAfterRender: function (event, element, view) {

        if (parseInt(event.title) >= 180) {
            element.css('background-color', '#F27F0C');


        element.css('color', '#000000');
        element.css('padding-left', '0.17em');
        //element.css('text-align','center');
        element.css('font-size', '1.47em');
    },

    eventClick: function (event, jsEvent, view) {
        endtime = $.fullCalendar.moment(event.end).format('h:mm');
        starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
        var mywhen = starttime + ' - ' + endtime;
        $('#modalTitle').html(event.title);
        $('#modalWhen').text(mywhen);
        $('#eventID').val(event.id);
        $('#calendarModal').modal();
    },


    select: function (start, end, jsEvent) {
        endtime = $.fullCalendar.moment(end).format('h:mm');
        starttime = $.fullCalendar.moment(start).format('dddd, MMMM Do YYYY, h:mm');
        var mywhen = starttime + ' - ' + endtime;
        start = moment(start).format();
        end = moment(end).format();
        $('#createEventModal #startTime').val(start);
        $('#createEventModal #endTime').val(end);
        $('#createEventModal #when').text(mywhen);
        $('#createEventModal').modal('toggle');
    },
    eventDrop: function (event, delta) {
        $.ajax({
            url: 'index.php',
            data: 'action=update&title=' + event.title + '&start=' + moment(event.start).format() + '&end=' + moment(event.end).format() + '&id=' + event.id,
            type: "POST",
            success: function (json) {
                //alert(json);
            }
        });
    },
    eventResize: function (event) {
        $.ajax({
            url: 'index.php',
            data: 'action=update&title=' + event.title + '&start=' + moment(event.start).format() + '&end=' + moment(event.end).format() + '&id=' + event.id,
            type: "POST",
            success: function (json) {
                //alert(json);
            }
        });
    }
});

$('#submitButton').on('click', function (e) {
    e.preventDefault();
    doSubmit();
});

$('#deleteButton').on('click', function (e) {
    // We don't want this to act as a link so cancel the link action
    e.preventDefault();
    doDelete();
});

function doDelete() {
    $("#calendarModal").modal('hide');
    var eventID = $('#eventID').val();
    $.ajax({
        url: 'index.php',
        data: 'action=delete&id=' + eventID,
        type: "POST",
        success: function (json) {
            if (json == 1)
                $("#calendar").fullCalendar('removeEvents', eventID);
            else
                return false;


        }
    });
}
function doSubmit() {
    $("#createEventModal").modal('hide');
    var title = $('#title').val();
    var startTime = $('#startTime').val();
    var endTime = $('#endTime').val();

    $.ajax({
        url: 'index.php',
        data: 'action=add&title=' + title + '&start=' + startTime + '&end=' + endTime,
        type: "POST",
        success: function (json) {
            $("#calendar").fullCalendar('renderEvent',
                    {
                        id: json.id,
                        title: title,
                        start: startTime,
                        end: endTime
                    },
                    true);
        }
    });

  }
});

1 个答案:

答案 0 :(得分:0)

好!终于我找到了。我必须在doSubmit函数中添加两行代码,代码为:$('#calendar').fullCalendar('removeEvents');$('#calendar').fullCalendar('refetchEvents');


到目前为止的功能:

function doSubmit() {
    $("#createEventModal").modal('hide');
    var title = $('#title').val();
    var startTime = $('#startTime').val();
    var endTime = $('#endTime').val();

    $.ajax({
        url: 'index.php',
        data: 'action=add&title=' + title + '&start=' + startTime + '&end=' + endTime,
        type: "POST",
        success: function (json) {
            $("#calendar").fullCalendar('renderEvent',
                    {
                        id: json.id,
                        title: title,
                        start: startTime,
                        end: endTime
                    },
                    true);
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('refetchEvents');

        }
    });

}