Add firstDay prop to start week on any day (#271, #266)

Preserves `startFromMonday` prop

CalendarPicker/DaysGridView.js

@@ -16,7 +16,7 @@ export default class DaysGridView extends Component {
         month,
         year,
         showDayStragglers,
-        startFromMonday,
+        firstDay = 0,
       } = props;
 
       // Retrieve total days in this month & year, accounting for leap years.
@@ -43,8 +43,8 @@ export default class DaysGridView extends Component {
       // isoWeekday() gets the ISO day of the week with 1=Monday and 7=Sunday.
       const firstWeekDay = firstDayOfMonth.isoWeekday();
 
-      // Determine starting index based on first day of week as Monday or Sunday.
-      const startIndex = (startFromMonday ? firstWeekDay - 1 : firstWeekDay) % 7;
+      // Determine starting index based on first day of week prop.
+      const startIndex = (firstDay > 0) ? (firstWeekDay + Utils.FIRST_DAY_OFFSETS[firstDay]) % 7 : firstWeekDay;
 
       return {
         maxWeekRows: 6,
@@ -244,7 +244,7 @@ DaysGridView.propTypes = {
   month: PropTypes.number.isRequired,
   year: PropTypes.number.isRequired,
   onPressDay: PropTypes.func,
-  startFromMonday: PropTypes.bool,
+  firstDay: PropTypes.number,
   selectedDayStyle: stylePropType,
   selectedRangeStartStyle: stylePropType,
   selectedRangeStyle: stylePropType,

CalendarPicker/Utils.js

@@ -9,13 +9,13 @@ export const Utils = {
   START_DATE: 'START_DATE',
   END_DATE: 'END_DATE',
   WEEKDAYS: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-  WEEKDAYS_MON: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
   MONTHS: [
     'January', 'February', 'March', 'April', 'May', 'June', 'July',
     'August', 'September', 'October', 'November', 'December'
   ],
   MAX_ROWS: 7,
   MAX_COLUMNS: 7,
+  FIRST_DAY_OFFSETS: [0, -1, 5, 4, 3, 2, 1],
   getDaysInMonth: function(month, year) {
     const lastDayOfMonth = new Date(year, month + 1, 0);
     return lastDayOfMonth.getDate();
@@ -48,5 +48,23 @@ export const Utils = {
       return true;
     }
     return !!a && !!b && a.isSame(b, granularity);
-  }
+  },
+  getWeekdays: function(firstDay = 0) {
+    let from = firstDay;
+    const weekdays = [];
+    for (let i = 0; i < Utils.WEEKDAYS.length; i++) {
+      weekdays.push(Utils.WEEKDAYS[from]);
+      from = from >= Utils.WEEKDAYS.length - 1 ? 0 : from + 1;
+    }
+    return weekdays;
+  },
+  getISOWeekdaysOrder: function(firstDay = 0) {
+    let from = firstDay === 0 ? 7 : firstDay;
+    const order = [];
+    for (let i = 0; i < Utils.WEEKDAYS.length; i++) {
+      order.push(from);
+      from = from >= Utils.WEEKDAYS.length ? 1 : from + 1;
+    }
+    return order;
+  },
 };

CalendarPicker/Weekdays.js

@@ -9,7 +9,7 @@ import { Utils } from './Utils';
 export default function Weekdays(props) {
   const {
     styles,
-    startFromMonday,
+    firstDay,
     currentMonth: month,
     currentYear: year,
     weekdays,
@@ -19,10 +19,10 @@ export default function Weekdays(props) {
   } = props;
 
   // dayOfWeekNums: ISO week day numbers
-  const dayOfWeekNums = startFromMonday ? [1, 2, 3, 4, 5, 6, 7] : [7, 1, 2, 3, 4, 5, 6];
+  const dayOfWeekNums = Utils.getISOWeekdaysOrder(firstDay);
   let wd = weekdays;
   if (!wd) {
-    wd = startFromMonday? Utils.WEEKDAYS_MON : Utils.WEEKDAYS; // English Week days Array
+    wd = firstDay ? Utils.getWeekdays(firstDay) : Utils.WEEKDAYS; // English Week days Array
   }
 
   return (
@@ -49,7 +49,7 @@ export default function Weekdays(props) {
 }
 
 Weekdays.propTypes = {
-  startFromMonday: PropTypes.bool,
+  firstDay: PropTypes.number,
   weekdays: PropTypes.array,
   customDayHeaderStyles: PropTypes.func,
 };

CalendarPicker/__tests__/CalendarPicker-test.js

@@ -19,7 +19,7 @@ describe('CalendarPicker', function() {
     const maxDate = new Date(2017, 6, 3);
     const CalendarPicker = renderer.create(
       <CalenderPicker
-        startFromMonday={true}
+        firstDay={0}
         allowRangeSelection={true}
         initialDate={new Date(2017, 11, 31)}
         minDate={minDate}

CalendarPicker/index.js

@@ -376,7 +376,7 @@ export default class CalendarPicker extends Component {
       selectedStartDate: state.selectedStartDate,
       selectedEndDate: state.selectedEndDate,
       enableDateChange: this.props.enableDateChange,
-      startFromMonday: this.props.startFromMonday,
+      firstDay: this.props.startFromMonday ? 1 : this.props.firstDay,
       allowRangeSelection: this.props.allowRangeSelection,
       allowBackwardRangeSelect: this.props.allowBackwardRangeSelect,
       showDayStragglers: this.props.showDayStragglers,
@@ -459,6 +459,7 @@ export default class CalendarPicker extends Component {
 
     const {
       startFromMonday,
+      firstDay,
       initialDate,
       weekdays,
       months,
@@ -555,7 +556,7 @@ export default class CalendarPicker extends Component {
           />
           <Weekdays
             styles={styles}
-            startFromMonday={startFromMonday}
+            firstDay={startFromMonday ? 1 : firstDay}
             currentMonth={currentMonth}
             currentYear={currentYear}
             weekdays={weekdays}

README.md

@@ -78,6 +78,7 @@ const styles = StyleSheet.create({
 :------------ |:---------------| :-----|
 | **`weekdays`** | `Array` | Optional. List of week days. Eg. `['Mon', 'Tue', ...]` Must be 7 days |
 | **`months`** | `Array` | Optional. List of months names. Eg. `['Jan', 'Feb', ...]` Must be 12 months |
+| **`firstDay`** | `Number` | Optional. Default first day of week will be Sunday. You can set start of week with number from `0` to `6`. Default is `0` or Sunday |
 | **`startFromMonday`** | `Boolean` | Optional. Default first day of week will be Sunday. You can set start of week from Monday by setting this to true. Default is `false` |
 | **`showDayStragglers`** | `Boolean` | Optional. Populate previous & next month days in empty slots. Default is `false` |
 | **`allowRangeSelection`** | `Boolean` | Optional. Allow to select date ranges. Default is `false` |