无法运行 ui-calendar 错误：未定义不是函数

Question

我正在尝试在我的 ionic 应用程序中实现 ui-calendar，并且遇到了一些严重的问题，我已按照https://github.com/angular-ui/ui-calendar 文档中的说明进行操作，但是无论我如何尝试让日历不呈现任何内容工作中。我试图让日历从我在 MySQL 服务器上设置的 PHP 页面中的 json 提要中提取事件数据。该页面很好地显示了事件数据，我也在我的应用程序的类似工作功能中使用了相同的代码。

这是我的 html 的标题：

<script type="text/javascript" src="lib/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="lib/jquery-ui/ui/jquery-ui.js"></script>
    <!--other libs-->
    <!--<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>-->

    <!--ionic libs-->
    <link rel="stylesheet" href="lib/ionic/css/ionic.css">
    <script src="lib/ionic/js/ionic.bundle.js"></script>


    <!--My App-->
    <link rel="stylesheet" href="css/style.css">
    <script src="js/app.js"></script>


    <!--will 404 during the dev stage--> 
     <script src="cordova.js"></script>

    <!--Fullcalendar libs-->
    <script type="text/javascript" src="lib/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="lib/jquery-ui/ui/jquery-ui.js"></script>
    <!--<script type="text/javascript" src="lib/angular/angular.js"></script>-->
    <script type="text/javascript" src="lib/angular-ui-calendar/src/calendar.js"></script>
    <script type="text/javascript" src="lib/fullcalendar/fullcalendar.js"></script>
    <script type="text/javascript" src="lib/fullcalendar/gcal.js"></script>

这是我的 ui 日历的控制器：

App.controller('calCtrl', function ($scope, $rootScope, $log, $state)
{
$scope.eventSources = [ 
/* event source that pulls from google.com */
         function() {
            var userData = $.ajax( {
                url: 'urlHere',
                method: 'GET',
                dataType: 'json',
                success: function(userData) {
                    //console.log(userData);
                    var user_count = userData.length;
                    var source = [];
                    var jsonData = [];
                    // Create the sources
                    for (var i = 0; i < user_count; i++)
                    {
                        var uid = userData[i].ID;
                        if(!source[i]) source[i] = [];
                        source[i] = 'urlHere?e=' + uid;

                        // Add each source to a JSON feed object
                        jsonData.push({
                            url: source[i],
                            type: 'GET',
                            color: userData[i].cal_color,
                            textColor: userData[i].txt_color,
                            error: function() { alert('There was an error loading calendar data.');}
                        });
                    }
console.log(jsonData); // In the console I can see well formed JSON data
                    return jsonData;
                }
            }); 
        }
];
});

日历控制器是唯一与 ui-calendar github 页面上的文档不同的地方。我没有看到我在这里缺少什么，这让我已经停滞了一段时间。任何帮助将不胜感激！

Answer 1

尝试用这个替换你的代码：

$scope.eventSources = [
    {
        events: [
            {
                title: 'Event1',
                start: '2011-04-04'
            },
            {
                title: 'Event2',
                start: '2011-05-05'
            }
            // etc...
        ],
        color: 'yellow',   // an option!
        textColor: 'black' // an option!
    }
];

如果可行，

$scope.eventSources = [
    {
        events: function() {
            var userData = $.ajax( {
                url: 'urlHere',
                method: 'GET',
                dataType: 'json',
                success: function(userData) {
                    //console.log(userData);
                    var user_count = userData.length;
                    var source = [];
                    var jsonData = [];
                    // Create the sources
                    for (var i = 0; i < user_count; i++)
                    {
                        var uid = userData[i].ID;
                        if(!source[i]) source[i] = [];
                        source[i] = 'urlHere?e=' + uid;

                        // Add each source to a JSON feed object
                        jsonData.push({
                            url: source[i],
                            type: 'GET',
                            color: userData[i].cal_color,
                            textColor: userData[i].txt_color,
                            error: function() { alert('There was an error loading calendar data.');}
                        });
                    }
                    console.log(jsonData); // In the console I can see well formed JSON data
                    return jsonData;
                }
            }); 
        }
    }
];

您可以在文档中看到 eventSour 的所有选项： http://arshaw.com/fullcalendar/docs/event_data/Event_Source_Object/