0

これはプロジェクト管理アプリケーションで、開始日と終了日のプロジェクトが多数あります。

ガント チャットのように、プロジェクトをタイムラインと共に表示するスケジュール ページが必要です。各プロジェクトはテーブルの 1 行を消費し、タイムライン (期間) は年間カレンダーで強調表示されます。

私はhtmlとagularJSを使用しています。ng-repeat を使用して、プロジェクト名、開始日、終了日を含むプロジェクト リストを取得します。

年間カレンダーを実行し、カレンダーに動的時刻表を表示する方法がわかりません。

4

2 に答える 2

1

あなたがやろうとしていることのためにUI要素で特別に構築されたAngularUIと呼ばれる素晴らしいプロジェクトがあります。それらの1つはカレンダーです。必要に応じて、カレンダー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/'}
    ];
于 2013-02-28T17:22:19.457 に答える
0

JavaScript ガント チャート ライブラリである dhtmlxGantt を AngularJS で使用してみてください。ここにチュートリアルがあります: http://www.dhtmlx.com/blog/?p=2200

dhtmlxGantt には、カスタマイズ可能なタイム スケールがあります。

(免責事項: 私は DHTMLX チームの一員です)。

于 2014-04-07T10:11:37.840 に答える