ui-calendar无法正常运作，无法呈现事件 [英] ui-calendar is not working, not rendering events

问题描述

我已根据文档在控制器中声明了一系列事件

I have declared in my controller an array of events, per documentation

    eventSources: [
        {
            events: [
                { title: 'event1', start: '2017-09-27' },
                { title: 'event2', start: '2017-09-27', end: '2017-09-27' },
                { title: 'event3', start: '2017-09-27T12:30:00', }
            ]
        }
    ]

我添加了定义了ng-model的日历组件(vm是控制器的别名).

I added calendar component with ng-model defined (vm is an alias for controller).

我看到一个空白日历和大量错误消息，没有告诉我任何东西，而不是由这些事件填充的日历.怎么了?

有人要求输入完整的代码，不知道这对您有什么帮助，但是在这里，calendar.component.ts:

Someone asked to put full code, not sure how this is going to help, but here it is, calendar.component.ts:

namespace AppDomain {

    class CalendarComponent {
        public bindings: any;
        public controller: any;
        public controllerAs: string;
        public templateUrl: string;

        constructor() {
            this.controller = CalendarController;
            this.controllerAs = 'vm';
            this.templateUrl = '/app/calendar/calendar.component.html';
        }
    }

    class CalendarController {
        eventSources: [
            {
                events: [
                    { title: 'event1', start: '2017-09-27' },
                    { title: 'event2', start: '2017-09-27', end: '2017-09-27' },
                    { title: 'event3', start: '2017-09-27T12:30:00', }
                ]
            }
        ]

        constructor() { }

        $onInit() { }
    }

    angular.module('app').component('calendarComponent', new CalendarComponent());
}

and calendar.component.html:

And calendar.component.html:

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

希望这会有所帮助

更新

即使我这样添加ui-calendar，也没有任何用于事件的ng-model，

Even if I add ui-calendar like this, without any ng-model for events,

<div ui-calendar></div>

只是一个空白日历，我仍然遇到所有这些错误

just a blank calendar, I still get all these errors

UPDATE2

我当然也尝试过:

    events2: [
        { title: 'event1', start: '2017-09-27' },
        { title: 'event2', start: '2017-09-27', end: '2017-09-27' },
        { title: 'event3', start: '2017-09-27T12:30:00', }
    ]

然后

同样的问题

推荐答案

您不能使用空的 ui-calendar a.e.< div ui-calendar></div>

You cannot use empty ui-calendar a.e. <div ui-calendar></div>

应通过 ng-model

<div ng-model="events" ui-calendar="options"></div>

其中 events 是事件和选项的列表(可选)-日历配置

where events is a list of events and options (optional) - calendar configuration

所以您的问题出在事件结构中

So your problem is in events structure

eventSources 应该是数组数组

例如:

[
  [
    {
      "title": "Long Event",
      "start": "2017-09-27",
      "end": "2017-09-27"
    }
  ]
]

演示小提琴

这篇关于ui-calendar无法正常运作，无法呈现事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！