api: simplify period marking even further

Author: Tautvilas Mecinskas

README.md

@@ -159,10 +159,10 @@ Period marking
 <Calendar
   // Collection of dates that have to be colored in a special way. Default = {}
    markedDates={
-    {'2012-05-20': {periods: [{textColor: 'green'}]},
-     '2012-05-22': {periods: [{startingDay: true, color: 'green'}]},
-     '2012-05-23': {selected: true, periods: [{endingDay: true, color: 'green', textColor: 'gray'}]},
-     '2012-05-04': {disabled: true, periods: [{startingDay: true, color: 'green'}, {endingDay: true, color: 'green'}]}
+    {'2012-05-20': {textColor: 'green'},
+     '2012-05-22': {startingDay: true, color: 'green'},
+     '2012-05-23': {selected: true, endingDay: true, color: 'green', textColor: 'gray'},
+     '2012-05-04': {disabled: true, startingDay: true, color: 'green', endingDay: true}
     }}
   // Date marking style [simple/period/multi-dot]. Default = 'simple'
   markingType={'period'}

example/src/screens/agenda.js

@@ -25,14 +25,14 @@ export default class AgendaScreen extends Component {
         rowHasChanged={this.rowHasChanged.bind(this)}
         // markingType={'period'}
         // markedDates={{
-        //   '2017-05-08': {periods: [{textColor: '#666'}]},
-        //   '2017-05-09': {periods: [{textColor: '#666'}]},
-        //   '2017-05-14': {periods: [{startingDay: true, color: 'blue'}, {endingDay: true, color: 'blue'}]},
-        //   '2017-05-21': {periods: [{startingDay: true, color: 'blue'}]},
-        //   '2017-05-22': {periods: [{endingDay: true, color: 'gray'}]},
-        //   '2017-05-24': {periods: [{startingDay: true, color: 'gray'}]},
-        //   '2017-05-25': {periods: [{color: 'gray'}]},
-        //   '2017-05-26': {periods: [{endingDay: true, color: 'gray'}]}}}
+        //    '2017-05-08': {textColor: '#666'},
+        //    '2017-05-09': {textColor: '#666'},
+        //    '2017-05-14': {startingDay: true, endingDay: true, color: 'blue'},
+        //    '2017-05-21': {startingDay: true, color: 'blue'},
+        //    '2017-05-22': {endingDay: true, color: 'gray'},
+        //    '2017-05-24': {startingDay: true, color: 'gray'},
+        //    '2017-05-25': {color: 'gray'},
+        //    '2017-05-26': {endingDay: true, color: 'gray'}}}
          // monthFormat={'yyyy'}
          // theme={{calendarBackground: 'red', agendaKnobColor: 'green'}}
         //renderDay={(day, item) => (<Text>{day ? day.day: 'item'}</Text>)}

example/src/screens/calendars.js

@@ -65,14 +65,14 @@ export default class CalendarsScreen extends Component {
           }}
           markedDates={{
             '2012-05-17': {disabled: true},
-            '2012-05-08': {periods: [{textColor: '#666'}]},
-            '2012-05-09': {periods: [{textColor: '#666'}]},
-            '2012-05-14': {periods: [{startingDay: true, color: 'blue'}, {endingDay: true, color: 'blue'}]},
-            '2012-05-21': {periods: [{startingDay: true, color: 'blue'}]},
-            '2012-05-22': {periods: [{endingDay: true, color: 'gray'}]},
-            '2012-05-24': {periods: [{startingDay: true, color: 'gray'}]},
-            '2012-05-25': {periods: [{color: 'gray'}]},
-            '2012-05-26': {periods: [{endingDay: true, color: 'gray'}]}}}
+            '2012-05-08': {textColor: '#666'},
+            '2012-05-09': {textColor: '#666'},
+            '2012-05-14': {startingDay: true, color: 'blue', endingDay: true},
+            '2012-05-21': {startingDay: true, color: 'blue'},
+            '2012-05-22': {endingDay: true, color: 'gray'},
+            '2012-05-24': {startingDay: true, color: 'gray'},
+            '2012-05-25': {color: 'gray'},
+            '2012-05-26': {endingDay: true, color: 'gray'}}}
           hideArrows={false}
         />
         <Calendar

src/calendar/day/period/index.js

@@ -63,7 +63,7 @@ class Day extends Component {
     } else if (this.props.marked.selected) {
       defaultStyle.textStyle.color = this.theme.selectedDayTextColor;
     }
-    const resultStyle = (marking.periods || []).reduce((prev, next) => {
+    const resultStyle = ([marking]).reduce((prev, next) => {
       if (next.quickAction) {
         if (next.first || next.last) {
           prev.containerStyle = this.style.firstQuickAction;