如何删除月按钮按下的所有完整日历事件

Question

在没有找到一种方法来隐藏日历上的事件之后，我正在考虑一旦用户点击"month"按钮就删除所有事件。我该如何实现呢?'

$scope.uiConfig = {
    calendar: {
        height: 450,
        editable: false,
        selectable: true,
        header: {
            left: 'title',
            center: '',
            right: 'month today prev,next'
        },
        eventClick: $scope.alertOnEventClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventRender: $scope.eventRender,
        dayClick: $scope.alertOnDateClick,
        timeClick: $scope.alertTest
    }
};

我认为这是月份按钮的功能。它位于fullcalendar.js

var MonthView = BasicView.extend({
// Produces information about what range to display
computeRange: function(date) {
    var range = BasicView.prototype.computeRange.call(this, date); // get value from super-method
    var rowCnt;
    // ensure 6 weeks
    if (this.isFixedWeeks()) {
        rowCnt = Math.ceil(range.end.diff(range.start, 'weeks', true)); // could be partial weeks due to hiddenDays
        range.end.add(6 - rowCnt, 'weeks');
    }
    return range;
},

// Overrides the default BasicView behavior to have special multi-week auto-height logic
setGridHeight: function(height, isAuto) {
    isAuto = isAuto || this.opt('weekMode') === 'variable'; // LEGACY: weekMode is deprecated
    // if auto, make the height of each row the height that it would be if there were 6 weeks
    if (isAuto) {
        height *= this.rowCnt / 6;
    }
    distributeHeight(this.dayGrid.rowEls, height, !isAuto); // if auto, don't compensate for height-hogging rows
},

isFixedWeeks: function() {
    var weekMode = this.opt('weekMode'); // LEGACY: weekMode is deprecated
    if (weekMode) {
        return weekMode === 'fixed'; // if any other type of weekMode, assume NOT fixed
    }
    return this.opt('fixedWeekCount');
}});`

这是我有的。我在单击某一天时生成事件，但我想在返回月份视图(单击月份按钮)时删除所有事件

$scope.alertOnDateClick = function(date, jsEvent, view, start, end, allDay){
    //dateSaver = $scope.alertMessage = ('Clicked on: ' + date.format());
    dateSaver = date.format();
    var today = moment();
    var todayCheck = moment(today).format('YYYY-MM-DD');
    var selectionStart = date.format();
    selectionStart = Date.parse(selectionStart);
    today = Date.parse(today);
    var view = $('#myCalendar1').fullCalendar('getView');
    //alert(dateSaver);
    $scope.alertMessage = dateSaver;
    dayClicked = dateSaver.substring(8,11);
    dayClicked = parseInt(dayClicked);
    monthClicked = dateSaver.substring(5,7);
    monthClicked = parseInt(monthClicked) - 1;
    yearClicked = dateSaver.substring(0,4);
    yearClicked = parseInt(yearClicked);
    if(dateSaver == todayCheck || selectionStart > today){
        $('#myCalendar1').fullCalendar( 'changeView', 'agendaDay' );
        $('#myCalendar1').fullCalendar( 'gotoDate', date.format());
        //$http.post
        for(timeIncrement = 0; timeIncrement < 24; timeIncrement++){
            $scope.events.push({
                title: 'Rooms Available [' + 11 + ']',
                start: new Date(yearClicked, monthClicked, dayClicked, timeIncrement),
                url: 'http://localhost:8000/app/reservationOptions.html'
            });
        }
    }
    else{
        //if(view.name == 'month'){
            alert("You have clicked a previous date");
        //}
        //else{
        //  alert("You have clicked a previous time slot");
        //}
    }
};

Answer 1

我认为你正在寻找的部分是美元("#")。fullCalendar("removeEventSource");部分，可以在viewRender:选项中指定就像我读的第一个教程提到的，这是他在http://www.codeproject.com/Articles/638674/Full-calendar-A-complete-web-diary-system-for-jQue

最难的部分。

看到我的整个javascript代码下面-为我工作!由于FullCalendar

<script type="text/javascript">
    var DirUpdateComplete = false;
    var DeptUpdateComplete = false;

    $(document).ready(function () {
        $("#LegendLink").click(function () {
            $('#LegendRow').toggle('slow');
        });
        function addDays(date, days) {
            var result = new Date(date);
            result.setDate(result.getDate() + days);
            return result;
        }

        var hid = $('#heid').val();
        var isMors = $('#isMors').val();
        var isAdmin = $('#isAdmin').val();
        var _now = new Date();
        // now.format("dd/M/yy h:mm tt");
        // now = getDate();
        var _end = new Date(_now);
        _end = addDays(_now, 30);
        var num = 30;

        var holdDat = {
            SDay: _now,
            eid: hid,
            numOfDays: num
        };
        var objectData = {
            eid: hid
        };

        var sourceUserView = {
            url: 'Schedule/GetSchedule',
            data: objectData
        };
        var narray = ["Jarose, Justin", "Nelson, Rusty"];


        var CalLoading = true;


        //https://github.com/mherrmann/fullcalendar-rightclick/blob/master/README.md
        //add something for easy adding a week at atime, or the 
        //http://fullcalendar.io/docs/selection/

        //88888888888888888888888888888888888888888888888888888888888888888***************
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultView: 'month',
            editable: true,
            allDaySlot: false,
            selectable: true,
            slotMinutes: 15,
            displayEventEnd: {
                month: true,
                basicWeek: true,
                "default": true
            },
            events: sourceUserView,
            eventClick: function (calEvent, jsEvent, view) {
                DisplayCurrentEvent(calEvent);
            },
            select: function (start, end, jsEvent, view) {
                if (isMors == "True") {
                     newScheduleRange(start, end, jsEvent, view);
                }
                //alert("will i get here");
            },
            eventDrop: function (event, dayDelta, revertFunc, jsEvent, ui, view) {
                var hd = new Date();
                var movedToDate = new Date(event.start._d);
                if (event.MorsRecID == $('#HiddenMorsRecID').val() || isAdmin == "True") {
                    if (isAdmin) {
                        MoveEvent(event);
                    } else {
                        if (movedToDate <= hd) {
                            revertFunc();
                            alert("Can not move anything to earlier then Tomorrow.");
                        } else {
                            if (confirm("Confirm move?")) {
                                MoveEvent(event);
                            } else {
                                revertFunc();
                            }
                        }
                    }

                } else {
                    alert("You can only adjust your own items.");
                    revertFunc();
                }
            },
            eventRightclick: function (event, jsEvent, view) {
                if (event.MorsRecID == $('#HiddenMorsRecID').val() || isAdmin == "True") {
                    EventRightClicked(event);
                }
                //alert('an event has been rightclicked!');
                // Prevent browser context menu:
                return false;
            },
            eventResize: function (event, delta, revertFunc) {
                if (event.MorsRecID == $('#HiddenMorsRecID').val() || isAdmin == "True") {
                    var hd = new Date();
                    var nDate = new Date(event.start._d);
                    if (isAdmin) {
                        UpdateEvent(event.id, event.start, event.end);
                    } else {
                        if (nDate <= hd) {
                            revertFunc();
                            alert("Can not adjust Today or past dates.");
                        } else {
                            UpdateEvent(event.id, event.start, event.end);
                        }
                    }

                } else {
                    revertFunc();
                }
                if (event.MorsRecID != $('#HiddenMorsRecID').val() && isAdmin != "True") {
                    alert("You can only adjust your own items.");
                }
            },
            dayClick: function (date, allDay, jsEvent, view) {
                if (isMors == "True") {
                    ShowEventPopup(date);
                    var d = date;
                    var sd = moment(d).format('L');
                    $('#StartDate').val(sd);
                } 
            },
            viewRender: function (view, element) {
                if (!CalLoading) {
                    $('#calendar').fullCalendar('removeEventSource', sourceUserView);
                    if ($('#ShowMine').is(':checked')) {
                        $('#calendar').fullCalendar('addEventSource', sourceUserView); 
                    }
                    CombineLists();
                }
            }
        });


        // page is now ready, initialize the calendar...
        CalLoading = false;
       //88888888888888888888888888888888888888888888888888888888888888888***************
        function newScheduleRange(start, end, jsEvent, view) {
            var spanStartDate = start._d.toLocaleDateString();
            if (view.name == 'month') {
                spanStartDate = moment(spanStartDate, 'MM/DD/YYYY').add('days', 1).format('MM/DD/YYYY');
            } else {
                spanStartDate = moment(spanStartDate, 'MM/DD/YYYY').format('MM/DD/YYYY');
            }
            var spanEndDate = end._d.toLocaleDateString();
            spanEndDate = moment(spanEndDate, 'MM/DD/YYYY').format('MM/DD/YYYY');
            if (spanStartDate != spanEndDate && spanStartDate < spanEndDate) {
                var hd = new Date();
                var realDate = new Date(spanStartDate);
                if (realDate <= hd) {
                    alert("Choose a start date greater then Today.");
                } else {
                    $('#popupNewSpanForm').modal('show');
                $('#SpanStartHour').focus();
                //alert("The start is: " + spanStartDate);
                //alert("The end is: " + spanEndDate);
                $('#SpanStartDate').val(spanStartDate);
                $('#SpanEndDate').val(spanEndDate);
                }

            }

        }
        //88888888888888888888888888888888888888888888888888888888888888888***************
        //save span
        $('#btnSpanPopupSave').click(function() {
            $('#popupNewSpanForm').modal('hide');
            $('#popupWait').modal('show');
            var holdstart = $('#SpanStartDate').val() + " " + $('#SpanStartHour').val() + ":" + $('#SpanStartMinutes').val();
            var holdend = $('#SpanStartDate').val() + " " + $('#SpanEndHour').val() + ":" + $('#SpanEndMinutes').val();
            var dataRow = {
                'MorsRecID': $('#HiddenSpanMorsRecID').val(),
                'start': holdstart,
                'end': holdend,
                'className': $('#SpanclassType').val(),
                'spanstart': $('#SpanStartDate').val(),
                'spanend': $('#SpanEndDate').val()
            }
            SendNewSpan(dataRow);
            $('#popupWait').modal('hide');
        });
        //88888888888888888888888888888888888888888888888888888888888888888***************
        function SendNewSpan(dat) {
            $.ajax({
                type: 'POST',
                url: "Schedule/NewScheduleSpan",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(dat),
                success: function (response, textStatus, xhr) {
                    if (xhr.status == 200) {
                        $('#calendar').fullCalendar('refetchEvents');
                        //alert('New Schedule saved!');
                    } else {
                        alert('Error, could not copy schedule!');
                    }
                }
            });
        }
        //88888888888888888888888888888888888888888888888888888888888888888***************
        //save new event
        $('#btnPopupSave').click(function () {
            $('#popupEventForm').modal('hide');
            $('#popupWait').modal('show');
            var holdstart = $('#StartDate').val() + " " + $('#StartHour').val() + ":" + $('#StartMinutes').val();
            var holdend = $('#StartDate').val() + " " + $('#EndHour').val() + ":" + $('#EndMinutes').val();
            var dataRow = {
                'Title': $('#eventTitle').val(),
                'MorsRecID': $('#HiddenMorsRecID').val(),
                'StartTime': holdstart,
                'EndTime': holdend,
                'ClassType': $('#classType').val()
            }
            $.ajax({
                type: 'POST',
                url: "Schedule/NewSchedule",
                data: dataRow,
                success: function (response, textStatus, xhr) {
                    if (xhr.status == 200) {
                        $('#calendar').fullCalendar('refetchEvents');
                        $('#popupWait').modal('hide');
                        //alert('New Schedule saved!');
                    } else {
                        $('#popupWait').modal('hide');
                        alert('Error, could not save schedule!');
                    }
                }
            });
            ClearPopupFormValues();
        });

        //88888888888888888888888888888888888888888888888888888888888888888***************
        $('#btnDisplaySave').click(function () {
            $('#popupEventDisplayForm').modal('hide');
            $('#popupWait').modal('show');
            var holdstart = $('#DisplayStartDate').val() + " " + $('#DisplayStartHour').val() + ":" + $('#DisplayStartMinutes').val();
            var holdend = $('#DisplayStartDate').val() + " " + $('#DisplayEndHour').val() + ":" + $('#DisplayEndMinutes').val();
            var dataRow = {
                'SchRecID': $('#DisplayEventID').val(),
                'StartTime': holdstart,
                'EndTime': holdend,
                'ClassType': $('#DisplayclassType').val()
            }
            UpdateEventAll(dataRow);
            $('#calendar').fullCalendar('refetchEvents');
            $('#popupWait').modal('hide');
        });

        //88888888888888888888888888888888888888888888888888888888888888888***************
        $('#btnDisplayCopySave').click(function () {
            $('#popupEventCopyForm').modal('hide');
            $('#popupWait').modal('show');
            var holdstart = $('#CopyNewDate').val() + " " + $('#DisplayCopyStartHour').val() + ":" + $('#DisplayCopyStartMinutes').val();
            var holdend = $('#CopyNewDate').val() + " " + $('#DisplayCopyEndHour').val() + ":" + $('#DisplayCopyEndMinutes').val();
            var dataRow = {
                'MorsRecID': $('#DisplayCopyMorsRecID').val(),
                'StartTime': holdstart,
                'EndTime': holdend,
                'ClassType': $('#DisplayCopyclassType').val()
            }
            CopyEvent(dataRow);
            $('#calendar').fullCalendar('refetchEvents');
            $('#popupWait').modal('hide');
        });
        //88888888888888888888888888888888888888888888888888888888888888888***************
        //dept list
        $('#btnDeptLst').click(function() {
            CombineLists();
            // FormDeptList();
        });

        //88888888888888888888888888888888888888888888888888888888888888888***************
        //btnDirLst
        $('#btnDirLst').click(function () {
            CombineLists();
            //FormDirList();
        });
        //88888888888888888888888888888888888888888888888888888888888888888***************
        $('#ShowMine').click(function () {
            $('#popupWait').modal('show');
            if ($(this).is(':checked')) {
                $('#calendar').fullCalendar('addEventSource', sourceUserView);
            } else {
                $('#calendar').fullCalendar('removeEventSource', sourceUserView);
            }
            $('#popupWait').modal('hide');
        });
        //88888888888888888888888888888888888888888888888888888888888888888***************
        $('#ShowMOD').click(function () {
            if ($(this).is(':checked')) {
                viewMOD();
            } else {
                $('#popupWait').modal('show');
                var sourceMODView = {
                    url: 'Schedule/GetMODSched',
                    success: function() {
                        $('#popupWait').modal('hide');
                    },
                    error: function () {
                        $('#popupWait').modal('hide');
                        alert("An error occurred while updating");
                    }
                };
                $('#calendar').fullCalendar('removeEventSource', sourceMODView);
                $('#popupWait').modal('hide');
            }
        });
        //88888888888888888888888888888888888888888888888888888888888888888***************
        function CombineLists() {
            $('#popupWait').modal('show');
            DirUpdateComplete = false;
            DeptUpdateComplete = false;
            FormDirList();
            FormDeptList();
        }
        //88888888888888888888888888888888888888888888888888888888888888888***************
        $("#dirLstArea input[type=checkbox]").click(function() {
            CombineLists();
        });
        //88888888888888888888888888888888888888888888888888888888888888888***************
        $("#DeptListArea input[type=checkbox]").click(function() {
            CombineLists();
        });
        //88888888888888888888888888888888888888888888888888888888888888888***************
        function FormDirList() {

            var ed = false;
            if (isAdmin == "True") {
                ed = true;
            }
            var harray = [];
            $("#dirLstArea input[type=checkbox]").each(function () {
                if ($(this).is(":checked")) {
                    harray.push($(this).val());
                }
            });
            var dirList = {
                Names: harray
            };
            // var Names = ["Smith, Justin", "Barnard, Rusty"];
            var sourceDirView = {
                url: 'Schedule/GetSchedbyDir',
                traditional: true,
                data: dirList,
                editable: ed,
                success: function() {
                    DirUpdateComplete = true;
                    CloseWait();
                },
                error: function () {
                    DirUpdateComplete = true;
                    CloseWait();
                    alert("An error occurred while Updating.");
                }
        };
            $('#calendar').fullCalendar('removeEventSource', sourceDirView);
            $('#calendar').fullCalendar('addEventSource', sourceDirView);

        }
        //88888888888888888888888888888888888888888888888888888888888888888***************
        function FormDeptList() {
            var ed = false;
            if (isAdmin == "True") {
                ed = true;
            }

            var harray = [];
            $("#DeptListArea input[type=checkbox]").each(function () {
                if ($(this).is(":checked")) {
                    harray.push($(this).val());
                }
            });
            var dirList = {
                Names: harray
            };
            // var Names = ["Jarose, Justin", "Nelson, Rusty"];
            var sourceDepartmentView = {
                url: 'Schedule/GetSchedbyDept',
                traditional: true,
                data: dirList,
                editable: ed,
                success: function() {
                    DeptUpdateComplete = true;
                    CloseWait();
                },
                error: function () {
                    DeptUpdateComplete = true;
                    CloseWait();
                    alert("An error occurred while Updating.");
                    //$('#popupWait').modal('hide');
                }
            };
            $('#calendar').fullCalendar('removeEventSource', sourceDepartmentView);
            $('#calendar').fullCalendar('addEventSource', sourceDepartmentView);
        }
        //88888888888888888888888888888888888888888888888888888888888888888***************
        $('#AllDeparts').click(function () {
            if ($(this).val() == "All") {
                $(this).val("None");
                $("#DeptListArea input[type=checkbox]").each(function () {
                    $(this).prop('checked', true);
                });
            } else {
                $(this).val("All");
                $("#DeptListArea input[type=checkbox]").each(function () {
                    $(this).prop('checked', false);
                });
            }
            CombineLists();
            //FormDeptList();
        });
        //88888888888888888888888888888888888888888888888888888888888888888***************
        //88888888888888888888888888888888888888888888888888888888888888888***************
        $('#AllDirectors').click( function () {
            if ($(this).val() == "All") {
                $(this).val("None");
                $("#dirLstArea input[type=checkbox]").each(function() {
                    $(this).prop('checked', true);
                });
            } else {
                $(this).val("All");
                $("#dirLstArea input[type=checkbox]").each(function () {
                    $(this).prop('checked', false);
                });
            }
                CombineLists();
                //FormDirList();
            }
            );
        //88888888888888888888888888888888888888888888888888888888888888888***************
        $('#deleteItem').click(function() {
            if (confirm("Do you really want to Delete this Schedule?")) {
                DeleteRecord();
            } 
        });
        //88888888888888888888888888888888888888888888888888888888888888888***************
        function DeleteRecord() {
                var dataRow = {
                    'SchRecID': $('#DisplayEventID').val()
                }
                DeleteOneEvent(dataRow);
            }
        //88888888888888888888888888888888888888888888888888888888888888888***************
        //ViewMOD
        function viewMOD() {
            $('#popupWait').modal('show');
            var sourceMODView = {
                url: 'Schedule/GetMODSched',
                success: function () {
                    $('#popupWait').modal('hide');
                },
                error: function () {
                    $('#popupWait').modal('hide');
                    alert("An error occurred while updating");
                }
            };
            $('#calendar').fullCalendar('addEventSource', sourceMODView);
        }
        //88888888888888888888888888888888888888888888888888888888888888888***************
        function CloseWait() {
            if (DirUpdateComplete && DeptUpdateComplete) {
                $('#popupWait').modal('hide');
            }
        }
    });//end of doc ready




    //88888888888888888888888888888888888888888888888888888888888888888***************       
    $('#btnPopupCancel').click(function () {
        ClearPopupFormValues();
        $('#popupEventForm').modal('hide');
    });//88888888888888888888888888888888888888888888888888888888888888888***************
    function ShowEventPopup(date) {
        ClearPopupFormValues();
        //$('#popupEventForm').toggleClass('hidden');
        var hd = new Date();
        if (date > hd) {
            $('#popupEventForm').modal('show');
            $('#popupDisplayHeader').text("Enter New Schedule");
            $('#StartDate').focus();
        } else {
            alert("Can not create a schedule for Today or earlier.");
        }
    }
    //88888888888888888888888888888888888888888888888888888888888888888***************
    function EventRightClicked(event) {
        if (isAdmin == "True" || event.MorsRecID == $('#HiddenMorsRecID').val()) {
                $('#popupEventCopyForm').modal('show');
                $('#btnDisplayCopySave').focus();
                $('#DisplayCopyMorsRecID').val(event.MorsRecID);
                $('#TBDispalyCopyMorsName').val(event.MorsName);
                var hsd = new moment(event.start._i);
                var hed = new moment(event.end._i);
                $('#DisplayCopyStartDate').val(hsd.format("MM/DD/YYYY"));
                $('#DisplayCopyStartHour').val(hsd.format("HH"));
                $('#DisplayCopyStartMinutes').val(hsd.format("mm"));
                $('#DisplayCopyEndHour').val(hed.format("HH"));
                $('#DisplayCopyEndMinutes').val(hed.format("mm"));
                $('#DisplayCopyclassType').val(event.className);
                var htm = moment(hsd, 'MM/DD/YYYY').add('days', 1).format('MM/DD/YYYY');
                $('#CopyNewDate').val(htm);
            }
        }

Answer 2

修改eventRender回调:

eventRender:function(event, element, view)
       if( /* shall show the event */ ){
            return event;
       }
       else {
            return false;
       }
},

看看这个:http://fullcalendar.io/docs/event_rendering/eventRender/

(去年)编辑

eventRender:function(event, element, view)
       if( view.name == "agendaDay" ){
            return event;
       }
       else {
            return false;
       }
},

…RTM