AngularJS UI日歷不刷新日歷上的事件（手動刷新日歷（F5））

Question

我是編程的新手，所以我遵循了本教程http://www.mitechdev.com/2016/07/crud-operations-on-angular-ui-calendar.html ，但是在提交形成。 刷新頁面后顯示的新的/修改的/刪除的數據。 我也嘗試了“ .fullCalendar（'refetchEvents'）”，但是沒有任何效果。 基本上，我想做的是提交表單（關閉模式）時要在日歷中顯示的數據。 先感謝您。

更新-我的腳本在這里：

 <script> var app = angular.module('myapp', ['ui.calendar', 'ui.bootstrap']); app.controller('CalenderController', ['$scope', '$http', 'uiCalendarConfig', '$uibModal', function ($scope, $http, uiCalendarConfig, $uibModal) { $scope.SelectedEvent = null; var isFirstTime = true; $scope.events = []; $scope.eventSources = [$scope.events]; $scope.NewEvent = {}; //this function for get datetime from json date function getDate(datetime) { if (datetime != null) { var mili = datetime.replace(/\\/Date\\((-?\\d+)\\)\\//, '$1'); return new Date(parseInt(mili)); } else { return ""; } } // this function clears clender enents function clearCalendar() { if (uiCalendarConfig.calendars.myCalendar != null) { uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents'); uiCalendarConfig.calendars.myCalendar.fullCalendar('unselect'); } } //Load events from server to display on caledar function populate() { clearCalendar(); $http.get('/Test/GetEvents', { cache: false, params: {} }).then(function (data) { $scope.events.slice(0, $scope.events.length); angular.forEach(data.data, function (value) { $scope.events.push({ id: value.EventID, title: value.Title, description: value.Description, start: new Date(parseInt(value.StartAt.substr(6))), end: new Date(parseInt(value.EndAt.substr(6))), allDay: value.IsFullDay, stick: true }); }); }); } populate(); //UI- calendar configuration $scope.uiConfig = { calendar: { //height: 450, height: 650, editable: true, displayEventTime: true, header: { left: 'month,agendaWeek,agendaDay', center: 'title', right: 'today prev,next' }, timeFormat: { month: ' ', // for hide on month view agenda: 'h:mm t' }, selectable: true, selectHelper: true, select: function (start, end) { var fromDate = moment(start).format('YYYY/MM/DD LT'); var endDate = moment(end).format('YYYY/MM/DD LT'); $scope.NewEvent = { EventID: 0, StartAt: fromDate, EndAt: endDate, IsFullDay: false, Title: '', Description: '' } $scope.ShowModal(); }, eventClick: function (event) { $scope.SelectedEvent = event; var fromDate = moment(event.start).format('YYYY/MM/DD LT'); var endDate = moment(event.end).format('YYYY/MM/DD LT'); $scope.NewEvent = { EventID: event.id, StartAt: fromDate, EndAt: endDate, IsFullDay: false, Title: event.title, Description: event.description } $scope.ShowModal(); }, eventAfterAllRender: function () { if ($scope.events.length > 0 && isFirstTime) { uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start); isFirstTime = false; } } } }; //This function shows bootstrap modal dialog $scope.ShowModal = function () { $scope.option = { templateUrl: 'modalContent.html', controller: 'modalController', backdrop: 'static', resolve: { NewEvent: function () { return $scope.NewEvent; } } }; //CRUD operations on Calendar starts here var modal = $uibModal.open($scope.option); modal.result.then(function (data) { $scope.NewEvent = data.event; switch (data.operation) { case 'Save': //save $http({ method: 'POST', url: '/Test/SaveEvent', data: $scope.NewEvent }).then(function (response) { if (response.data.status) { populate(); } }) break; case 'Delete': //delete $http({ method: 'POST', url: '/Test/DeleteEvent', data: { 'eventID': $scope.NewEvent.EventID } }).then(function (response) { if (response.data.status) { populate(); } }) break; default: break; } }, function () { console.log('Modal dialog closed'); }) } }]) app.controller('modalController', ['$scope', '$uibModalInstance', 'NewEvent', function ($scope, $uibModalInstance, NewEvent) { $scope.NewEvent = NewEvent; $scope.Message = ""; $scope.ok = function () { if ($scope.NewEvent.Title.trim() != "") { $uibModalInstance.close({ event: $scope.NewEvent, operation: 'Save' }); } else { $scope.Message = "Event title required!"; } } $scope.delete = function () { $uibModalInstance.close({ event: $scope.NewEvent, operation: 'Delete' }); } $scope.cancel = function () { $uibModalInstance.dismiss('cancel'); } }]) </script> 

更新2（還是一樣）：

 <script> var app = angular.module('myapp', ['ui.calendar', 'ui.bootstrap']); app.controller('CalenderController', ['$scope', '$http', 'uiCalendarConfig', '$uibModal', function ($scope, $http, uiCalendarConfig, $uibModal) { $scope.SelectedEvent = null; var isFirstTime = true; $scope.events = []; $scope.eventSources = [$scope.events]; $scope.NewEvent = {}; //this function for get datetime from json date function getDate(datetime) { if (datetime != null) { var mili = datetime.replace(/\\/Date\\((-?\\d+)\\)\\//, '$1'); return new Date(parseInt(mili)); } else { return ""; } } //Test refresh events in calendar ///////////////////////////////////////////////////////////////////////// function refreshCalendar() { clearEvents(); clearCalendar(); //$timeout(function () { // uiCalendarConfig.calendars.myCalendar.fullCalendar('rerenderEvents'); //}); //uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents'); //uiCalendarConfig.calendars.myCalendar.fullCalendar('addEventSource', events); //$scope.events.fullCalendar('refetchEvents'); uiCalendarConfig.calendars.myCalendar.fullCalendar('refetchEvents'); //uiCalendarConfig.calendars['myCalendar'].fullCalendar('refetchEvents'); //$scope.myCalendar.fullCalendar('refetchEvents'); //uiCalendarConfig.calendars.myCalendar.fullCalendar('refreshEvents'); //$scope.calendar.fullCalendar('refetchEvents'); //window.calendar.fullCalendar('referchEvents'); } function clearEvents() { uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents'); } // this function clears clender enents function clearCalendar() { if (uiCalendarConfig.calendars.myCalendar != null) { uiCalendarConfig.calendars.myCalendar.fullCalendar('removeEvents'); //uiCalendarConfig.calendars.myCalendar.fullCalendar('refresh'); uiCalendarConfig.calendars.myCalendar.fullCalendar('unselect'); } } //Load events from server to display on caledar function populate() { clearCalendar(); //debugger; $http.get('/Test/GetEvents', { cache: false, params: {} }).then(function (data) { $scope.events.slice(0, $scope.events.length); angular.forEach(data.data, function (value) { $scope.events.push({ id: value.EventID, title: value.Title, description: value.Description, start: new Date(parseInt(value.StartAt.substr(6))), end: new Date(parseInt(value.EndAt.substr(6))), allDay: value.IsFullDay, stick: true }); }); }); } populate(); //UI- calendar configuration $scope.uiConfig = { calendar: { //height: 450, height: 650, editable: true, displayEventTime: true, header: { left: 'month,agendaWeek,agendaDay', center: 'title', right: 'today prev,next' }, timeFormat: { month: ' ', // for hide on month view agenda: 'h:mm t' }, selectable: true, selectHelper: true, select: function (start, end) { var fromDate = moment(start).format('YYYY/MM/DD LT'); var endDate = moment(end).format('YYYY/MM/DD LT'); $scope.NewEvent = { EventID: 0, StartAt: fromDate, EndAt: endDate, IsFullDay: false, Title: '', Description: '' } $scope.ShowModal(); }, eventClick: function (event) { $scope.SelectedEvent = event; var fromDate = moment(event.start).format('YYYY/MM/DD LT'); var endDate = moment(event.end).format('YYYY/MM/DD LT'); $scope.NewEvent = { EventID: event.id, StartAt: fromDate, EndAt: endDate, IsFullDay: false, Title: event.title, Description: event.description } $scope.ShowModal(); }, eventAfterAllRender: function () { if ($scope.events.length > 0 && isFirstTime) { uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start); isFirstTime = false; } } } }; //This function shows bootstrap modal dialog $scope.ShowModal = function () { $scope.option = { templateUrl: 'modalContent.html', controller: 'modalController', backdrop: 'static', resolve: { NewEvent: function () { return $scope.NewEvent; } } }; //CRUD operations on Calendar starts here var modal = $uibModal.open($scope.option); modal.result.then(function (data) { $scope.NewEvent = data.event; //debugger; switch (data.operation) { case 'Save': //save $http({ method: 'POST', url: '/Test/SaveEvent', data: $scope.NewEvent }).then(function (response) { if (response.data.status) { populate(); refreshCalendar(); // //$scope.calendar.fullCalendar('render'); // //$scope.calendar.fullCalendar('refetchEvents'); } }) break; case 'Delete': //delete $http({ method: 'POST', url: '/Test/DeleteEvent', data: { 'eventID': $scope.NewEvent.EventID } }).then(function (response) { if (response.data.status) { populate(); } }) break; default: break; } }, function () { console.log('Modal dialog closed'); }) } }]) app.controller('modalController', ['$scope', '$uibModalInstance', 'NewEvent', function ($scope, $uibModalInstance, NewEvent) { $scope.NewEvent = NewEvent; $scope.Message = ""; $scope.ok = function () { if ($scope.NewEvent.Title.trim() != "") { $uibModalInstance.close({ event: $scope.NewEvent, operation: 'Save' }); } else { $scope.Message = "Event title required!"; } } $scope.delete = function () { $uibModalInstance.close({ event: $scope.NewEvent, operation: 'Delete' }); } $scope.cancel = function () { $uibModalInstance.dismiss('cancel'); } }]) </script> 

也遵循了本教程： http : //www.dotnetawesome.com/2016/05/part-2-crud-operation-on-fullcalender.html ，但存在相同的問題。

找出問題所在 -不完全支持IE。

Answer 1

在INSERT / UPDATE / DELETE事件上調用RefreshCalendar（）函數

function RefreshCalendar() {       
    ClearEvents();
    $('#calendar').fullCalendar('refetchEvents');
}
function ClearEvents() {
    $('#calendar').fullCalendar('removeEvents');
}