Fixes

- end_date calculation
- hide_popup on grid_click
- bar position should also consider hours
- date_change event only if date has changed

index.html

@@ -13,7 +13,7 @@
 			margin: 0 auto;
 		}
 		/* custom class */
-		.gantt .bar-milestone .bar-progress {
+		.gantt .bar-milestone .bar {
 			fill: tomato;
 		}
 	</style>
@@ -26,35 +26,56 @@
 		<div class="gantt-target"></div>
 	</div>
 	<script>
-		var names = [
+		var tasks = [
-			["Redesign website", [0, 7]],
+			{
-			["Write new content", [1, 4]],
+				start: '2018-10-01',
-			["Apply new styles", [3, 6]],
+				end: '2018-10-08',
-			["Review", [7, 7]],
+				name: 'Redesign website',
-			["Deploy", [8, 9]],
+				id: "Task 0",
-			["Go Live!", [10, 10]]
+				progress: 20
-		];
+			},
-
+			{
-		var tasks = names.map(function(name, i) {
+				start: '2018-10-03',
-			var today = new Date();
+				end: '2018-10-06',
-			var start = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+				name: 'Write new content',
-			var end = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+				id: "Task 1",
-			start.setDate(today.getDate() + name[1][0]);
+				progress: 5,
-			end.setDate(today.getDate() + name[1][1]);
+				dependencies: 'Task 0'
-			return {
+			},
-				start: start,
+			{
-				end: end,
+				start: '2018-10-04',
-				name: name[0],
+				end: '2018-10-08',
-				id: "Task " + i,
+				name: 'Apply new styles',
-				progress: parseInt(Math.random() * 100, 10)
+				id: "Task 2",
-			}
+				progress: 10,
-		});
+				dependencies: 'Task 1'
-		tasks[1].progress = 0;
+			},
-		tasks[1].dependencies = "Task 0"
+			{
-		tasks[2].dependencies = "Task 1"
+				start: '2018-10-08',
-		tasks[3].dependencies = "Task 2"
+				end: '2018-10-09',
-		tasks[5].dependencies = "Task 4"
+				name: 'Review',
-		tasks[5].custom_class = "bar-milestone";
+				id: "Task 3",
+				progress: 5,
+				dependencies: 'Task 2'
+			},
+			{
+				start: '2018-10-08',
+				end: '2018-10-10',
+				name: 'Deploy',
+				id: "Task 4",
+				progress: 0,
+				dependencies: 'Task 2'
+			},
+			{
+				start: '2018-10-11',
+				end: '2018-10-11',
+				name: 'Go Live!',
+				id: "Task 5",
+				progress: 0,
+				dependencies: 'Task 4',
+				custom_class: 'bar-milestone'
+			},
+		]
 
 		var gantt_chart = new Gantt(".gantt-target", tasks, {
 			on_click: function (task) {

src/bar.js

@@ -27,7 +27,7 @@ export default class Bar {
         this.y = this.compute_y();
         this.corner_radius = this.gantt.options.bar_corner_radius;
         this.duration =
-            (date_utils.diff(this.task._end, this.task._start, 'hour') + 24) /
+            date_utils.diff(this.task._end, this.task._start, 'hour') /
             this.gantt.options.step;
         this.width = this.gantt.options.column_width * this.duration;
         this.progress_width =
@@ -175,15 +175,16 @@ export default class Bar {
     }
 
     setup_click_event() {
-        $.on(this.group, 'click', e => {
+        $.on(this.group, 'focus click', e => {
             if (this.action_completed) {
                 // just finished a move action, wait for a few seconds
                 return;
             }
 
-            if (this.group.classList.contains('active')) {
+            if (e.type === 'click') {
                 this.gantt.trigger_event('click', [this.task]);
             }
+
             this.gantt.unselect_all();
             this.group.classList.toggle('active');
 
@@ -195,7 +196,10 @@ export default class Bar {
         if (this.gantt.bar_being_dragged) return;
 
         const start_date = date_utils.format(this.task._start, 'MMM D');
-        const end_date = date_utils.format(this.task._end, 'MMM D');
+        const end_date = date_utils.format(
+            date_utils.add(this.task._end, -1, 'second'),
+            'MMM D'
+        );
         const subtitle = start_date + ' - ' + end_date;
 
         this.gantt.show_popup({
@@ -232,14 +236,25 @@ export default class Bar {
     }
 
     date_changed() {
+        let changed = false;
         const { new_start_date, new_end_date } = this.compute_start_end_date();
-        this.task._start = new_start_date;
+
-        this.task._end = new_end_date;
+        if (Number(this.task._start) !== Number(new_start_date)) {
+            changed = true;
+            this.task._start = new_start_date;
+        }
+
+        if (Number(this.task._end) !== Number(new_end_date)) {
+            changed = true;
+            this.task._end = new_end_date;
+        }
+
+        if (!changed) return;
 
         this.gantt.trigger_event('date_change', [
             this.task,
             new_start_date,
-            new_end_date
+            date_utils.add(new_end_date, -1, 'second')
         ]);
     }
 
@@ -268,12 +283,7 @@ export default class Bar {
             width_in_units * this.gantt.options.step,
             'hour'
         );
-        // lets say duration is 2 days
+
-        // start_date = May 24 00:00:00
-        // end_date = May 24 + 2 days = May 26 (incorrect)
-        // so subtract 1 second so that
-        // end_date = May 25 23:59:59
-        date_utils.add(new_end_date, -1, 'second');
         return { new_start_date, new_end_date };
     }
 
@@ -284,20 +294,16 @@ export default class Bar {
     }
 
     compute_x() {
-        let x =
+        const { step, column_width } = this.gantt.options;
-            date_utils.diff(this.task._start, this.gantt.gantt_start, 'hour') /
+        const task_start = this.task._start;
-            this.gantt.options.step *
+        const gantt_start = this.gantt.gantt_start;
-            this.gantt.options.column_width;
+
+        const diff = date_utils.diff(task_start, gantt_start, 'hour');
+        let x = diff / step * column_width;
 
         if (this.gantt.view_is('Month')) {
-            x =
+            const diff = date_utils.diff(task_start, gantt_start, 'day');
-                date_utils.diff(
+            x = diff * column_width / 30;
-                    this.task._start,
-                    this.gantt.gantt_start,
-                    'day'
-                ) *
-                this.gantt.options.column_width /
-                30;
         }
         return x;
     }

src/gantt.scss

@@ -89,6 +89,7 @@ $handle-color: #ddd !default;
 
 	.bar-wrapper {
 		cursor: pointer;
+		outline: none;
 
 		&:hover {
 			.bar {

src/index.js

@@ -89,6 +89,13 @@ export default class Gantt {
                 task._end = date_utils.add(task._start, 2, 'day');
             }
 
+            // if hours is not set, assume the last day is full day
+            // e.g: 2018-09-09 becomes 2018-09-09 23:59:59
+            const task_end_values = date_utils.get_date_values(task._end);
+            if (task_end_values.slice(3).every(d => d === 0)) {
+                task._end = date_utils.add(task._end, 24, 'hour');
+            }
+
             // invalid flag
             if (!task.start || !task.end) {
                 task.invalid = true;
@@ -179,6 +186,9 @@ export default class Gantt {
             }
         }
 
+        this.gantt_start = date_utils.start_of(this.gantt_start, 'day');
+        this.gantt_end = date_utils.start_of(this.gantt_end, 'day');
+
         // add date padding on both sides
         if (this.view_is(['Quarter Day', 'Half Day'])) {
             this.gantt_start = date_utils.add(this.gantt_start, -7, 'day');
@@ -561,10 +571,10 @@ export default class Gantt {
     }
 
     bind_grid_click() {
-        this.layers.grid.onclick = () => {
+        $.on(this.$svg, 'click', '.grid-row, .grid-header', () => {
             this.unselect_all();
             this.hide_popup();
-        };
+        });
     }
 
     bind_bar_events() {