AngularJS UI日历未在日历上刷新事件(手动刷新日历(F5))

时间:2017-04-20 06:55:10

标签: angularjs asp.net-mvc ui-calendar

我是编程新手所以我遵循了本教程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。

1 个答案:

答案 0 :(得分:1)

在INSERT / UPDATE / DELETE事件上调用 RefreshCalendar()函数

Content-Type