This would probably lead to editing names

On add a big quatity of tasks (2k), the events (drag and others) are so slowly, this is normal? My self functions are slowly too

In the given demo (http://schweigi.github.io/angular-gantt/) months are not displayed correctly. For example the data for 'Status Meetings' row are as follows.

            {"id": "b8d10927-cf50-48bd-a056-3554decab824", "description": "Status meetings", "order": 1, "tasks": [
                {"id": "301d781f-1ef0-4c35-8398-478b641c0658", "subject": "Demo", "color": "#9FC5F8", "from": new Date(2013,9,25,15,0,0), "to": new Date(2013,9,25,18,30,0)},
                {"id": "0fbf344a-cb43-4b20-8003-a789ba803ad8", "subject": "Demo", "color": "#9FC5F8", "from": new Date(2013,10,1,15,0,0), "to": new Date(2013,10,1,18,0,0)},
                {"id": "12af138c-ba21-4159-99b9-06d61b1299a2", "subject": "Demo", "color": "#9FC5F8", "from": new Date(2013,10,8,15,0,0), "to": new Date(2013,10,8,18,0,0)},
                {"id": "73294eca-de4c-4f35-aa9b-ae25480967ba", "subject": "Demo", "color": "#9FC5F8", "from": new Date(2013,10,15,15,0,0), "to": new Date(2013,10,15,18,0,0)},
                {"id": "75c3dc51-09c4-44fb-ac40-2f4548d0728e", "subject": "Demo", "color": "#9FC5F8", "from": new Date(2013,10,24,9,0,0), "to": new Date(2013,10,24,10,0,0)}
            ]},

Despite these dates belongs to September and October respectively, in the demo they are displayed as belongs to October and November.

I have a task (my first task) which starts on Saturday so when the user clicks "hide weekend" the first task disappears. I have this issue only when they hide the weekend. Please see screen shots below:

Show Weekend - True.

Show Weekend - False

To simulate this issue you should have a task with earliest start date.

I would like to suggest adding the possibility to automatically scroll to today when the gantt finished loading and have a different background color for today's column.

I've been playing with angular-gantt and it seems that if I load data in and then manipulate the chart, there is no change to my data. If I change my data, the chart does not change. It would be really cool to have things be reactive. That is half the joy of angular. If this isn't really possible, is there a way to get the data back out of the chart with a function call after it's been altered?

I would love to discuss contributing to this concept. Please contact me at lukasbradley on gmail.com.

Hi, awesome directive!

Having a current date/time indicator would be nice. Like most Gantt charts, a simple dotted line at the present date/time.

Let's be clear here. the goals is ONLY presentation, we're not trying to build a full out scheduling system. So no analysis ( er, at least not yet right ? )

But displaying dependencies would be nice.
If Task A depends on Task B being completed, then it would be great to have a little arrow type thing connecting the end of A to the start of B.

An example of how this might look is in the wikipeidia chart at the start of the following article:
http://en.wikipedia.org/wiki/Gantt_chart
They are shown in red in this gantt chart.

If the start and end points are specified properly, then the arrows would always go from left to right (with associated vertical movement as well). However since the data model has no way of enforcing this, it means the data model could specify arrows that go right to left.

We need to specify taskA --> taskB dependency, but also which "end" of each task. So taskA.end --> taskB.start or taskA.end --> taskB.end or taskA.start --> taskB.start. I'm going to go with the notion of taskA.start --> taskB.end as being unnecessary, but perhaps not worth checking to prevent.

WRT the data model, the current model is an array of events. There would be two approach I can see:

1. add additional data into the current event elements. So each "event" in "events" would have an additional field "dependencies". The event in this case is taskB above, so our goal is to specify a list of taskA's. so

"tasks": [
                {"id": "43eb6d19-6402-493c-a281-20e59a6fab6e", "subject": "HW", "color": "#F1C232", "from": new Date(2013,10,18,8,0,0), "to": new Date(2013,10,18,12,0,0)}
            ]

might become:

"tasks": [
                {"id": "43eb6d19-6402-493c-a281-20e59a6fab6e", "subject": "HW", "color": "#F1C232", "from": new Date(2013,10,18,8,0,0), "to": new Date(2013,10,18,12,0,0), "dependencies":[
{"fromId":"431dc7be-b61b-49a0-b26d-7ab5dfcadd41",
 "fromSide":"end",
 "toSide":"start"
}
]}
            ]

or

2. A seperate section of dependencies specified by id

"dependencies":[
{"fromId":"431dc7be-b61b-49a0-b26d-7ab5dfcadd41",
 "fromSide":"end",
 "toId":"43eb6d19-6402-493c-a281-20e59a6fab6e",
"toSide":"start"
}
]

I see no strong reason to do either approach. Except perhaps that the first is an extension of the current datamodel, while the second require a whole new one.

At this time I don't know enough about JS/DOM to have a clue how to actually implement the drawing side of this.

Hi
Wonderful component.

Saw the way you tied up the 'loadData' method to the directive, using the 'loadData = Fn'.
I can't find any comments\documentation or explanation on this kind of syntax, how it works under the hood, it's side effects etc.

My questions:

1. Though I think I understand what's happening in high level, can you elaborate what (and especially when) does this binding takes place and how it works ?
2. Why would you choose this method to implement communication between the outer controller to the inner gantt, over event model for example ?

Thanks a'head
Aviad

If data.description is all lowercase, sorting pushes that element to very bottom/top of list regardless of initial letter. Maybe self.sortTasks should make all lowercase prior to sorting?

Seems to be broken
http://i.imgur.com/pk6Fw4b.png

I might be missing something but when there is an on-task-clicked function and an on-task-updated function the clicked function fires after the updated function anytime I move or resize a task. if I remove the on-task-clicked function updating the task works as intended.

I've been playing with the viewScaleFactor (gantt.js line 304) to make the days narrower or wider. Is there a way to change this with an attribute when I create my <gantt> directive?

Thanks for all your hard work!

Hi,

I am currently implementing this Gantt chart and I must say its truly elegant.
Thanks for doing this is angular.

Now what I am trying to achieve is :

I want to have different color sections within a single task so as to differentiate between the various task status (i.e. pending/completed/overdue).

This image would explain everything

Now one thing I would be doing for sure is that I would change the "task due date" to the current date.

After this would come painful CSS gradient world part that I always try and resist.

Anyways I would have to tweak it because its a requirement.
So suggestions are most welcome. I would be thankful if the community could help me on that.

Thanks & Regards

I tried to run the demo page to see the lib in action. Browser stalled in some loop (Chomium). So I tried Firefox, and 2 secs after I opened the demo page, script stop responding on gantt.js:129.

I downloaded the demo page to try a debug, then my entire machine gone crazy on swap. I don't know for sure what code is causing, but obviously is an infinite loop eating up as much memory as possible.

1. I get a few similar errors to this:
   Error: Syntax Error: Token ''day'' is unexpected, expecting [)] at column 12 of the expression [(scale === 'day' && 'btn btn-primary' || 'btn btn-default')] starting at ['day' && 'btn btn-primary' || 'btn btn-default')].

2. It goes to download the template and i get this:
   GET http://localhost:9000/function%20(tElement,%20tAttrs)%20%7B%20%20%20%20%20%…lateUrl;%20%20%20%20%20%20%20%20%20%20%20%20%7D%20%20%20%20%20%20%20%20%7D 404 (Not Found) angular.js:9499
   Uncaught TypeError: Object function (tElement, tAttrs) {
   if (tAttrs.templateUrl === undefined) {
   return "template/gantt.tmpl.html";
   } else {
   return tAttrs.templateUrl;
   }
   } has no method 'match' angular.js:9512

On line 1634:

bodyElement.one('mouseup', function() {
                    bodyElement.unbind('mousemove', taskMoveHandler);
                    disableMoveMode();
                });

this should be bodyElement.on('mouseup' ...

As is, elements cannot be dropped once drag is started.

In IE 11, when I scroll the task grid quickly the date columns are invisible for few seconds before it appears. Any idea why this happens?

I am wondering if there is an easy way to filter rows by a row.property. Will a custom sort do this? The important part is that the rows without the property are removed not just sent to the bottom.

I have tried a filter in the relevant ng-repeats with | filter:$parent.$parent.property but that does not appear to work.

I could be wrong, but when I add ng-click to either the description or day, neither seem to work. I've looked around at any calls to e.preventDefault() and e.stopPropagation() but didn't see anything that's hindering the calls.

Again, I could be wrong, but is this by design?

Interactive scheduling by moving time bars.
Event driven, so we can run code when a user releases a dragged bar.

Except they do appear if there is a task in another row.
When you have no tasks even the header disappears.

this would be great to have an adapter to use github issues as the data source.

The dependencies and other data would still need to be in the data file, but the actual idependent issues would come from the github api.

There is this over hear that has already done the github API integration, but not an editable changt chart. ts juery and not angular.
https://github.com/neyric/gh-issues-gantt

So can combine the two, and we have a base for a decent gannt chart running of github issues

anyone else like this idea ?
Because its just a data mapping problem it is pretty easy to implement.

The current data model makes it difficult to use a JSON based REST api to feed the data in. This is because the data model expects a javascript Date object:

{"id": "f55549b5-e449-4b0c-9f4b-8b33381f7d76", "subject": "Kickoff", "color": "#93C47D", "from": new Date(2013,9,7,9,0,0), "to": new Date(2013,9,7,9,0,0), "data": "Can contain any custom data or object"},

However the Date object is not part of the JSON convention. Just about anyone feeding this library via JSON will need to convert from a JSON compliant format into the javascript Date object, therefore I would suggest that the library do this work, and that the format for "from" and "to" values should be specified in ISO 8601 (http://en.wikipedia.org/wiki/ISO_8601 ) compliant strings. These string are easily converted into javascript Date objects via:

var date = new Date(jsonDate); 

Apologies if this has been resolved already and I'm missing something.

I'm trying to explicitly set the value the viewScale, e.g:

view-scale="'week'"

(notice I'm setting it as a string using the single quotes). When the directives controller runs, the $scope.viewScale two-way binding is set to to undefined, it then loads the default (day).

I noticed that if I wrap the init of the directive in a $timeout, then the scope variables are set how I would expect them. In other words, it's a manifestation of this issue:

http://stackoverflow.com/questions/16773125/angularjs-how-to-access-the-isolated-scope-from-the-linking-function

I'm using Angular 1.2.14

Would be great to get this library registered with bower :)

Paste the following into your demo_sample_data.js file. It works just fine for me in Firefox (v24), but eventually crashes the tab in Chrome (v30). Any ideas? I'm stumped. It's not that much data, only ~280 lines.

function getSampleData() {
    // Order is optional. If not specified it will be assigned automatically

    return {
        "data1": [ { tasks: 
     [ { id: 11581,
         subject: 'Internal Review 1',
         from: 'Mon Feb 18 2013',
         to: 'Mon Feb 18 2013',
         color: '#e90daf' },
       { id: 11587,
         subject: 'Creative Round 2',
         from: 'Mon Feb 18 2013',
         to: 'Tue Feb 19 2013',
         color: '#4ce3bc' },
       { id: 11584,
         subject: 'Client Feedback 1',
         from: 'Tue Feb 19 2013',
         to: 'Thu Feb 21 2013',
         color: '#300253' },
       { id: 11586,
         subject: 'Internal Review 2',
         from: 'Tue Feb 19 2013',
         to: 'Tue Feb 19 2013',
         color: '#b0836e' },
       { id: 11589,
         subject: 'Revision Round 1',
         from: 'Thu Feb 21 2013',
         to: 'Sun Feb 24 2013',
         color: '#236d67' },
       { id: 11594,
         subject: 'Client Final Approval',
         from: 'Sun Feb 24 2013',
         to: 'Mon Feb 25 2013',
         color: '#37eb7a' },
       { id: 11595,
         subject: 'Prep files for Production',
         from: 'Mon Feb 25 2013',
         to: 'Mon Feb 25 2013',
         color: '#ea01d7' },
       { id: 11597,
         subject: 'In Production/Printing',
         from: 'Mon Feb 25 2013',
         to: 'Mon Mar 04 2013',
         color: '#52d330' },
       { id: 11599,
         subject: 'Mail Drop Date',
         from: 'Mon Mar 04 2013',
         to: 'Mon Mar 04 2013',
         color: '#dc86c8' } ],
    id: 861,
    description: 'BOAK-1316 March Postcard - Oakleaf Offer' },
  { tasks: 
     [ { id: 11787,
         subject: 'Creative Round 1',
         from: 'Tue Mar 12 2013',
         to: 'Mon Mar 18 2013',
         color: '#fe038' },
       { id: 11792,
         subject: 'Kick-off',
         from: 'Tue Mar 12 2013',
         to: 'Tue Mar 12 2013',
         color: '#55b403' },
       { id: 11788,
         subject: 'Internal Review 1',
         from: 'Mon Mar 18 2013',
         to: 'Mon Mar 18 2013',
         color: '#537d79' },
       { id: 11789,
         subject: 'Creative Round 2',
         from: 'Mon Mar 18 2013',
         to: 'Thu Mar 21 2013',
         color: '#2542ae' },
       { id: 11790,
         subject: 'Internal Review 2',
         from: 'Sun Mar 24 2013',
         to: 'Sun Mar 24 2013',
         color: '#4dc201' } ],
    id: 795,
    description: 'VISCP-1301 BLDG 9B1 Identity' },
  { tasks: 
     [ { id: 11730,
         subject: 'Site Architecture Brainstorm Session',
         from: 'Wed Mar 13 2013',
         to: 'Wed Mar 13 2013',
         color: '#a3d594' },
       { id: 11735,
         subject: 'Concepts Round 1',
         from: 'Wed Mar 13 2013',
         to: 'Mon Mar 18 2013',
         color: '#51546f' },
       { id: 11736,
         subject: 'Internal Review 1',
         from: 'Mon Mar 18 2013',
         to: 'Mon Mar 18 2013',
         color: '#228a3f' },
       { id: 11737,
         subject: 'Concepts Round 2',
         from: 'Mon Mar 18 2013',
         to: 'Wed Mar 20 2013',
         color: '#674abd' },
       { id: 11739,
         subject: 'Internal Review 2',
         from: 'Wed Mar 20 2013',
         to: 'Wed Mar 20 2013',
         color: '#965e57' },
       { id: 11738,
         subject: 'Creative Round 1',
         from: 'Sun Mar 24 2013',
         to: 'Thu Mar 28 2013',
         color: '#ae9af5' },
       { id: 11784,
         subject: 'Internal Review 3',
         from: 'Thu Mar 28 2013',
         to: 'Thu Mar 28 2013',
         color: '#a04dfc' },
       { id: 11740,
         subject: 'Creative Round 2',
         from: 'Sun Mar 31 2013',
         to: 'Thu Apr 04 2013',
         color: '#49263' },
       { id: 11785,
         subject: 'Internal Review 4',
         from: 'Thu Apr 04 2013',
         to: 'Thu Apr 04 2013',
         color: '#c56953' },
       { id: 11786,
         subject: 'Programming 1',
         from: 'Sun Apr 07 2013',
         to: 'Thu Apr 11 2013',
         color: '#3ee8de' },
       { id: 11746,
         subject: 'Internal Testing 1',
         from: 'Sun Apr 14 2013',
         to: 'Wed Apr 17 2013',
         color: '#e80b88' } ],
    id: 738,
    description: 'TWA-1303 New Website' },
  { tasks: 
     [ { id: 11907,
         subject: 'Kickoff Meeting',
         from: 'Sun Mar 17 2013',
         to: 'Sun Mar 17 2013',
         color: '#bbf425' },
       { id: 11908,
         subject: 'Concepts Round 1',
         from: 'Sun Mar 17 2013',
         to: 'Thu Mar 21 2013',
         color: '#15671b' },
       { id: 11909,
         subject: 'Internal Review 1',
         from: 'Wed Mar 20 2013',
         to: 'Wed Mar 20 2013',
         color: '#f974ef' },
       { id: 11920,
         subject: 'Vendor Specs 2',
         from: 'Sun Mar 24 2013',
         to: 'Sun Mar 24 2013',
         color: '#c1657c' },
       { id: 11912,
         subject: 'Client Feedback 1',
         from: 'Mon Mar 25 2013',
         to: 'Mon Mar 25 2013',
         color: '#c4276e' },
       { id: 11915,
         subject: 'Creative Round 2',
         from: 'Mon Mar 25 2013',
         to: 'Wed Mar 27 2013',
         color: '#5254e2' },
       { id: 11916,
         subject: 'Client Feedback 2',
         from: 'Thu Mar 28 2013',
         to: 'Thu Mar 28 2013',
         color: '#8c89c3' },
       { id: 11921,
         subject: 'Client Final Approval',
         from: 'Thu Mar 28 2013',
         to: 'Thu Mar 28 2013',
         color: '#f98fed' },
       { id: 11922,
         subject: 'Prep files for Production',
         from: 'Thu Mar 28 2013',
         to: 'Thu Mar 28 2013',
         color: '#fec480' },
       { id: 11924,
         subject: 'In Production/Printing',
         from: 'Thu Mar 28 2013',
         to: 'Thu Mar 28 2013',
         color: '#3452af' },
       { id: 11925,
         subject: 'Delivered',
         from: 'Thu Mar 28 2013',
         to: 'Thu Apr 04 2013',
         color: '#1fa2a' } ],
    id: 870,
    description: 'COPR-1301 Logo & Stationery' },
  { tasks: 
     [ { id: 11982,
         subject: 'Brainstorm Session',
         from: 'Sun Mar 17 2013',
         to: 'Sun Mar 17 2013',
         color: '#83b836' },
       { id: 11983,
         subject: 'Concepts Round 1 (Creative Brief)',
         from: 'Sun Mar 17 2013',
         to: 'Thu Mar 21 2013',
         color: '#d0ab15' },
       { id: 11984,
         subject: 'Internal Review 1',
         from: 'Tue Mar 19 2013',
         to: 'Tue Mar 19 2013',
         color: '#894c92' },
       { id: 11987,
         subject: 'Client Feedback 1 (Creative Brief)',
         from: 'Thu Mar 21 2013',
         to: 'Thu Mar 21 2013',
         color: '#5710a6' },
       { id: 11988,
         subject: 'Concepts Round 3 (Creative)',
         from: 'Thu Mar 21 2013',
         to: 'Thu Mar 28 2013',
         color: '#5359c2' },
       { id: 11989,
         subject: 'Internal Review 2',
         from: 'Sun Mar 24 2013',
         to: 'Tue Mar 26 2013',
         color: '#b0f1d3' },
       { id: 11986,
         subject: 'Client Presentation 1',
         from: 'Tue Mar 26 2013',
         to: 'Sun Mar 31 2013',
         color: '#9194ff' },
       { id: 11992,
         subject: 'Client Final Approval',
         from: 'Sun Mar 31 2013',
         to: 'Sun Mar 31 2013',
         color: '#57a811' } ],
    id: 873,
    description: 'COPR-1304 Strategic Message Development' },
  { tasks: 
     [ { id: 11944,
         subject: 'Kickoff Meeting',
         from: 'Mon Apr 01 2013',
         to: 'Mon Apr 01 2013',
         color: '#4c2ef6' },
       { id: 11945,
         subject: 'Creative Round 1',
         from: 'Mon Apr 01 2013',
         to: 'Thu Apr 04 2013',
         color: '#308057' },
       { id: 11948,
         subject: 'Client Presentation 1',
         from: 'Thu Apr 04 2013',
         to: 'Thu Apr 04 2013',
         color: '#3175c0' },
       { id: 11949,
         subject: 'Client Feedback 2',
         from: 'Thu Apr 04 2013',
         to: 'Thu Apr 04 2013',
         color: '#8b68fd' },
       { id: 11956,
         subject: 'Internal Testing 1',
         from: 'Thu Apr 04 2013',
         to: 'Mon Apr 08 2013',
         color: '#14840d' },
       { id: 11959,
         subject: 'Client Testing Round 1',
         from: 'Mon Apr 08 2013',
         to: 'Tue Apr 09 2013',
         color: '#8f0f46' },
       { id: 11962,
         subject: 'Client Final Approval',
         from: 'Thu Apr 11 2013',
         to: 'Thu Apr 11 2013',
         color: '#e36971' },
       { id: 11963,
         subject: 'Launch Site',
         from: 'Thu Apr 11 2013',
         to: 'Thu Apr 11 2013',
         color: '#db8cd0' } ],
    id: 871,
    description: 'COPR-1302 Business Launch Web Site' } ]
    };
}

1. Add an attributes to show/hide week headers, example:
   header-show-week (default: true)

2. Make configurable date format from attributes for month and day headers without rewrite template, example:
   header-format-month (default: 'MMMM yyyy')
   header-format-day (default: viewScale === 'hour' && 'dd EEEE' || 'dd')

This component is so good and I would really love to use this in my project. All I would wish to know that how will this handle large data - I've 10K data points to populate. Any update on performance of this script. Thank you in advance.

I have been play with the code for a while. Tried to modify the code so I was able to set the scale to "months" and review the yearly Gantt. But it was not successful.
Is there a way of doing that?

Thanks very much for your brilliant work.

When I put the demo inside an ng-repeat the UI goes crazy. Check it:

Is there anyway we can remove the time/hours from showing?

Horizontal and verical scrolling does not work in IE on WP8. Tried both the demo and my own application. Otherwise, thanx for an excellent directive.

Being able to stack events that collide in the same time period and row would be nice.

This is not possible right now is it?

Working fine with angularJs 1.2.0, but i am using angular 1.0.3 it is showing [Exception... "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)" location: ""]

Hi,

I would like to use the option 'center-date' to auto-scroll at today's date after loading the data (on-gantt-ready).
But the scroll is still not allowed because the elements are not immediately shown.
How to use the option 'center-date' properly?
Thank you ;)

I ran into this issue with my own app, but it repros in the demo. If firstDayOfWeek is set to something other than 1 and the viewscale is on Week, the code for moving tasks (or changing from/to) breaks. I believe the bug is somewhere in the column.getDateByPosition and/or column.getPositionByDate, but I haven't figured out exactly what the code there is doing. Any insights on what could be going on?

I am trying to get the new task date after resizing but it just returns undefined. Am I doing wrong?

Js code:

$scope.taskEvent = function(event) {
            // A task has been updated or clicked.
            console.log('Task Resize event: ' + event.date + ' - ' + event.task.subject + ' (Custom data: ' + event.task.data + ')');
    };

Html Code:

<gantt first-day-of-week="firstDay"
           load-data="loadData = fn"
           remove-data="removeData = fn"
           clear-data="clearData = fn"
           sort-mode="mode"
           view-scale="scale"
           column-width="scale === 'month' && 20 || (scale === 'week' && 10 || 2)"
           column-sub-scale="scale === 'week' && 7 || 4"
           weekend-days="weekendDays"
           show-weekends="showWeekends"
           max-height="maxHeight"
           on-gantt-ready="addSamples()"
           on-row-added="rowEvent(event)"
           on-row-clicked="rowEvent(event)"
           on-row-updated="rowEvent(event)"
           on-scroll="scrollEvent(event)"
           on-task-clicked="taskEvent(event)"
           on-task-updated="taskEvent(event)">
     </gantt>

Maybe I'm missing something, but is there an easy way to make the columns expand to the available page are, even if the tasks don't fill across. Something like, use dates if less than required width, if not then use required width.

This is really just a question. I want to start contributing. I am more of an iOS developer but I'm passionate about learning angular. I want to contribute to this project. I just need help understanding some things. I don't understand this syntax load-data="loadData = fn" works.

    <gantt 
           load-data="loadData = fn"
           view-scale="'hour'"
           column-width="4"
           column-sub-scale="12"
           allow-task-row-switching="false"
           on-gantt-ready="addSamples()"
           >
     </gantt>

I get the basics on directives, attributes, scopes, linking etc. I just don't really understand the = fn part. Is the fn a reserved word? I only found loadData defined internally in the src for angular-gant...I was expecting to see that in the controller. I don't understand how loadData works in the first place.
Thanks for your help and the great work you've done on this! I hope to add to it soon!

When I add more than 2 columns (to do this just copy & paste description column twice) the task rows become invisible while scrolling towards right side. Also, up-to two columns it works fine but if I add more than that I am having this issue.

In demo.html, change view-scale from the data binding "scale" to explicit value "month"

<gantt first-day-of-week="firstDay"
           load-data="loadData = fn"
           remove-data="removeData = fn"
           clear-data="clearData = fn"
           sort-mode="mode"
           view-scale="month"
           column-width="20"
           column-sub-scale="4"
           weekend-days="weekendDays"
           show-weekends="showWeekends"
           max-height="maxHeight"
           on-gantt-ready="addSamples()"
           on-row-added="rowEvent(event)"
           on-row-clicked="rowEvent(event)"
           on-row-updated="rowEvent(event)"
           on-scroll="scrollEvent(event)"
           on-task-clicked="taskEvent(event)"
           on-task-updated="taskEvent(event)">
     </gantt>

Then the Gantt chart sets the viewScale setting to the default value of "day"

Expected behaviour is for the Gantt chart to initialize in month view.

My workaround was to change the default value of viewScale to "month" in angular-gantt.js @ line 54

            if ($scope.viewScale === undefined) $scope.viewScale = "month";

This is a bit of a stretch, but I'll get it recorded here anyway.
Image three tasks.
a) a short task 1 day long
b) a long task 2 months long
c) a short task 2 days long.
These tasks are strung end to end a->b->c

With the current display engine task b will take up the bulk of the display, even though for 2 months nothing has changed. It would be nice if the display could indicate that some number of days are "missing" out of the middle of this task, something like an ellipses:
http://en.wikipedia.org/wiki/Ellipsis

I'm thinking that a display parameter could be a minimum length of time with no changes before an ellipses is inserted. For the above example this could be 1 week.

The display would then be
a->b1->ellipses->b2->c
where b1 and b2 are parts of the original b with perhaps 6 weeks of the original 2 months missing out of the middle.

Ok, so by the term "not changes" that would be across ALL tasks, not just across one in particular.

How would one use a mouse scroller to scroll left and right since my app will be using hours scale alot of the time and I wont have problems with vertical scrolling.

Thanks for the answer and ofcourse, for such a great module!

It would be great to be able to set the view scale to weeks, months quarters and years.

Could it be possible to decide if we allow the task to be move inside the rows only?

I have to-date="endDate" and a function that is being called to change the value of endDate. When I set it to a date greater than the current endDate the gantt resizes to the correct date. When I try to reduce it again the value changes but the gantt dosn't resize itself.

Is this a bug or is there a way around this I am missing?