From 1baaa785f38810dc3ecee41e5da8612bbbfc860a Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Mon, 20 May 2019 11:28:07 +0300
Subject: [PATCH] Fixed #894

---
 public/resources/themes/luna-amber/theme.css  | 17 +++++
 public/resources/themes/luna-blue/theme.css   | 17 +++++
 public/resources/themes/luna-green/theme.css  | 17 +++++
 public/resources/themes/luna-pink/theme.css   | 17 +++++
 .../resources/themes/nova-colored/theme.css   | 17 +++++
 public/resources/themes/nova-dark/theme.css   | 17 +++++
 public/resources/themes/nova-light/theme.css  | 17 +++++
 public/resources/themes/rhea/theme.css        | 17 +++++
 src/components/calendar/Calendar.d.ts         |  1 +
 src/components/calendar/Calendar.js           | 62 ++++++++++++++++---
 src/showcase/calendar/CalendarDemo.js         | 16 ++++-
 11 files changed, 204 insertions(+), 11 deletions(-)

diff --git a/public/resources/themes/luna-amber/theme.css b/public/resources/themes/luna-amber/theme.css
index e1279d2623..bc3c6fcab9 100644
--- a/public/resources/themes/luna-amber/theme.css
+++ b/public/resources/themes/luna-amber/theme.css
@@ -940,6 +940,9 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
+body .p-datepicker table th.p-datepicker-weekheader {
+  border-right: 1px solid #191919;
+}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -965,6 +968,9 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #212121;
   background-color: #FFB300;
 }
+body .p-datepicker table td.p-datepicker-weeknumber {
+  border-right: 1px solid #191919;
+}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #3f3f3f;
 }
@@ -2584,6 +2590,17 @@ body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-select
   background-color: #4c4c4c;
   color: #dedede;
 }
+body .p-tree .p-tree-filter-container .p-tree-filter {
+  width: 100%;
+  padding-right: 2em;
+}
+body .p-tree .p-tree-filter-container .p-tree-filter-icon {
+  top: 50%;
+  left: auto;
+  margin-top: -0.5em;
+  right: 0.8em;
+  color: #252525;
+}
 body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
diff --git a/public/resources/themes/luna-blue/theme.css b/public/resources/themes/luna-blue/theme.css
index e1c0ad71a9..2fc25c8fdc 100644
--- a/public/resources/themes/luna-blue/theme.css
+++ b/public/resources/themes/luna-blue/theme.css
@@ -940,6 +940,9 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
+body .p-datepicker table th.p-datepicker-weekheader {
+  border-right: 1px solid #191919;
+}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -965,6 +968,9 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #1f7ed0;
 }
+body .p-datepicker table td.p-datepicker-weeknumber {
+  border-right: 1px solid #191919;
+}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #3f3f3f;
 }
@@ -2584,6 +2590,17 @@ body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-select
   background-color: #4c4c4c;
   color: #dedede;
 }
+body .p-tree .p-tree-filter-container .p-tree-filter {
+  width: 100%;
+  padding-right: 2em;
+}
+body .p-tree .p-tree-filter-container .p-tree-filter-icon {
+  top: 50%;
+  left: auto;
+  margin-top: -0.5em;
+  right: 0.8em;
+  color: #252525;
+}
 body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
diff --git a/public/resources/themes/luna-green/theme.css b/public/resources/themes/luna-green/theme.css
index 53287df2d3..d8e84a5d22 100644
--- a/public/resources/themes/luna-green/theme.css
+++ b/public/resources/themes/luna-green/theme.css
@@ -940,6 +940,9 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
+body .p-datepicker table th.p-datepicker-weekheader {
+  border-right: 1px solid #191919;
+}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -965,6 +968,9 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #1ea04c;
 }
+body .p-datepicker table td.p-datepicker-weeknumber {
+  border-right: 1px solid #191919;
+}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #3f3f3f;
 }
@@ -2584,6 +2590,17 @@ body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-select
   background-color: #4c4c4c;
   color: #dedede;
 }
+body .p-tree .p-tree-filter-container .p-tree-filter {
+  width: 100%;
+  padding-right: 2em;
+}
+body .p-tree .p-tree-filter-container .p-tree-filter-icon {
+  top: 50%;
+  left: auto;
+  margin-top: -0.5em;
+  right: 0.8em;
+  color: #252525;
+}
 body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
diff --git a/public/resources/themes/luna-pink/theme.css b/public/resources/themes/luna-pink/theme.css
index ff5e69ed73..16d8c0ad67 100644
--- a/public/resources/themes/luna-pink/theme.css
+++ b/public/resources/themes/luna-pink/theme.css
@@ -940,6 +940,9 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
+body .p-datepicker table th.p-datepicker-weekheader {
+  border-right: 1px solid #191919;
+}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -965,6 +968,9 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #cc285c;
 }
+body .p-datepicker table td.p-datepicker-weeknumber {
+  border-right: 1px solid #191919;
+}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #3f3f3f;
 }
@@ -2584,6 +2590,17 @@ body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-select
   background-color: #4c4c4c;
   color: #dedede;
 }
+body .p-tree .p-tree-filter-container .p-tree-filter {
+  width: 100%;
+  padding-right: 2em;
+}
+body .p-tree .p-tree-filter-container .p-tree-filter-icon {
+  top: 50%;
+  left: auto;
+  margin-top: -0.5em;
+  right: 0.8em;
+  color: #252525;
+}
 body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background-color: #4c4c4c;
   color: #dedede;
diff --git a/public/resources/themes/nova-colored/theme.css b/public/resources/themes/nova-colored/theme.css
index 38427da511..daca429025 100644
--- a/public/resources/themes/nova-colored/theme.css
+++ b/public/resources/themes/nova-colored/theme.css
@@ -940,6 +940,9 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
+body .p-datepicker table th.p-datepicker-weekheader {
+  border-right: 1px solid #a6a6a6;
+}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -965,6 +968,9 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #007ad9;
 }
+body .p-datepicker table td.p-datepicker-weeknumber {
+  border-right: 1px solid #a6a6a6;
+}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #d8dae2;
 }
@@ -2584,6 +2590,17 @@ body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-select
   background-color: #eaeaea;
   color: #333333;
 }
+body .p-tree .p-tree-filter-container .p-tree-filter {
+  width: 100%;
+  padding-right: 2em;
+}
+body .p-tree .p-tree-filter-container .p-tree-filter-icon {
+  top: 50%;
+  left: auto;
+  margin-top: -0.5em;
+  right: 0.8em;
+  color: #007ad9;
+}
 body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background-color: #eaeaea;
   color: #333333;
diff --git a/public/resources/themes/nova-dark/theme.css b/public/resources/themes/nova-dark/theme.css
index 97e8c94330..d8d194aaf8 100644
--- a/public/resources/themes/nova-dark/theme.css
+++ b/public/resources/themes/nova-dark/theme.css
@@ -940,6 +940,9 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
+body .p-datepicker table th.p-datepicker-weekheader {
+  border-right: 1px solid #a6a6a6;
+}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -965,6 +968,9 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #007ad9;
 }
+body .p-datepicker table td.p-datepicker-weeknumber {
+  border-right: 1px solid #a6a6a6;
+}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #d8dae2;
 }
@@ -2584,6 +2590,17 @@ body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-select
   background-color: #eaeaea;
   color: #333333;
 }
+body .p-tree .p-tree-filter-container .p-tree-filter {
+  width: 100%;
+  padding-right: 2em;
+}
+body .p-tree .p-tree-filter-container .p-tree-filter-icon {
+  top: 50%;
+  left: auto;
+  margin-top: -0.5em;
+  right: 0.8em;
+  color: #007ad9;
+}
 body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background-color: #eaeaea;
   color: #333333;
diff --git a/public/resources/themes/nova-light/theme.css b/public/resources/themes/nova-light/theme.css
index 9887acdae3..2ab91ed3b3 100644
--- a/public/resources/themes/nova-light/theme.css
+++ b/public/resources/themes/nova-light/theme.css
@@ -940,6 +940,9 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
+body .p-datepicker table th.p-datepicker-weekheader {
+  border-right: 1px solid #a6a6a6;
+}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -965,6 +968,9 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #007ad9;
 }
+body .p-datepicker table td.p-datepicker-weeknumber {
+  border-right: 1px solid #a6a6a6;
+}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #d8dae2;
 }
@@ -2584,6 +2590,17 @@ body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-select
   background-color: #eaeaea;
   color: #333333;
 }
+body .p-tree .p-tree-filter-container .p-tree-filter {
+  width: 100%;
+  padding-right: 2em;
+}
+body .p-tree .p-tree-filter-container .p-tree-filter-icon {
+  top: 50%;
+  left: auto;
+  margin-top: -0.5em;
+  right: 0.8em;
+  color: #007ad9;
+}
 body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background-color: #eaeaea;
   color: #333333;
diff --git a/public/resources/themes/rhea/theme.css b/public/resources/themes/rhea/theme.css
index 25df6360e1..03bbbfb85a 100644
--- a/public/resources/themes/rhea/theme.css
+++ b/public/resources/themes/rhea/theme.css
@@ -940,6 +940,9 @@ body .p-datepicker table {
 body .p-datepicker table th {
   padding: 0.5em;
 }
+body .p-datepicker table th.p-datepicker-weekheader {
+  border-right: 1px solid #dadada;
+}
 body .p-datepicker table td {
   padding: 0.5em;
 }
@@ -965,6 +968,9 @@ body .p-datepicker table td.p-datepicker-today > span.p-highlight {
   color: #ffffff;
   background-color: #7B95A3;
 }
+body .p-datepicker table td.p-datepicker-weeknumber {
+  border-right: 1px solid #dadada;
+}
 body .p-datepicker .p-datepicker-buttonbar {
   border-top: 1px solid #d8dae2;
 }
@@ -2584,6 +2590,17 @@ body .p-tree.p-tree-horizontal .p-treenode .p-treenode-content.p-treenode-select
   background-color: #f4f4f4;
   color: #666666;
 }
+body .p-tree .p-tree-filter-container .p-tree-filter {
+  width: 100%;
+  padding-right: 2em;
+}
+body .p-tree .p-tree-filter-container .p-tree-filter-icon {
+  top: 50%;
+  left: auto;
+  margin-top: -0.5em;
+  right: 0.8em;
+  color: #a6a6a6;
+}
 body .p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node:not(.p-highlight):hover {
   background-color: #f4f4f4;
   color: #666666;
diff --git a/src/components/calendar/Calendar.d.ts b/src/components/calendar/Calendar.d.ts
index 6c98e89d1d..48fcf9879e 100644
--- a/src/components/calendar/Calendar.d.ts
+++ b/src/components/calendar/Calendar.d.ts
@@ -53,6 +53,7 @@ interface CalendarProps {
     stepSecond?: number;
     shortYearCutoff?: string;
     hideOnDateTimeSelect?: boolean;
+    showWeek: PropTypes.bool,
     locale?: LocaleSettings;
     dateFormat?: string;
     panelStyle?: object;
diff --git a/src/components/calendar/Calendar.js b/src/components/calendar/Calendar.js
index 5002af4d32..3d476f2023 100644
--- a/src/components/calendar/Calendar.js
+++ b/src/components/calendar/Calendar.js
@@ -42,6 +42,7 @@ export class Calendar extends Component {
         stepSecond: 1,
         shortYearCutoff: '+10',
         hideOnDateTimeSelect: false,
+        showWeek: false,
         locale: {
             firstDayOfWeek: 0,
             dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
@@ -50,7 +51,8 @@ export class Calendar extends Component {
             monthNames: [ "January","February","March","April","May","June","July","August","September","October","November","December" ],
             monthNamesShort: [ "Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ],
             today: 'Today',
-            clear: 'Clear'
+            clear: 'Clear',
+            weekHeader: 'Wk'
         },
         dateFormat: 'mm/dd/yy',
         panelStyle: null,
@@ -117,6 +119,7 @@ export class Calendar extends Component {
         stepSecond: PropTypes.number,
         shortYearCutoff: PropTypes.string,
         hideOnDateTimeSelect: PropTypes.bool,
+        showWeek: PropTypes.bool,
         locale: PropTypes.object,
         dateFormat: PropTypes.string,
         panelStyle: PropTypes.object,
@@ -938,6 +941,7 @@ export class Calendar extends Component {
         let prevMonthDaysLength = this.getDaysCountInPrevMonth(month, year);
         let dayNo = 1;
         let today = new Date();
+        let weekNumbers = [];
         
         for(let i = 0; i < 6; i++) {
             let week = [];
@@ -972,17 +976,31 @@ export class Calendar extends Component {
                     dayNo++;
                 }
             }
+
+            if (this.props.showWeek) {
+                weekNumbers.push(this.getWeekNumber(new Date(week[0].year, week[0].month, week[0].day))); 
+            }
             
             dates.push(week);
         }
-
+  
         return {
             month: month,
             year: year,
-            dates: dates
+            dates: dates,
+            weekNumbers: weekNumbers
         };
     }
 
+    getWeekNumber(date) {
+        let checkDate = new Date(date.getTime());
+		checkDate.setDate(checkDate.getDate() + 4 - ( checkDate.getDay() || 7 ));
+		let time = checkDate.getTime();
+		checkDate.setMonth( 0 );
+		checkDate.setDate( 1 );
+		return Math.floor( Math.round((time - checkDate.getTime()) / 86400000 ) / 7 ) + 1;
+    }
+
     isSelectable(day, month, year, otherMonth) {
         let validMin = true;
         let validMax = true;
@@ -1649,13 +1667,26 @@ export class Calendar extends Component {
     }
 
     renderDayNames(weekDays) {
-        return weekDays.map(weekDay =>
+        const dayNames = weekDays.map(weekDay =>
             (
                 <th key={weekDay} scope="col">
                     <span>{weekDay}</span>
                 </th>
             )
         );
+
+        if (this.props.showWeek) {
+            const weekHeader = (
+                <th scope="col" key={'wn'} className="p-datepicker-weekheader p-disabled">
+                    <span>{this.props.locale['weekHeader']}</span>
+                </th>
+            );
+
+            return [weekHeader, ...dayNames];
+        }
+        else {
+            return dayNames;
+        }
     }
 
     renderDateCellContent(date, className) {
@@ -1668,8 +1699,8 @@ export class Calendar extends Component {
         );
     }
 
-    renderWeek(weekDates) {
-        return weekDates.map((date) => {
+    renderWeek(weekDates, weekNumber) {
+        const week = weekDates.map((date) => {
             const selected = this.isSelected(date);
             const cellClassName = classNames({'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today});
             const dateClassName = classNames({'p-highlight': selected, 'p-disabled': !date.selectable});
@@ -1681,13 +1712,28 @@ export class Calendar extends Component {
                 </td>
             );
         });
-    } 
+
+        if (this.props.showWeek) {
+            const weekNumberCell = (               
+                <td key={'wn' + weekNumber} className="p-datepicker-weeknumber">
+                    <span className="p-disabled">
+                        {weekNumber}
+                    </span>
+                </td>
+            );
+
+            return [weekNumberCell, ...week];
+        }
+        else {
+            return week;
+        }
+    }
 
     renderDates(monthMetaData) {
         return monthMetaData.dates.map((weekDates, index) => {
             return (
                 <tr key={index}>
-                    {this.renderWeek(weekDates)}
+                    {this.renderWeek(weekDates, monthMetaData.weekNumbers[index])}
                 </tr>
             );
         });
diff --git a/src/showcase/calendar/CalendarDemo.js b/src/showcase/calendar/CalendarDemo.js
index 2eeae1001b..4cae632514 100644
--- a/src/showcase/calendar/CalendarDemo.js
+++ b/src/showcase/calendar/CalendarDemo.js
@@ -143,7 +143,7 @@ export class CalendarDemo extends Component {
                     </div>
 
                     <h3>Inline</h3>
-                    <Calendar value={this.state.date14} onChange={(e) => this.setState({date14: e.value})} inline={true} />
+                    <Calendar value={this.state.date14} onChange={(e) => this.setState({date14: e.value})} inline={true} showWeek={true} />
                 </div>
                 
                 <CalendarDoc></CalendarDoc>
@@ -314,7 +314,11 @@ let es = {
     dayNamesShort: ["dom", "lun", "mar", "mié", "jue", "vie", "sáb"],
     dayNamesMin: ["D", "L", "M", "X", "J", "V", "S"],
     monthNames: ["enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre"],
-    monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"]
+    monthNamesShort: ["ene", "feb", "mar", "abr", "may", "jun", "jul", "ago", "sep", "oct", "nov", "dic"],
+    today: 'Hoy',
+    clear: 'Limpiar',
+    dateFormat: 'dd/mm/yy',
+    weekHeader: 'Sm'
 };
 
 `}
@@ -578,6 +582,12 @@ dateTemplate(date) {
                             <td>false</td>
                             <td>Whether to hide the overlay on date selection when showTime is enabled.</td>
                         </tr>
+                        <tr>
+                            <td>showWeek</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>When enabled, calendar will show week numbers.</td>
+                        </tr>
                         <tr>
                             <td>dateFormat</td>
                             <td>string</td>
@@ -983,7 +993,7 @@ export class CalendarDemo extends Component {
                     </div>
 
                     <h3>Inline</h3>
-                    <Calendar value={this.state.date14} onChange={(e) => this.setState({date14: e.value})} inline={true} />
+                    <Calendar value={this.state.date14} onChange={(e) => this.setState({date14: e.value})} inline={true} showWeek={true} />
                 </div>
             </div>
         );