用angularJS在html中顯示一個動態時間表

這是一個項目管理應用程序，有許多開始日期和結束日期的項目。用angularJS在html中顯示一個動態時間表

我希望有一個時間表顯示項目與他們的時間表，像甘特聊天。每個項目消耗表格的一行，時間線（持續時間）在年度日曆中突出顯示。

我使用html和agularJS。我使用ng-repeat來檢索包含項目名稱，開始日期和結束日期的項目列表。

我不知道如何做年度日曆並在日曆上顯示動態時間表。

來源

2013-02-28 elephant

你有什麼嘗試？你不能只是要求我們爲你做點什麼，而應該告訴我們你嘗試過什麼，並詢問關於你嘗試使用的方法的具體問題。 – 2013-02-28 17:20:28

對於那些已經從Google登陸的人，[這裏是一個甘特圖的Angular插件]（https://github.com/Schweigi/angular-gantt），可能對這個問題有用 – sjagr 2014-02-15 22:28:01

有一個名爲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/'} 
    ];

來源

2013-02-28 17:22:19

這就像每週的日曆。甘特圖有什麼解決方案嗎？它已經嘗試過jQuery甘特圖，但它無法與angularJS一起正常工作。 – elephant 2013-03-01 11:44:31

它不能正常工作？請提供一些細節 – 2013-03-01 15:46:46

我更改爲繪製一個固定的表格，將365天顯示爲365個小方框。每個任務消耗一行，並且計劃將以藍色方塊繪製。但是，當我使用ng-repeat時，我追加到我的html不起作用。更具體地說：[link] http://stackoverflow.com/questions/15177145/when-i-use-angularjs-ng-repeat-it-doesnt-show-what-i-append-in-javascript – elephant 2013-03-02 17:21:21

您可以嘗試使用dhtmlxGantt ，一個JavaScript的甘特圖庫，與AngularJS。這裏是一個教程：http://www.dhtmlx.com/blog/?p=2200

dhtmlxGantt有一個可定製的時間尺度。

（聲明：我是DHTMLX團隊的一員）。

來源

2014-04-07 10:11:37 Paul

用angularJS在html中顯示一個動態時間表

回答

相關問題