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

Question

I have an issue when I try to scroll to other views on fullcalendar and trying switch form day to week or month in fullcalendar is sows double entries when I make only one entry and when my next action is to switch views. This is not recorded to database and once I logout and login again the issue is gone. So this is in the viewer but i don't know exactly where to go to fix it. Any suggestions?

This Picture show the issue in viewer when i add only one entrly and scrolling the views shows two entries:

My HTML code contains Modals as well. I can post it, if it is required.
I use Latest version of full calendar.
The full calendar javascript code is:

$(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);
        }
    });

  }
});

Answer 1

Ok! Finally I find it out. I have to add two lines of code in the doSubmit function the code is : $('#calendar').fullCalendar('removeEvents'); , $('#calendar').fullCalendar('refetchEvents');

And the function so far:

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');

        }
    });

}