Merge pull request #423 from safwansamsudeen/master

Pre v1 Cleanup

src/bar.js

@@ -154,7 +154,7 @@ export default class Bar {
             this.gantt.options.column_width;
 
         let $date_highlight = document.createElement('div');
-        $date_highlight.id = `${this.task.id}-highlight`;
+        $date_highlight.id = `highlight-${this.task.id}`;
         $date_highlight.classList.add('date-highlight');
         $date_highlight.style.height = this.height * 0.8 + 'px';
         $date_highlight.style.width = this.width + 'px';
@@ -289,7 +289,7 @@ export default class Bar {
                 if (!opened) {
                     this.show_popup(e.offsetX || e.layerX);
                     document.getElementById(
-                        `${task_id}-highlight`,
+                        `highlight-${task_id}`,
                     ).style.display = 'block';
                 } else {
                     this.gantt.hide_popup();

src/date_utils.js

@@ -6,20 +6,6 @@ const MINUTE = 'minute';
 const SECOND = 'second';
 const MILLISECOND = 'millisecond';
 
-const SHORTENED = {
-    January: 'Jan',
-    February: 'Feb',
-    March: 'Mar',
-    April: 'Apr',
-    May: 'May',
-    June: 'Jun',
-    July: 'Jul',
-    August: 'Aug',
-    September: 'Sep',
-    October: 'Oct',
-    November: 'Nov',
-    December: 'Dec',
-};
 
 export default {
     parse_duration(duration) {
@@ -97,6 +83,9 @@ export default {
         const dateTimeFormat = new Intl.DateTimeFormat(lang, {
             month: 'long',
         });
+        const dateTimeFormatShort = new Intl.DateTimeFormat(lang, {
+            month: "short",
+        });
         const month_name = dateTimeFormat.format(date);
         const month_name_capitalized =
             month_name.charAt(0).toUpperCase() + month_name.slice(1);
@@ -112,7 +101,7 @@ export default {
             SSS: values[6],
             D: values[2],
             MMMM: month_name_capitalized,
-            MMM: SHORTENED[month_name_capitalized],
+            MMM: dateTimeFormatShort.format(date),
         };
 
         let str = format_string;

src/index.js

@@ -688,12 +688,18 @@ export default class Gantt {
         }
     }
 
-    //compute the horizontal x distance
+    /**
+    * Compute the horizontal x-axis distance and associated date for the current date and view.
+    * 
+    * @returns Object containing the x-axis distance and date of the current date, or null if the current date is out of the gantt range.
+    */
     computeGridHighlightDimensions(view_mode) {
+        const todayDate = new Date();
+        if (todayDate < this.gantt_start || todayDate > this.gantt_end) return null;
+
         let x = this.options.column_width / 2;
 
         if (this.view_is(VIEW_MODE.DAY)) {
-            let today = date_utils.today();
             return {
                 x:
                     x +
@@ -740,11 +746,10 @@ export default class Gantt {
             this.view_is(VIEW_MODE.YEAR)
         ) {
             // Used as we must find the _end_ of session if view is not Day
-            const { x: left, date } = this.computeGridHighlightDimensions(
-                this.options.view_mode,
-            );
-            if (!date || !this.dates.find((d) => d.getTime() == date.getTime()))
-                return;
+            const highlightDimensions = this.computeGridHighlightDimensions(this.options.view_mode);
+            if (!highlightDimensions) return;
+            const { x: left, date } = highlightDimensions;
+            if (!this.dates.find((d) => d.getTime() == date.getTime())) return;
             const top = this.options.header_height + this.options.padding / 2;
             const height =
                 (this.options.bar_height + this.options.padding) *
@@ -1006,7 +1011,7 @@ export default class Gantt {
             formatted_date: date_utils.format(date).replaceAll(' ', '_'),
             column_width,
             base_pos_x: base_pos.x,
-            upper_text: this.options.lower_text
+            upper_text: this.options.upper_text
                 ? this.options.upper_text(
                       date,
                       this.options.view_mode,