FullCalendar event does not remove when the events array empty - angularjs

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 code
<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 changes
<div ui-calendar="uiConfig.calendar" class="span2 calendar" ng-model="eventSources" id="calendar"></div>
js change
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);
updated link is working fine. check that link
FIDDLE SOLUTION LINK

Answer 2

Tried all of the above. But only the following worked
$scope.events.length = 0;