Leantime · marcelfolaron · Jun 19, 2020 · Mar 30, 2021 · May 10, 2021 · Aug 10, 2021
diff --git a/README.md b/README.md
@@ -57,6 +57,7 @@ var gantt = new Gantt("#gantt", tasks, {
     padding: 18,
     view_mode: 'Day',
     date_format: 'YYYY-MM-DD',
+    language: 'en', // or 'es', 'it', 'ru', 'ptBr', 'fr', 'tr', 'zh', 'de', 'hu'
     custom_popup_html: null
 });
 ```

diff --git a/dist/frappe-gantt.js b/dist/frappe-gantt.js
diff --git a/dist/frappe-gantt.js.map b/dist/frappe-gantt.js.map
diff --git a/dist/frappe-gantt.min.js b/dist/frappe-gantt.min.js
diff --git a/dist/frappe-gantt.min.js.map b/dist/frappe-gantt.min.js.map
diff --git a/index.html b/index.html
@@ -16,13 +16,16 @@
 		.gantt .bar-milestone .bar {
 			fill: tomato;
 		}
+		.heading {
+			text-align: center;
+		}
 	</style>
 	<link rel="stylesheet" href="dist/frappe-gantt.css" />
 	<script src="dist/frappe-gantt.js"></script>
 </head>
 <body>
 	<div class="container">
-		<h2>Interactive Gantt Chart entirely made in SVG!</h2>
+		<h2 class="heading">Interactive Gantt Chart entirely made in SVG!</h2>
 		<div class="gantt-target"></div>
 	</div>
 	<script>
@@ -84,16 +87,16 @@ <h2>Interactive Gantt Chart entirely made in SVG!</h2>
 			}
 		]
 		var gantt_chart = new Gantt(".gantt-target", tasks, {
-			on_click: function (task) {
+			on_click: task => {
 				console.log(task);
 			},
-			on_date_change: function(task, start, end) {
+			on_date_change: (task, start, end) => {
 				console.log(task, start, end);
 			},
-			on_progress_change: function(task, progress) {
+			on_progress_change: (task, progress) => {
 				console.log(task, progress);
 			},
-			on_view_change: function(mode) {
+			on_view_change: (mode) => {
 				console.log(mode);
 			},
 			view_mode: 'Month',

diff --git a/src/bar.js b/src/bar.js
@@ -368,6 +368,7 @@ export default class Bar {
     }
 
     update_progressbar_position() {
+        if (this.invalid) return;
         this.$bar_progress.setAttribute('x', this.$bar.getX());
         this.$bar_progress.setAttribute(
             'width',
@@ -389,6 +390,7 @@ export default class Bar {
     }
 
     update_handle_position() {
+        if (this.invalid) return;
         const bar = this.$bar;
         this.handle_group
             .querySelector('.handle.left')

diff --git a/src/date_utils.js b/src/date_utils.js
@@ -6,107 +6,6 @@ const MINUTE = 'minute';
 const SECOND = 'second';
 const MILLISECOND = 'millisecond';
 
-const month_names = {
-    en: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December',
-    ],
-    es: [
-        'Enero',
-        'Febrero',
-        'Marzo',
-        'Abril',
-        'Mayo',
-        'Junio',
-        'Julio',
-        'Agosto',
-        'Septiembre',
-        'Octubre',
-        'Noviembre',
-        'Diciembre',
-    ],
-    ru: [
-        'Январь',
-        'Февраль',
-        'Март',
-        'Апрель',
-        'Май',
-        'Июнь',
-        'Июль',
-        'Август',
-        'Сентябрь',
-        'Октябрь',
-        'Ноябрь',
-        'Декабрь',
-    ],
-    ptBr: [
-        'Janeiro',
-        'Fevereiro',
-        'Março',
-        'Abril',
-        'Maio',
-        'Junho',
-        'Julho',
-        'Agosto',
-        'Setembro',
-        'Outubro',
-        'Novembro',
-        'Dezembro',
-    ],
-    fr: [
-        'Janvier',
-        'Février',
-        'Mars',
-        'Avril',
-        'Mai',
-        'Juin',
-        'Juillet',
-        'Août',
-        'Septembre',
-        'Octobre',
-        'Novembre',
-        'Décembre',
-    ],
-    tr: [
-        'Ocak',
-        'Şubat',
-        'Mart',
-        'Nisan',
-        'Mayıs',
-        'Haziran',
-        'Temmuz',
-        'Ağustos',
-        'Eylül',
-        'Ekim',
-        'Kasım',
-        'Aralık',
-    ],
-    zh: [
-        '一月',
-        '二月',
-        '三月',
-        '四月',
-        '五月',
-        '六月',
-        '七月',
-        '八月',
-        '九月',
-        '十月',
-        '十一月',
-        '十二月',
-    ],
-};
-
 export default {
     parse(date, date_separator = '-', time_separator = /[.:]/) {
         if (date instanceof Date) {
@@ -161,7 +60,14 @@ export default {
     },
 
     format(date, format_string = 'YYYY-MM-DD HH:mm:ss.SSS', lang = 'en') {
-        const values = this.get_date_values(date).map((d) => padStart(d, 2, 0));
+        const dateTimeFormat = new Intl.DateTimeFormat(lang, {
+            month: 'long'
+        });
+        const month_name = dateTimeFormat.format(date);
+        const month_name_capitalized =
+            month_name.charAt(0).toUpperCase() + month_name.slice(1);
+
+        const values = this.get_date_values(date).map(d => padStart(d, 2, 0));
         const format_map = {
             YYYY: values[0],
             MM: padStart(+values[1] + 1, 2, 0),
@@ -171,8 +77,8 @@ export default {
             ss: values[5],
             SSS: values[6],
             D: values[2],
-            MMMM: month_names[lang][+values[1]],
-            MMM: month_names[lang][+values[1]],
+            MMMM: month_name_capitalized,
+            MMM: month_name_capitalized,
         };
 
         let str = format_string;

diff --git a/src/index.js b/src/index.js
@@ -391,10 +391,7 @@ export default class Gantt {
                 tick_class += ' thick';
             }
             // thick ticks for quarters
-            if (
-                this.view_is(VIEW_MODE.MONTH) &&
-                (date.getMonth() + 1) % 3 === 0
-            ) {
+            if (this.view_is(VIEW_MODE.MONTH) && date.getMonth() % 3 === 0) {
                 tick_class += ' thick';
             }