Merge pull request #28 from itsnorbertkalacska/feature/add-possibilit…

…y-to-start-week-on-sunday-or-monday Feature/add possibility to start week on sunday or monday
nathanstitt · Oct 24, 2019 · cd1ddec · cd1ddec
2 parents 86fd4b0 + 255b7a0
commit cd1ddec
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 65 deletions.
diff --git a/README.md b/README.md
@@ -77,6 +77,8 @@ The Dayz component accepts these properties:
  * **onEventClick**, **onEventDoubleClick** (optional): A function that will be called whenever an event is clicked, it's passed two variables, the event and the layout information for the event.  The layout has an `event` subkey that includes the event itself.
  * **displayHours** (optional): defaults to 7am to 7pm or the earliest/latest event's hour.
  * **timeFormat** (optional): defaults to `ha` configures y labels time format
+ * **locale** (optional): defaults to `en`. A string to determine the localization.
+ * **weekStartsOn** (optional): defaults to `undefined`. Determines whether the week should start on Monday or Sunday. By default it uses what the localization offers (see `locale` prop). It can accept either `0` to start the week on Sunday or `1` to start the week on Monday.
 
 Dayz applies these css classes:
  * The reference **date** prop will have a css class "current"

diff --git a/src/api/layout.js b/src/api/layout.js
@@ -54,17 +54,49 @@ export default class Layout {
         if (this.range) {
             return;
         }
+
+        const start = moment(this.date).locale(this.locale);
+        const end = moment(this.date).locale(this.locale);
+
+        if ('week' === this.display) {
+            if (this.weekStartsOn !== undefined) {
+                start.startOf('isoWeek');
+                end.endOf('isoWeek');
+                if (0 === this.weekStartsOn && 1 === start.isoWeekday()) {
+                    start.subtract(1, 'day');
+                    end.subtract(1, 'day');
+                }
+            } else {
+                start.startOf(this.display);
+                end.endOf(this.display);
+            }
+        } else {
+            start.startOf(this.display);
+            end.endOf(this.display);
+        }
+
         this.range = moment.range(
-            moment(this.date).startOf(this.display),
-            moment(this.date).endOf(this.display),
+            start,
+            end,
         );
 
         if (this.isDisplayingAsMonth) {
+            let startWeekday;
+            let maxWeekday = 6;
+            if (this.weekStartsOn !== undefined) {
+                startWeekday = this.range.start.isoWeekday();
+                if (1 === this.weekStartsOn) {
+                    startWeekday -= 1;
+                    maxWeekday += 1;
+                }
+            } else {
+                startWeekday = this.range.start.weekday();
+            }
             this.range.start.subtract(
-                this.range.start.weekday(), 'days',
+                startWeekday, 'days',
             );
             this.range.end.add(
-                6 - this.range.end.weekday(), 'days',
+                maxWeekday - this.range.end.isoWeekday(), 'days',
             );
         }
     }

diff --git a/src/dayz.js b/src/dayz.js
@@ -25,6 +25,7 @@ export default class Dayz extends React.Component {
         highlightDays:     PropTypes.oneOfType(
             [PropTypes.array, PropTypes.func],
         ),
+        weekStartsOn:      PropTypes.oneOf([0, 1]),
     }
 
     static defaultProps = {
@@ -95,6 +96,7 @@ export default class Dayz extends React.Component {
                     display={this.props.display}
                     dateFormat={this.props.dateFormat}
                     locale={this.props.locale}
+                    weekStartsOn={this.props.weekStartsOn}
                 />
                 <div className="body">
                     <YLabels

diff --git a/src/x-labels.js b/src/x-labels.js
@@ -5,18 +5,30 @@ import PropTypes from 'prop-types';
 export default class XLabels extends React.Component {
 
     static propTypes = {
-        display:    PropTypes.oneOf(['month', 'week', 'day']),
-        date:       PropTypes.object.isRequired,
-        dateFormat: PropTypes.string,
-        locale:     PropTypes.string.isRequired,
+        display:      PropTypes.oneOf(['month', 'week', 'day']),
+        date:         PropTypes.object.isRequired,
+        dateFormat:   PropTypes.string,
+        locale:       PropTypes.string.isRequired,
+        weekStartsOn: PropTypes.oneOf([0, 1]),
     }
 
     get days() {
         const days = [];
+
         if ('day' === this.props.display) {
             days.push(moment(this.props.date));
         } else {
-            const day = moment(this.props.date).locale(this.props.locale).startOf('week');
+            let startOfType = 'week';
+            const day = moment(this.props.date).locale(this.props.locale);
+            if (this.props.weekStartsOn !== undefined) {
+                startOfType = 'isoWeek';
+                day.startOf(startOfType);
+                if (0 === this.props.weekStartsOn && 1 === day.isoWeekday()) {
+                    day.subtract(1, 'day');
+                }
+            } else {
+                day.startOf(startOfType);
+            }
             for (let i = 0; i < 7; i += 1) {
                 days.push(day.clone().add(i, 'day'));
             }
@@ -31,9 +43,10 @@ export default class XLabels extends React.Component {
 
     render() {
         return (
-            <div className="x-labels">{this.days.map(day => <div key={day.format('YYYYMMDD')} className="day-label">
-                {day.locale(this.props.locale).format(this.dateFormat)}
-            </div>)}
+            <div className="x-labels">
+                {this.days.map(day => <div key={day.format('YYYYMMDD')} className="day-label">
+                    {day.locale(this.props.locale).format(this.dateFormat)}
+                </div>)}
             </div>
         );
     }