Question

这是一个项目管理应用程序，有很多项目有开始日期和结束日期。

我希望有一个计划页面，显示带有时间线的项目，例如甘特聊天。每个项目消耗该表的一行，时间线（持续时间）在年度日历中突出显示。

我使用的是html和agularJS。我使用ng-repeat来检索包含项目名称，开始日期和结束日期的项目列表。

我不知道如何进行年度日历并在日历上显示动态时间表。

Answer 1

有一个名为AngularUI的伟大项目，专门为您正在尝试的UI元素构建。其中一个是日历。您可以使用他们的日历UI元素来显示项目，就像您希望的那样。

你说你正在使用ng-repeat;因此，您的$ scope中已有一个列表。您可以简单地转换数据，使其具有所需的属性（标题，开头和其他一些可选的属性，如结束日期），并将其传递给日历元素，例如：

$scope.events = [
      {title: 'All Day Event',start: new Date(y, m, 1)},
      {title: 'Long Event',start: new Date(y, m, d - 5),end: new Date(y, m, d - 2)},
      {id: 999,title: 'Repeating Event',start: new Date(y, m, d - 3, 16, 0),allDay: false},
      {id: 999,title: 'Repeating Event',start: new Date(y, m, d + 4, 16, 0),allDay: false},
      {title: 'Birthday Party',start: new Date(y, m, d + 1, 19, 0),end: new Date(y, m, d + 1, 22, 30),allDay: false},
      {title: 'Click for Google',start: new Date(y, m, 28),end: new Date(y, m, 29),url: 'http://google.com/'}
    ];

Answer 2

您可以尝试使用带有AngularJS的JavaScript Gantt图表库dhtmlxGantt。这是一个教程：http://www.dhtmlx.com/blog/?p=2200

dhtmlxGantt具有可自定义的时间范围。

（免责声明：我是DHTMLX团队的一员）。

使用angularJS在html中显示动态时间表

2 个答案: