Fixes issue #153 (first row is blank) (#155)

- If startFromMonday is false, startIndex needs to be assigned firstWeekDay modulo 7 (because otherwise if the first week day is Sunday, firstWeekDay is 7 from isoWeekday() and the index variable from guideArray is never >= 7, and so the first row just consists of 7 EmptyDay elements).
- Also split guideArray into dayArray and weekArray, since it is used for both days and weeks, but there can't be 7 rows of weeks in a calendar view for any month.
- Renamed the generateColumns() function to generateDatesForWeek() to better explain what it is doing.
- Removed the unnecessary intermediate "column" constant (it wasn't really being used).
- Renamed the 2 current value "index" variables in the map functions to better describe what they are being used for.
- Added some blank lines and spaces for better readability.

The snapshots in the tests were updated to remove the extra (empty) row that was being added due to the code previously looping over 7 weeks in every month, which has now been changed to 6 weeks.

CalendarPicker/DaysGridView.js

@@ -37,29 +37,39 @@ export default function DaysGridView(props) {
     maxRangeDuration,
     enableDateChange
   } = props;
+
   const today = moment();
+
   // let's get the total of days in this month, we need the year as well, since
   // leap years have different amount of days in February
   const totalDays = Utils.getDaysInMonth(month, year);
+
   // Let's create a date for day one of the current given month and year
   const firstDayOfMonth = moment({ year, month, day: 1 });
+
   // isoWeekday() gets the ISO day of the week with 1 being Monday and 7 being Sunday.
   // We will need this to know what day of the week to show day 1
   // See https://github.com/stephy/CalendarPicker/issues/49
   const firstWeekDay = firstDayOfMonth.isoWeekday();
+
   // fill up an array of days with the amount of days in the current month
   const days = Array.apply(null, {length: totalDays}).map(Number.call, Number);
-  const guideArray = [ 0, 1, 2, 3, 4, 5, 6 ];
+
+  // 7 days in a week.
+  const dayArray = [ 0, 1, 2, 3, 4, 5, 6 ];
+
+  // There can be 4 to 6 rows of weeks in a month.
+  const weekArray = [ 0, 1, 2, 3, 4, 5 ];
 
   // Get the starting index, based upon whether we are using monday or sunday as first day.
-  const startIndex = (startFromMonday) ? (firstWeekDay - 1) % 7 : firstWeekDay;
+  const startIndex = (startFromMonday ? firstWeekDay - 1 : firstWeekDay) % 7;
 
-  function generateColumns(i) {
-    const column = guideArray.map(index => {
+  function generateDatesForWeek(i) {
+    return dayArray.map(dayIndex => {
       if (i === 0) { // for first row, let's start showing the days on the correct weekday
-        if (index >= startIndex) {
+        if (dayIndex >= startIndex) {
           if (days.length > 0) {
-            const day= days.shift() + 1;
+            const day = days.shift() + 1;
             return (
               <Day
                 key={day}
@@ -97,7 +107,7 @@ export default function DaysGridView(props) {
         }
       } else {
         if (days.length > 0) {
-          const day= days.shift() + 1;
+          const day = days.shift() + 1;
           return (
             <Day
               key={day}
@@ -126,15 +136,14 @@ export default function DaysGridView(props) {
           );
         }
       }
-
     });
-    return column;
   }
+
   return (
     <View style={styles.daysWrapper}>
-      { guideArray.map(index => (
-          <View key={index} style={styles.weekRow}>
-            { generateColumns(index) }
+      { weekArray.map(weekIndexOfMonth => (
+          <View key={weekIndexOfMonth} style={styles.weekRow}>
+            { generateDatesForWeek(weekIndexOfMonth) }
           </View>
         ))
       }

CalendarPicker/__tests__/__snapshots__/CalendarPicker-test.js.snap

@@ -2409,13 +2409,6 @@ exports[`CalendarPicker It handle selectedStartDate and selectedEndDate props 1`
           }
         }
       />
-      <View
-        style={
-          Object {
-            "flexDirection": "row",
-          }
-        }
-      />
     </View>
   </View>
 </View>
@@ -5017,13 +5010,6 @@ exports[`CalendarPicker It renders calendar picker 1`] = `
           </View>
         </View>
       </View>
-      <View
-        style={
-          Object {
-            "flexDirection": "row",
-          }
-        }
-      />
     </View>
   </View>
 </View>
@@ -6568,13 +6554,6 @@ exports[`CalendarPicker It renders calendar picker with props 1`] = `
           }
         }
       />
-      <View
-        style={
-          Object {
-            "flexDirection": "row",
-          }
-        }
-      />
     </View>
   </View>
 </View>