Implementation of Per Day

CONTRIBUTORS.md

@@ -12,6 +12,6 @@ Just a few guidelines before submitting issues and pull requests:
 - Ensure the code passes [JSHint](http://jshint.com) completely
 - Always strive to write code that meets [best practices](http://taitems.github.com/Front-End-Development-Guidelines/)
 - If you're attempting to solve a very unique bug, a test case is preferred
-- Please target all pull requests to the [develop](/../../tree/develop) branch
+- Please target all pull requests to the [master](/../../tree/master) branch
 
 And thanks once again!

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Marek Bielańczuk, Tait Brown, Leo Pfeifenberger, Grzegorz Russek and Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,5 +1,13 @@
-[Demo and Documentation](http://taitems.github.com/jQuery.Gantt/)
-==============
+![npm](https://img.shields.io/npm/v/@taitems/jquery-gantt)
+## [Demo and Documentation](http://taitems.github.com/jQuery.Gantt/)
+
+## Installation
+
+- Git clone
+- `yarn add @taitems/jquery-gantt`, or
+- `npm install @taitems/jquery-gantt` 
+
+## About
 
 jQuery Gantt Chart is a simple chart that implements gantt functionality as 
 a jQuery component.

css/style.css

@@ -1,14 +1,14 @@
-.gantt, .gantt2 {
+.gantt {
     width: 100%;
     margin: 20px auto;
     border: 14px solid #ddd;
     position: relative;
-        -webkit-border-radius: 6px;
-        -moz-border-radius: 6px;
+-webkit-border-radius: 6px;
+   -moz-border-radius: 6px;
         border-radius: 6px;
-            -webkit-box-sizing: border-box;
-            -moz-box-sizing: border-box;
-            box-sizing: border-box;
+-webkit-box-sizing: border-box;
+   -moz-box-sizing: border-box;
+        box-sizing: border-box;
 }
 
 .gantt:after {
@@ -23,13 +23,26 @@
     width: 100%;
 }
 
+.fn-gantt *,
+.fn-gantt *:after,
+.fn-gantt *:before {
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
 .fn-gantt .fn-content {
     overflow: hidden;
     position: relative;
     width: 100%;
 }
 
-
+.fn-gantt .row {
+    float: left;
+    height: 24px;
+    line-height: 24px;
+    margin: 0;
+}
 
 
 /* === LEFT PANEL === */
@@ -43,13 +56,6 @@
     z-index: 20;
 }
 
-.fn-gantt .row {
-    float: left;
-    height: 24px;
-    line-height: 24px;
-    margin-left: -1px;
-}
-
 .fn-gantt .leftPanel .fn-label {
     display: inline-block;
     margin: 0 0 0 5px;
@@ -60,34 +66,27 @@
     overflow: hidden;
 }
 
-.fn-gantt .leftPanel .row0 {
-    border-top: 1px solid #DDD;
+.fn-gantt .leftPanel .row {
+    border-bottom: 1px solid #DDD;
 }
 .fn-gantt .leftPanel .name, .fn-gantt .leftPanel .desc {
     float: left;
-    height: 23px;
-    margin: 0;
-    border-bottom: 1px solid #DDD;
+    height: 24px;
+    width: 50%;
     background-color: #f6f6f6;
 }
 
 .fn-gantt .leftPanel .name {
-    width: 110px;
     font-weight: bold;
 }
 
-.fn-gantt .leftPanel .desc {
-    width: 115px;
-}
-
 .fn-gantt .leftPanel .fn-wide, .fn-gantt .leftPanel .fn-wide .fn-label {
-    width: 225px;
+    width: 100%;
 }
 
-.fn-gantt .spacer {
-    margin: -2px 0 1px 0;
-    border-bottom: none;
+.fn-gantt .leftPanel .spacer {
     background-color: #f6f6f6;
+    width: 100%;
 }
 
 
@@ -100,44 +99,37 @@
 }
 
 .fn-gantt .dataPanel {
-    margin-left: 0px;
-    border-right: 1px solid #DDD;
+    margin-left: 0;
+    outline: 1px solid #DDD;
+    /* TODO: Replace image with gradient?
+    background-size: 24px 24px;
+    background-image: linear-gradient(to left, rgba(221, 221, 221, 0.7) 1px, transparent 1px), linear-gradient(to top, rgba(221, 221, 221, 0.7) 1px, transparent 1px);
+    */
     background-image: url(../img/grid.png);
     background-repeat: repeat;
-    background-position: 24px 24px;
     position: relative;
 }
+
+.fn-gantt .row.header {
+    margin-right: -1px;
+    width: 100%;
+}
+
 .fn-gantt .day, .fn-gantt .date {
     overflow: visible;
     width: 24px;
     line-height: 24px;
     text-align: center;
-    border-left: 1px solid #DDD;
+    border-right: 1px solid #DDD;
     border-bottom: 1px solid #DDD;
-    margin: -1px 0 0 -1px;
     font-size: 11px;
     color: #484a4d;
     text-shadow: 0 1px 0 rgba(255,255,255,0.75);
     text-align: center;
 }
 
-.fn-gantt .holiday {
-    background-color: #ffd263;
-    height: 23px;
-    margin: 0 0 -1px -1px;
-}
-
-.fn-gantt .today {
-    background-color: #fff8da;
-    height: 23px;
-    margin: 0 0 -1px -1px;
-    font-weight: bold;
-    text-align: center;
-}
-
 .fn-gantt .sa, .fn-gantt .sn, .fn-gantt .wd {
-    height: 23px;
-    margin: 0 0 0 -1px;
+    height: 24px;
     text-align: center;
 }
 
@@ -152,13 +144,24 @@
     text-align: center;
 }
 
+.fn-gantt .holiday {
+    background-color: #ffd263;
+    height: 24px;
+}
+
+.fn-gantt .today {
+    background-color: #fff8da;
+    height: 24px;
+    font-weight: bold;
+    text-align: center;
+}
+
 .fn-gantt .rightPanel .month, .fn-gantt .rightPanel .year {
     float: left;
     overflow: hidden;
-    border-left: 1px solid #DDD;
+    border-right: 1px solid #DDD;
     border-bottom: 1px solid #DDD;
-    height: 23px;
-    margin: 0 0 0 -1px;
+    height: 24px;
     background-color: #f6f6f6;
     font-weight: bold;
     font-size: 11px;
@@ -174,24 +177,24 @@
     position: absolute;
     display: none;
     z-index: 11;
-        -webkit-border-radius: 4px;
-        -moz-border-radius: 4px;
+-webkit-border-radius: 4px;
+   -moz-border-radius: 4px;
         border-radius: 4px;
 }
 
 .fn-gantt .bar {
     background-color: #D0E4FD;
     height: 18px;
-    margin: 0px 3px 3px 0px;
+    margin: 0 3px 3px 0;
     position: absolute;
     z-index: 10;
     text-align: center;
-        -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
-        -moz-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
+-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
+   -moz-box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
         box-shadow: 0 0 1px rgba(0,0,0,0.25) inset;
-            -webkit-border-radius: 3px;
-            -moz-border-radius: 3px;
-            border-radius: 3px;
+-webkit-border-radius: 3px;
+   -moz-border-radius: 3px;
+        border-radius: 3px;
 }
 
 .fn-gantt .bar .fn-label {
@@ -278,20 +281,20 @@
     height: 6px;
     background-color: #838688;
     margin: 8px 0 0 0;
-        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;
-        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;
+-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;
+   -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;
         box-shadow: 0 1px 3px rgba(0,0,0,0.6) inset;
-            -webkit-border-radius: 3px;
-            -moz-border-radius: 3px;
-            border-radius: 3px;
+-webkit-border-radius: 3px;
+   -moz-border-radius: 3px;
+        border-radius: 3px;
 }
 
 .fn-gantt .navigate .nav-slider-button {
     width: 17px;
     height: 60px;
     background: url(../img/slider_handle.png) center center no-repeat;
-    left: 0px;
-    top: 0px;
+    left: 0;
+    top: 0;
     margin: -26px 0 0 0;
     cursor: pointer;
 }
@@ -319,25 +322,25 @@
     display: inline-block;
     width: 20px;
     height: 20px;
-    font-size: 0px;
+    font-size: 0;
     background: #595959 url(../img/icon_sprite.png) !important;
     border: 1px solid #454546;
     cursor: pointer;
     vertical-align: top;
-        -webkit-border-radius: 2px;
-        -moz-border-radius: 2px;
+-webkit-border-radius: 2px;
+   -moz-border-radius: 2px;
         border-radius: 2px;
-            -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 1px rgba(0,0,0,0.2);
-            -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 1px rgba(0,0,0,0.2);
-            box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 1px rgba(0,0,0,0.2);
-                -webkit-box-sizing: border-box;
-                -moz-box-sizing: border-box;
-                box-sizing: border-box;
+-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 1px rgba(0,0,0,0.2);
+   -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 1px rgba(0,0,0,0.2);
+        box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset, 0 1px 1px rgba(0,0,0,0.2);
+-webkit-box-sizing: border-box;
+   -moz-box-sizing: border-box;
+        box-sizing: border-box;
 }
 .fn-gantt .nav-link:active {
-    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset, 0 1px 0 #FFF;
-    -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset, 0 1px 0 #FFF;
-    box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset, 0 1px 0 #FFF;
+-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset, 0 1px 0 #FFF;
+   -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset, 0 1px 0 #FFF;
+        box-shadow: 0 1px 1px rgba(0,0,0,0.25) inset, 0 1px 0 #FFF;
 }
 
 .fn-gantt .navigate .nav-page-back {