Angularjs完整的日历不显示事件 [英] Angularjs Full Calendar doesn't display events

问题描述

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

I am using that https://github.com/angular-ui/ui-calendar to use the FullCalendar in Angularjs.

这显示日历，并显示错误;

It displays the calendar and showing no errors;

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

但它不会显示该事件，我不知道如果我这样做是正确的，但也没有任何错误，我通过网络搜索，并没有找到一个解决办法呢。任何人可以给我一个提示，为什么它不工作？

but it wont display the events, i am not sure if i am doing it right, but it shows no error and i search through the internet and didnt find a solution yet. Could anybody give me a hint why its not working?

下面是code片断：

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个事件应在日历中显示，但没有任何反应......

so i wanted that the user chooses a color, and then 3 events should show up in the Calendar, but nothing happens...

推荐答案

下面，在你的 eventSources 您已经直接输入的事件。

Here, in your eventSources you have entered the events directly.

你应该做的是提供您已存储在您的活动阵列的列表。
事情是这样的：
$ scope.eventSources = [$ scope.myEvents，$ scope.someOtherArray，$ scope.otherEvents];

What you should do is provide a list of arrays in which you have stored your events. Something like this: $scope.eventSources = [$scope.myEvents, $scope.someOtherArray, $scope.otherEvents];

和 $ scope.myEvents ，你可以把你的事件。

and in $scope.myEvents, you can put your events.

$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 可以是其他来源的事件。

$scope.someOtherArray, $scope.otherEvents can be some other source for events.

至于颜色方面，你可以自定义他们要么通过事件对象或< A HREF =htt​​p://fullcalendar.io/docs/event_data/Event_Source_Object/相对=nofollow>事件源对象

As far as colors are concerned, you can customize them either through events object or event source object

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

您可以修改code使用上述两种方法中提到的（访问这些链接）。

You can modify your code to use either of the above two mentioned approaches(Visit those links).

这篇关于Angularjs完整的日历不显示事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！