Merge pull request wix-incubator#13 from nulleof/master

Add ability to change first day of week. Add maxDate parameter to Calendar and CalendarList.

README.md

@@ -75,6 +75,8 @@ LocaleConfig.defaultLocale = 'fr';
   current={'2012-03-01'}
   // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
   minDate={'2012-05-10'}
+  // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
+  maxDate={'2012-05-30'}
   // Handler which gets executed on day press. Default = undefined
   onDayPress={(day) => {console.log('selected day', day)}}
   // Handler which gets executed when visible month changes in calendar. Default = undefined
@@ -86,6 +88,8 @@ LocaleConfig.defaultLocale = 'fr';
   // If hideArrows=false and hideExtraDays=false do not swich month when tapping on greyed out
   // day from another month that is visible in calendar page. Default = false
   disableMonthChange={true}
+  // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
+  firstDay={1}
 />
 ```
 

src/agenda/index.js

@@ -173,6 +173,7 @@ export default class AgendaView extends Component {
             onDayPress={this.chooseDay.bind(this)}
             scrollingEnabled={this.state.calendarScrollable}
             hideExtraDays={this.state.calendarScrollable}
+            firstDay={this.props.firstDay}
           />
           {knob}
         </Animated.View>

src/calendar-list/index.js

@@ -65,6 +65,8 @@ class CalendarList extends Component {
           onDayPress={this.props.onDayPress}
           displayLoadingIndicator={this.props.displayLoadingIndicator}
           minDate={this.props.minDate}
+          maxDate={this.props.maxDate}
+          firstDay={this.props.firstDay}
         />);
     } else {
       const text = row.toString();

src/calendar/header/index.js

@@ -38,7 +38,11 @@ class CalendarHeader extends Component {
   render() {
     let leftArrow = (<View/>);
     let rightArrow = (<View/>);
-    const weekDaysNames = XDate.locales[XDate.defaultLocale].dayNamesShort;
+    let weekDaysNames = XDate.locales[XDate.defaultLocale].dayNamesShort;
+    const dayShift = this.props.firstDay % 7;
+    if (dayShift) {
+      weekDaysNames = weekDaysNames.slice(dayShift).concat(weekDaysNames.slice(0, dayShift));
+    }
     if (!this.props.hideArrows) {
       leftArrow = (
         <TouchableOpacity onPress={this.substractMonth} style={this.style.arrow}>

src/calendar/index.js

@@ -62,7 +62,8 @@ class Calendar extends Component {
 
   pressDay(day) {
     const minDate = parseDate(this.props.minDate);
-    if (!minDate || dateutils.isGTE(day, minDate)) {
+    const maxDate = parseDate(this.props.maxDate);
+    if (!(minDate && !dateutils.isGTE(day, minDate)) && !(maxDate && !dateutils.isLTE(day, maxDate))) {
       this.updateMonth(day);
       if (this.props.onDayPress) {
         this.props.onDayPress(xdateToData(day));
@@ -89,10 +90,11 @@ class Calendar extends Component {
 
   renderDay(day, id) {
     const minDate = parseDate(this.props.minDate);
+    const maxDate = parseDate(this.props.maxDate);
     let state = '';
     if (this.isSelected(day)) {
       state = 'selected';
-    } else if (minDate && !dateutils.isGTE(day, minDate)) {
+    } else if ((minDate && !dateutils.isGTE(day, minDate)) || (maxDate && !dateutils.isLTE(day, maxDate))) {
       state = 'disabled';
     } else if (!dateutils.sameMonth(day, this.state.currentMonth)) {
       state = 'disabled';
@@ -147,7 +149,7 @@ class Calendar extends Component {
 
   render() {
     //console.log('render calendar ');
-    const days = dateutils.page(this.state.currentMonth);
+    const days = dateutils.page(this.state.currentMonth, this.props.firstDay);
     const weeks = [];
     while (days.length) {
       weeks.push(this.renderWeek(days.splice(0, 7), weeks.length));
@@ -169,6 +171,7 @@ class Calendar extends Component {
           month={this.state.currentMonth}
           addMonth={this.addMonth}
           showIndicator={indicator}
+          firstDay={this.props.firstDay}
         />
         {weeks}
       </View>);

src/calendar/updater.js

@@ -22,7 +22,7 @@ export default function shouldComponentUpdate(nextProps, nextState) {
     return prev;
   }, shouldUpdate);
 
-  shouldUpdate = ['minDate', 'current'].reduce((prev, next) => {
+  shouldUpdate = ['minDate', 'maxDate', 'current'].reduce((prev, next) => {
     const prevDate = parseDate(this.props[next]);
     const nextDate = parseDate(nextProps[next]);
     if (prev.update) {