Angularjs完整日历不显示事件答案

【问题标题】：Angularjs Full Calendar doesn't display eventsAngularjs完整日历不显示事件
【发布时间】：2017-07-02 02:45:31
【问题描述】：

我正在使用 https://github.com/angular-ui/ui-calendar 在 Angularjs 中使用 FullCalendar。

它显示日历并且没有错误；

<div class="calendar" ng-model="eventSources" id="eventCalendar" calendar="calendar" config="uiConfig.calendar" ui-calendar="uiConfig.calendar"></div>

但它不会显示事件，我不确定我是否做得对，但它没有显示错误，我通过互联网搜索并没有找到解决方案。谁能给我一个提示为什么它不起作用？

这里是sn-p的代码：

var calApp = angular.module('usercalapp', ['ui.bootstrap','dialogs','ngCookies','ui.calendar']);

calApp.controller('UserCtrl', function ($scope, $http, $rootScope, $timeout,,$dialogs,$cookieStore,$compile,uiCalendarConfig) 
{
    $scope.eventSources = [];
    $scope.calendar = $('#calendar');

    $scope.uiConfig = {
       calendar : {
          height: 450,
           editable: true,
           header: {
            left: 'month basicWeek basicDay',
            center: 'title',
            right: 'today prev, next'
            },
        dayClick: $scope.alertEventOnClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnSize
    }
};

$scope.cal_func = function()
{
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $scope.eventSources = [
    {
        title: 'All Day Test Event',
        start: new Date(y, m, 1)
    },
    {
        title: 'Long Test Event',
        start: new Date(y, m, d - 5),
        end: new Date(y, m, d - 2)
    },
    {
        title: 'Test Birthday Party',
        start: new Date(y, m, d + 1, 19, 0),
        end: new Date(y, m, d + 1, 22, 30),
        allDay: false
    }];

    $scope.calendar.fullCalendar('refetchEvents');
};

$scope.showColorPicker = function(index)
{
    $cookieStore.showuserid = index;
    dlg = $dialogs.create('/dialogs/pickColor.html','pickColorCtrl',{},{key:false ,back:'static'});

    dlg.result.then(function()      
    {       
        $scope.cal_func();
    });
};

....

所以我希望用户选择一种颜色，然后日历中应该会显示 3 个事件，但没有任何反应...

【问题讨论】：

标签： javascript angularjs fullcalendar

【解决方案1】：

在这里，您在eventSources 中直接输入了事件。

您应该提供一个数组列表，其中存储了您的事件。像这样的东西： $scope.eventSources = [$scope.myEvents, $scope.someOtherArray, $scope.otherEvents];

在$scope.myEvents 中，您可以放置您的事件。

$scope.myEvents = [
  {
    title: 'All Day Test Event',
    start: new Date(y, m, 1)
  },
  {
    title: 'Long Test Event',
    start: new Date(y, m, d - 5),
    end: new Date(y, m, d - 2)
  },
  {
    title: 'Test Birthday Party',
    start: new Date(y, m, d + 1, 19, 0),
    end: new Date(y, m, d + 1, 22, 30),
    allDay: false
  }
];

$scope.someOtherArray, $scope.otherEvents 可以是其他事件来源。

就颜色而言，您可以通过events object 或event source object 自定义它们

$scope.someOtherArray = [];
$scope.weeklyEvents = {
    color: '#656565',
    textColor: 'white',
    events: []
};
$scope.otherEvents = {
    color: '#B2B2B2',
    textColor: 'black',
    events: []
};

您可以修改代码以使用上述两种方法中的任何一种（访问这些链接）。

【讨论】：

您需要在$scope.eventSources = []; 中提供数组列表，即代码中的第 4 行（在控制器内）。这是日历查找事件的地方，在您的情况下是空的。
是的，我已经尝试使用 $scope.events 然后将其推送到 $scope.eventSources 中，但它也没有成功....一开始不应该有任何事件，就是这样为什么我希望 eventSources 为空。用户必须选择一种颜色来显示一些事件，但它们不显示，我读到我需要编写 $scope.calendar.fullCalendar('refetchEvents');但这仍然没有改变任何东西......
使用$scope.eventSources = [$scope.events];。如果您不想要任何事件，请保留 $scope.events= []; 并根据您的要求将事件推送到其中。
我试过了，但它仍然没有显示任何事件，我在 $scope.events 中写了一个事件，并且显示了这个事件，但是当我进入函数并尝试'removeEvents ' 并覆盖 $scope.events 和 'addEventSource' 没有任何效果......但是在函数 $scope.eventSources 的末尾有数据但它不会显示在日历中，为什么？？
我不明白你所说的“当我进入函数并尝试'removeEvents'并覆盖$scope.events和'addEventSource'时没有任何作用...... "，你能创建一个重现你的问题的 plunk 吗？这将对调试有很大帮助。

【解决方案2】：

对我有用的是。

而不是这个。

$scope.eventSources = [$scope.myEvents, $scope.someOtherArray, $scope.otherEvents];

试试这个

$scope.eventSources.push($scope.myEvents);

【讨论】：

【解决方案3】：

我用过

$scope.callCalendar = function (){
... ...
};

在html文件中：

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

事件未显示在日历中；但我发现$scope.events 在console.log($scope.events) 中有正确的值。

【讨论】：