Display a dynamic timetable in html with angularJS

Question

This is a project management application, there are many projects with start date and end date.

I wish to have a schedule page which displays projects with their timeline, something like a gantt chat. Each project consumes one row of the table and the timeline(duration) is highlighted in the yearly calendar.

I am using html and agularJS. I use ng-repeat to retrieve project list which contains project name, start date and end date.

I am not sure how to do yearly calendar and display the dynamic timetable on the calendar.

What have you tried? You can't just ask us to do something for you, you should instead let us know what you've tried and ask a specific question about the method you're trying to use. — Christian Stewart
– Christian Stewart, Commented Feb 28, 2013 at 17:20
For those who have landed here from Google, here's an Angular plugin for Gantt charts that may prove useful to this question — sjagr
– sjagr, Commented Feb 15, 2014 at 22:28

Christian Stewart · Accepted Answer · 2013-02-28 17:22:19Z

1

There's a great project called AngularUI specifically built with the UI elements for what you're trying to do. One of them is a calendar. You can use their calendar UI element to display the projects, as you would like to do.

You say you are using ng-repeat; thus you have a list in your $scope already. You can simply transform the data so that it has the required attributes (title, start, and some other optional ones such as end date) and pass it into the calendar element, example:

$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/'}
    ];

answered Feb 28, 2013 at 17:22

Christian Stewart

15.5k21 gold badges86 silver badges147 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

elephant Over a year ago

This is like a weekly calendar. Is there any solutions for gantt chart? It have tried jQuery gantt chart, but it doesn't work properly with angularJS.

elephant Over a year ago

I change to draw a fix table which displays 365 days as 365 small boxes. Each task consumes one row, and the schedule will be drawn in blue block. However, when i use ng-repeat, what i append to my html doesn't work. To be more specific: [link]stackoverflow.com/questions/15177145/…

Paul · Accepted Answer · 2014-04-07 10:11:37Z

0

You may try using dhtmlxGantt, a JavaScript Gantt chart library, with AngularJS. Here is a tutorial: http://www.dhtmlx.com/blog/?p=2200

dhtmlxGantt has a customizable time scale.

(Disclaimer: I'm a part of the DHTMLX team).

answered Apr 7, 2014 at 10:11

Paul

1,65611 silver badges16 bronze badges

Collectives™ on Stack Overflow

Display a dynamic timetable in html with angularJS

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related