Angular uiCalendar 不重新渲染事件答案

【问题标题】：Angular uiCalendar not redenring eventsAngular uiCalendar 不重新渲染事件
【发布时间】：2017-10-17 16:01:16
【问题描述】：

我正在尝试从 Angular ui 日历构建一个周调度程序，但我不断收到错误消息：'无法读取 null 的属性“格式”'并且我的事件列表都没有显示。所有依赖项都已导入，我在 index.html 上声明 ui 日历，如下所示：

<body ng-controller="MainCtrl">
<div class="row" on-load="renderCalendar('myCalendar');">
  <div class="col-md-4">
    <h1>All Events</h1>
    <ul>
      <li class="event" ng-repeat="event in eventSource">
        {{event.title}}
        <button type="button" class="btn btn-danger" ng-click="removeEvent($index)"> delete</button>
        </li>
    </ul>
  </div>
  <div class="col-md-8">
    <div ui-calendar="uiConfig.calendar" ng-model="eventSource" calendar="myCalendar"></div>
  </div>
</div>

我的角度模块声明：

var app = angular.module('calendar-app',
['ngResource',
'ui.calendar']
);

日历出现在页面上，但没有我的硬编码事件（事件在我的控制器中声明）。我在这里有这个调度程序的 plunker：https://plnkr.co/edit/Plscx3IiZb5h9cE7Wdv6?p=preview

我在相关问题上进行了很多搜索，但找不到解决此问题的方法。如何正确渲染这些事件？

【问题讨论】：

标签： javascript angularjs fullcalendar ui-calendar

【解决方案1】：

Cannot read property "format" of null 是与开始或结束时间相关的错误 - Fullcalendar 正在尝试格式化您的日期并失败。这是因为 Plunker 中显示的事件将开始和结束日期指定为 Javascript Date 对象：

{title: 'All Day Event',start: new Date(y, m, 6),allDay:true},

这不是 Fullcalendar 需要的格式 - as the docs describe，您需要使用：

Moment-ish 输入，例如 ISO8601 字符串。

ISO8601 字符串看起来像2017-10-18。如果您想坚持使用 Javascript 的 Date，一个快速解决方法是使用 toISOString()：

{title: 'All Day Event', start: new Date(y, m, 6).toISOString(), allDay:true},

您也可以切换到使用 Fullcalendar 所需的 Moment，因此已经可用：

{title: 'All Day Event', start: moment().date(6), allDay:true},

【讨论】：

在将所有事件更改为使用时刻输入后，我收到错误“无法读取未定义的属性 'myCalendar'”来自：`
` 所以我删除了 'myCalendar' 引用，因为我只有一个日历，控制台上没有错误，但我的日历上仍然看不到事件。这是生成的 plunkr ：plnkr.co/edit/Plscx3IiZb5h9cE7Wdv6?p=preview
你的 Plunker 对我根本不起作用，并且在控制台上显示各种 JS 库的 404。我不了解 Angular，因此无法在这方面为您提供帮助 - 但您的事件现在可以正常工作了，see this JSFiddle。
你的权利！此外，我使用的是旧版本的完整日历，结果发现有很多问题。现在可以了！谢谢。