From c2a28fed29738746f474e6468aa65df7f6eb3c99 Mon Sep 17 00:00:00 2001
From: Rabea Gransberger <rgransberger@gmx.de>
Date: Mon, 28 Dec 2015 15:04:17 +0100
Subject: [PATCH 1/2] Add date header to a headerPanel and set styling to
 fixed. This will make the header staying visible when scrolling down in a
 long chart.

---
 css/style.css         |  6 ++++++
 js/jquery.fn.gantt.js | 25 ++++++++++++++++---------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/css/style.css b/css/style.css
index 0756dfe..c0fa5cb 100644
--- a/css/style.css
+++ b/css/style.css
@@ -102,6 +102,12 @@
     overflow: hidden;
 }
 
+.fn-gantt .headerPanel {
+    position: fixed;
+    overflow: visible;
+    z-index: 15;
+}
+
 .fn-gantt .dataPanel {
     margin-left: 0px;
     border-right: 1px solid #DDD;
diff --git a/js/jquery.fn.gantt.js b/js/jquery.fn.gantt.js
index 564f419..6060ffd 100644
--- a/js/jquery.fn.gantt.js
+++ b/js/jquery.fn.gantt.js
@@ -449,7 +449,7 @@
                 var i, len;
                 var year, month, week, day;
                 var rday, dayClass;
-                var dataPanel;
+                var headerWidth, headerPanel;
 
                 // Setup the headings based on the chosen `settings.scale`
                 switch (settings.scale) {
@@ -562,10 +562,11 @@
                         'style="width: ' + tools.getCellSize() * hoursInDay + 'px;">' +
                         '<div class="fn-label">' + settings.dow[day.getDay()] + '</div></div>');
 
-                    dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
+                    headerPanel = $('<div class="headerPanel" style="width: '
+							+ range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
-                    dataPanel.append(
+                    headerPanel.append(
                         $row.clone().html(yearArr.join("")),
                         $row.clone().html(monthArr.join("")),
                         $row.clone().html(dayArr.join("")),
@@ -644,10 +645,11 @@
                         settings.months[month] +
                         '</div></div>');
 
-                    dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
+                    headerPanel = $('<div class="headerPanel" style="width: '
+							+ range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
-                    dataPanel.append(
+                    headerPanel.append(
                         $row.clone().html(yearArr.join("")),
                         $row.clone().html(monthArr.join("")),
                         $row.clone().html(dayArr.join(""))
@@ -697,10 +699,11 @@
                         settings.months[month] +
                         '</div></div>');
 
-                    dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
+                    headerPanel = $('<div class="headerPanel" style="width: '
+							+ range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
-                    dataPanel.append(
+                    headerPanel.append(
                         $row.clone().html(yearArr.join("")),
                         $row.clone().html(monthArr.join("")),
                         $row.clone().html(dayArr.join("")),
@@ -779,16 +782,20 @@
                         settings.months[month] +
                         '</div></div>');
 
-                    dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
+                    headerPanel = $('<div class="headerPanel" style="width: '
+							+ range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
-                    dataPanel.append(
+                    headerPanel.append(
                         $row.clone().html(yearArr.join("")),
                         $row.clone().html(monthArr.join("")),
                         $row.clone().html(dayArr.join("")),
                         $row.clone().html(dowArr.join(""))
                     );
                 }
+                
+                var dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
+				dataPanel.append(headerPanel);
 
                 return $('<div class="rightPanel"></div>').append(dataPanel);
             },

From b6d3bfde53aa2cc671f3e44311e197af352d1597 Mon Sep 17 00:00:00 2001
From: Rabea Gransberger <rgransberger@gmx.de>
Date: Mon, 28 Dec 2015 15:39:18 +0100
Subject: [PATCH 2/2] Fixing indent

---
 js/jquery.fn.gantt.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/js/jquery.fn.gantt.js b/js/jquery.fn.gantt.js
index 6060ffd..8b274a1 100644
--- a/js/jquery.fn.gantt.js
+++ b/js/jquery.fn.gantt.js
@@ -563,7 +563,7 @@
                         '<div class="fn-label">' + settings.dow[day.getDay()] + '</div></div>');
 
                     headerPanel = $('<div class="headerPanel" style="width: '
-							+ range.length * tools.getCellSize() + 'px;"/>');
+                            + range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
                     headerPanel.append(
@@ -646,7 +646,7 @@
                         '</div></div>');
 
                     headerPanel = $('<div class="headerPanel" style="width: '
-							+ range.length * tools.getCellSize() + 'px;"/>');
+                            + range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
                     headerPanel.append(
@@ -700,7 +700,7 @@
                         '</div></div>');
 
                     headerPanel = $('<div class="headerPanel" style="width: '
-							+ range.length * tools.getCellSize() + 'px;"/>');
+                            + range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
                     headerPanel.append(
@@ -783,7 +783,7 @@
                         '</div></div>');
 
                     headerPanel = $('<div class="headerPanel" style="width: '
-							+ range.length * tools.getCellSize() + 'px;"/>');
+                            + range.length * tools.getCellSize() + 'px;"/>');
 
                     // Append panel elements
                     headerPanel.append(
@@ -793,9 +793,9 @@
                         $row.clone().html(dowArr.join(""))
                     );
                 }
-                
+
                 var dataPanel = core.dataPanel(element, range.length * tools.getCellSize());
-				dataPanel.append(headerPanel);
+                dataPanel.append(headerPanel);
 
                 return $('<div class="rightPanel"></div>').append(dataPanel);
             },