角度日历集成无法加载答案

【问题标题】：Angular Calendar integration not able to load角度日历集成无法加载
【发布时间】：2017-12-04 15:22:25
【问题描述】：

我正在尝试包含 angular ui-calendar 组件。我按照网站的步骤 1.https://github.com/angular-ui/ui-calendar 和 2.http://www.oodlestechnologies.com/blogs/Fullcalendar-Walk-through-with-AngularJS

通过

安装组件

bower install angular-ui-calendar

在 html 文件中加载组件

<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/>

包含对应用程序的依赖

var app = angular.module('myCalendarApp', ['ui.calendar'])

在 UI 中插入就像

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

在控制器中创建静态事件和配置

$scope.eventSources = [];
$scope.uiConfig = {
    calendar:{
        height: 450,
        editable: true,
        header:{
            left: 'month basicWeek basicDay agendaWeek agendaDay',
            center: 'title',
            right: 'today prev,next'
        },
        eventClick: $scope.eventClick
    }
};      
$scope.eventClick = function(event){ 
    alert("Clicked event === "+event.title);
};
var events = [
    {title: 'All Day Event',start: new Date('Sun Dec 17 2017 09:00:00 GMT+0530 (IST)')},
    {title: 'Long Event',start: new Date('Thu Dec 21 2017 10:00:00 GMT+0530 (IST)'),end: new Date('Thu Dec 21 2017 17:00:00 GMT+0530 (IST)')},
    {id: 999,title: 'Repeating Event',start: new Date('Mon Dec 4 2017 09:00:00 GMT+0530 (IST)'),allDay: false}
];
$scope.eventSources = [events];

当我尝试在浏览器中验证日历时，它会抛出以下错误

TypeError: calendar.fullCalendar is not a function
at Scope.scope.initCalendar (calendar.js:286)
at Object.fn (calendar.js:358)
at Scope.$digest (angular.js:15896)
at Scope.$apply (angular.js:16160)
at WindowsCtrl.window.showDialog.$scope.showDialog (controller.js:690)
at HTMLSpanElement.onclick (VM4670 windows:1)

谁能帮我解决这个问题。

【问题讨论】：

您是否加载了 fullcalendar.js 文件？
是的。似乎只包含css。 <script src="fullcalendar.js"></script>在哪里？
我已经包含了所有必要的脚本和css文件@rolodex

标签： javascript jquery angularjs fullcalendar

【解决方案1】：

您需要包含所有依赖项并将其从您的 HTML 连接起来

<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/>
<!-- jquery, moment, and angular have to get included before fullcalendar -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/gcal.js"></script>

【讨论】：

我已经包含了所有必要的脚本和 css 文件

【解决方案2】：

感谢所有提出解决问题建议的人。

我解决了这个问题。 angular-ui-calendar/src/calendar.js 文件中存在一些问题。在 init 和 destroy 方法中，他们使用 angular.element 方法创建组件，但如果我用 jQuery 更改它，它就解决了问题。

参考：https://github.com/angular-ui/ui-calendar/issues/267

【讨论】：