Question

js code

(function(){
    angular.module('calendarApp',['ngGrid', 'ui.calendar', 'ui.bootstrap'])
    .controller('calendarCtrl',function($scope){
        $scope.selectedGridItems = [];
        $scope.test = [{
            "id": 1,
            "date": "01/09/2014T00:00:00",
            "details": "test1",
            "check": false,
            "check1": false
        }, {
            "id": 2,
            "date": "02/09/2014T00:00:00",
            "details": "test2",
            "check": false,
            "check1": false
        }, {
            "id": 3,
            "date": "03/09/2014T00:00:00",
            "details": "test3",
            "check": false,
            "check1": false
        }, {
            "id": 4,
            "date": "04/09/2014T00:00:00",
            "details": "test4",
            "check": false,
            "check1": false
        }, {
            "id": 5,
            "date": "05/09/2014T00:00:00",
            "details": "test5",
            "check": false,
            "check1": false
        }, {
            "id": 6,
            "date": "06/09/2014T00:00:00",
            "details": "test6",
            "check": false,
            "check1": false
        }, {
            "id": 7,
            "date": "07/09/2014T00:00:00",
            "details": "test7",
            "check": false,
            "check1": false
        }, {
            "id": 8,
            "date": "08/09/2014T00:00:00",
            "details": "test8",
            "check": false,
            "check1": false
        }, {
            "id": 9,
            "date": "09/09/2014T00:00:00",
            "details": "test9",
            "check": false,
            "check1": false
        }, {
            "id": 10,
            "date": "10/09/2014T00:00:00",
            "details": "test10",
            "check": false,
            "check1": false
        }, {
            "id": 11,
            "date": "11/09/2014T00:00:00",
            "details": "test11",
            "check": false,
            "check1": false
        }, {
            "id": 12,
            "date": "12/09/2014T00:00:00",
            "details": "test12",
            "check": false,
            "check1": false
        }, {
            "id": 13,
            "date": "13/09/2014T00:00:00",
            "details": "test13",
            "check": false,
            "check1": false
        }, {
            "id": 14,
            "date": "14/09/2014T00:00:00",
            "details": "test14",
            "check": false,
            "check1": false
        }];
        $scope.ngGridOptions = {
            data: 'test',
            multiSelect: false,
            columnDefs: [{
                field: "id",
                displayName: "ID",
                width: "50px"
            }, {
                field: "date",
                displayName: "Date",
                width: "100px"
            }, {
                field: "details",
                displayName: "Details"
            }, {
                field: "check",
                displayName: "",
                cellTemplate: "<div class='ngCellText'><input type='checkbox' ng-checked='COL_FIELD' ng-model='COL_FIELD' ng-change='selectChange(row,COL_FIELD)' /></div>",
                width: "20px"
            }, {
                field: "check1",
                displayName: "",
                cellTemplate: "<div class='ngCellText'><input type='checkbox' ng-checked='COL_FIELD' ng-model='COL_FIELD' ng-change='selectChange1(row,COL_FIELD)' /></div>",
                width: "20px"
            }]
        };
     /* ----------------Calendar Control----------------- */
        $scope.alertOnEventClick=function( event, allDay, jsEvent)
        {
          debugger;  
        };

        $scope .events = [];
        $scope.eventSources = [$scope.events];

        $scope.uiConfig = {
            calendar: {
                height: 450,
                editable: false,
                disableDragging:false,
                header: {
                    left: 'title',
                    center: '',
                    right: 'today prev,next'
                },
                eventClick:$scope.alertOnEventClick
            }
        };

    /* ---------------------- ends ---------------------- */

        $scope.selectChange = function (row, value) {
            var className= (value) ? ((row.entity.check1) ? "row-selected-blue-green" : "row-selected-blue") : ((row.entity.check1) ? "row-selected-green" : "");

            if (typeof(_.find($scope.events, function (item) {return item.id == moment(row.entity.date,'DD/MM/YYYYThh:mm:ss').format('MMMDDYYYY');})) == 'undefined') {
                $scope.events.push({
                    id: moment(row.entity.date,'DD/MM/YYYYThh:mm:ss').format('MMMDDYYYY'),
                    title: moment(row.entity.date,'DD/MM/YYYYThh:mm:ss').format('MMMDDYYYY'),
                    start: moment(row.entity.date,'DD/MM/YYYYThh:mm:ss'),
                    className: [className]
                });
            } else {
                _.find($scope.events, function (item) {
                    return item.id == moment(row.entity.date,'DD/MM/YYYYThh:mm:ss').format('MMMDDYYYY');
                }).className = [className];
            }

            var elem = row.elm;
            if (row.entity.check || row.entity.check1) {
                $(elem).addClass('row-color');
            } else if (!row.entity.check && !row.entity.check1) {            
                var index =$scope.events.indexOf(_.find($scope.events, function (item) {return item.id == moment(row.entity.date,'DD/MM/YYYYThh:mm:ss').format('MMMDDYYYY');}));
                $scope.events.splice(index, 1);
                $(elem).removeClass('row-color');
            }        
        };

        $scope.selectChange1 = function (row, value) {        
            var className = (value) ? ((row.entity.check) ? "row-selected-blue-green" : "row-selected-green") : ((row.entity.check) ? "row-selected-blue" : "");

            if (typeof(_.find($scope.events, function (item) {return item.id == moment(row.entity.date,'DD/MM/YYYYThh:mm:ss').format('MMMDDYYYY');})) == 'undefined') {
                $scope.events.push({
                    id: moment(row.entity.date,'DD/MM/YYYYThh:mm:ss').format('MMMDDYYYY'),
                    title: moment(row.entity.date,'DD/MM/YYYYThh:mm:ss').format('MMMDDYYYY'),
                    start: moment(row.entity.date,'DD/MM/YYYYThh:mm:ss'),
                    className: [className]
                });
            } else {
                _.find($scope.events, function (item) {
                    return item.id == moment(row.entity.date,'DD/MM/YYYYThh:mm:ss').format('MMMDDYYYY');
                }).className = [className];
            }

            var elem = row.elm;
            if (row.entity.check || row.entity.check1) {
                $(elem).addClass('row-color');
            } else if (!row.entity.check && !row.entity.check1) {
                var index = $scope.events.indexOf(_.find($scope.events, function (item) {
                    return item.id == moment(row.entity.date,'DD/MM/YYYYThh:mm:ss').format('MMMDDYYYY');
                }));
                $scope.events.splice(index, 1);
                console.log($scope.events);
                $(elem).removeClass('row-color');
            }        
        };


        $scope.rowScroll = function (item) {
            $(item.elm).fadeTo(500, 0.5).fadeTo(700, 1.0);
            var grid = $scope.ngGridOptions.ngGrid;
            var dataIndex = $scope.ngGridOptions.ngGrid.data.indexOf(item.entity);
            $scope.ngGridOptions.selectItem(dataIndex, true);
            grid.$viewport.scrollTop(dataIndex * grid.config.rowHeight);
        };
    });
})();

Html代码

    <div ng-app="calendarApp">
        <div ng-controller="calendarCtrl">
            <div ng-grid="ngGridOptions" class="gridStyle"></div>
<div ui-calendar="uiConfig.calendar" class="span2 calendar" ng-model="eventSources"></div>
        </div>
    </div>

FIDDLE LINK

Answer 1

html更改

<div ui-calendar="uiConfig.calendar" class="span2 calendar" ng-model="eventSources" id="calendar"></div>

js改变

 var item = _.find($scope.events, function (item) {
                    return item.id == moment(row.entity.date,'DD/MM/YYYYThh:mm:ss').format('MMMDDYYYY');
                });
                $("div#calendar").fullCalendar('removeEvents',item.id);
                $scope.events.splice(($scope.events.indexOf(item)),1);

更新链接工作正常。检查那个链接 FIDDLE SOLUTION LINK

Answer 2

尝试了以上所有方面。但只有以下工作

$scope.events.length = 0;

当events数组为空时，不会删除FullCalendar事件

2 个答案: