无法为FullCalendar AngularJS指令正确呈现日历

Question

我是AngularJS的新手，必须在我的网络应用程序中加入Admin LTE完整日历功能。我找到了ArshawFullCalendarJQuery插件的Angular指令。该指令的链接如下：http://angular-ui.github.io/ui-calendar/

虽然我可以显示日历，但我无法使上一个、今天和下一个功能为日历工作。这有助于在日历的月份之间切换。我知道这个功能在uiConfig中，但我不明白为什么这个功能没有被渲染。

下面是我的代码。我已经包含了插件所需的所有文件，但没有显示在index.html中。

index.html

<div class="col-xs-12" resize>
<h1>Calendar Page</h1>
<div class="calendar" ng-model="testevents" config="uiConfig.calendar" ui-calendar="{{uiConfig.calendar}}"></div> 

calendarController.js

app.controller("calendarController", ["$scope", "displayCalendar", "dialogs", "$filter", function ($scope, displayCalendar, dialogs, $filter) {
    $scope.$parent.pageTitle = "Displays Reporting Period Start and End Dates";
    /* config object */
    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: true,
            header: {
                left: 'title',
                center: '',
                right: 'today prev,next'
            },
            eventClick: $scope.alertOnEventClick,
            eventDrop: $scope.alertOnDrop,
            eventResize: $scope.alertOnResize,
            eventRender: $scope.eventRender
        }
    };

    $scope.form = {};
    $scope.testevents = {
        events: [
            {
                title: 'event1',
                start: '2015-12-12'
            },
            {
                title: 'event2',
                start: '2015-12-11'
            }
            // etc...
        ],
        color: 'yellow',   // an option!
        textcolor: 'black' // an option!
    };
}]);

Answer 1

更新：

查看github页面上的演示代码

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

我认为您需要将您的更改为：

<div class="calendar" ng-model="testevents" calendar="myCalendar1" ui-calendar="uiConfig.calendar"></div>

这是他们演示的.html页面

https://github.com/angular-ui/ui-calendar/blob/master/demo/index.html

你是否也在应用程序初始化中添加了ui日历组件？

'var myAppModule=angular.module（'myApp'，[]）；'

在[]中，通常必须注入第三方组件，以便其他控制器可以看到它。

Answer 2

好的。。因此，经过数小时的调试，我发现了问题所在。我还包括了fullcalendar.print.css，它抛弃了fullcaleandar.css的样式。因此，一个建议是，如果按钮没有正确呈现，你可能需要考虑检查CSS并删除fullcalendar.print.CSS.