Question

我是AngularJS的新手，必须在我的webapp中加入Admin LTE完整日历功能。我找到了Arshaw FullCalendar JQuery插件的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-calendar组件？

＆＃39; var myAppModule = angular.module（＆＃39; myApp＆＃39;，[]）;＆＃39;

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

Answer 2

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

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

2 个答案: