Merge branch 'master' into multi-period

InterfaceKit · Apr 15, 2018 · 97f2ced · 97f2ced
2 parents aea5bd6 + ae5f4c8
commit 97f2ced
Show file tree

Hide file tree

Showing 25 changed files with 480 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,6 @@
 # React Native Calendars ✨ 🗓️ 📆
-[![NPM Version](https://img.shields.io/npm/v/react-native-calendars.svg?style=flat)](https://www.npmjs.com/package/react-native-calendars)
+
+[![Version](https://img.shields.io/npm/v/react-native-calendars.svg)](https://www.npmjs.com/package/react-native-calendars)
 [![Build Status](https://travis-ci.org/wix/react-native-calendars.svg?branch=master)](https://travis-ci.org/wix/react-native-calendars)
 
 This module includes various customizable react native calendar components.
@@ -82,6 +83,8 @@ LocaleConfig.defaultLocale = 'fr';
   maxDate={'2012-05-30'}
   // Handler which gets executed on day press. Default = undefined
   onDayPress={(day) => {console.log('selected day', day)}}
+  // Handler which gets executed on day long press. Default = undefined
+  onDayLongPress={(day) => {console.log('selected day', day)}}
   // Month format in calendar title. Formatting values: http://arshaw.com/xdate/#Formatting
   monthFormat={'yyyy MM'}
   // Handler which gets executed when visible month changes in calendar. Default = undefined
@@ -140,13 +143,13 @@ Multi-Dot marking
 
 Use markingType = 'multi-dot' if you want to display more than one dot. Both the Calendar and CalendarList control support multiple dots by using 'dots' array in markedDates. The property 'color' is mandatory while 'key' and 'selectedColor' are optional. If key is omitted then the array index is used as key. If selectedColor is omitted then 'color' will be used for selected dates.
 ```javascript
-const vacation = {key:'vacation', color: 'red', selectedColor: 'blue'};
-const massage = {key:'massage', color: 'blue', selectedColor: 'blue'};
+const vacation = {key:'vacation', color: 'red', selectedDotColor: 'blue'};
+const massage = {key:'massage', color: 'blue', selectedDotColor: 'blue'};
 const workout = {key:'workout', color: 'green'};
 
 <Calendar
   markedDates={{
-    '2017-10-25': {dots: [vacation, massage, workout], selected: true},
+    '2017-10-25': {dots: [vacation, massage, workout], selected: true, selectedColor: 'red'},
     '2017-10-26': {dots: [massage, workout], disabled: true},
   }},
   markingType={'multi-dot'}
@@ -173,7 +176,7 @@ Period marking
      '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'
+  // Date marking style [simple/period/multi-dot/custom]. Default = 'simple'
   markingType={'period'}
 />
 ```
@@ -209,6 +212,42 @@ CAUTION: This marking is only fully supported by the `<Calendar />` component be
 />
 ```
 
+Custom marking allows you to customize each marker with custom styles.
+
+<kbd>
+  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/custom.png?raw=true">
+</kbd>
+
+```javascript
+<Calendar
+  // Date marking style [simple/period/multi-dot/single]. Default = 'simple'
+  markingType={'custom'}
+  markedDates={{
+    '2018-03-28': {
+      customStyles: {
+        container: {
+          backgroundColor: 'green',
+        },
+        text: {
+          color: 'black',
+          fontWeight: 'bold'
+        },
+      },
+    },
+    '2018-03-29': {
+      customStyles: {
+        container: {
+          backgroundColor: 'white',
+          elevation: 2
+        },
+        text: {
+          color: 'blue',
+        },
+      }
+    }}}
+/>
+```
+
 Keep in mind that different marking types are not compatible. You can use just one marking style for calendar.
 
 #### Displaying data loading indicator
@@ -246,6 +285,7 @@ The loading indicator next to month name will be displayed if `<Calendar />` has
     textDayFontFamily: 'monospace',
     textMonthFontFamily: 'monospace',
     textDayHeaderFontFamily: 'monospace',
+    textMonthFontWeight: 'bold',
     textDayFontSize: 16,
     textMonthFontSize: 16,
     textDayHeaderFontSize: 16
@@ -326,6 +366,27 @@ If you implement an awesome day component please make a PR so that other people
 />
 ```
 
+#### Horizontal CalendarList
+
+<kbd>
+  <img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/horizontal-calendar-list.gif?raw=true">
+</kbd>
+
+You can also make the `CalendarList` scroll horizontally. To do that you need to pass specific props to the `CalendarList`:
+
+```javascript
+<CalendarList
+  // Enable horizontal scrolling, default = false
+  horizontal={true}
+  // Enable paging on horizontal, default = false
+  pagingEnabled={true}
+  // Set custom calendarWidth.
+  calendarWidth={320}
+  ...calendarListParams
+  ...calendarParams
+/>
+```
+
 ### Agenda
 <kbd>
   <img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/agenda.gif?raw=true">

diff --git a/demo/custom.png b/demo/custom.png
diff --git a/demo/horizontal-calendar-list.gif b/demo/horizontal-calendar-list.gif
diff --git a/demo/marking5.png b/demo/marking5.png
diff --git a/example/package.json b/example/package.json
@@ -8,8 +8,8 @@
 	},
 	"dependencies": {
 		"react": "16.0.0-alpha.12",
-		"react-native": "0.53.3",
-		"react-native-calendars": "^1.5.8",
+		"react-native": "0.54.2",
+		"react-native-calendars": "^1.17.5",
 		"react-native-navigation": "^1.1.205"
 	},
 	"devDependencies": {

diff --git a/example/src/screens/calendars.js b/example/src/screens/calendars.js
@@ -22,7 +22,7 @@ export default class CalendarsScreen extends Component {
           onDayPress={this.onDayPress}
           style={styles.calendar}
           hideExtraDays
-          markedDates={{[this.state.selected]: {selected: true, disableTouchEvent: true, selectedColor: 'orange'}}}
+          markedDates={{[this.state.selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}}}
         />
         <Text style={styles.text}>Calendar with marked dates and hidden arrows</Text>
         <Calendar
@@ -92,7 +92,7 @@ export default class CalendarsScreen extends Component {
           markingType={'multi-dot'}
           markedDates={{
             '2012-05-08': {dots: [{key: 'vacation', color: 'blue', selectedDotColor: 'white'}, {key: 'massage', color: 'red', selectedDotColor: 'white'}], selected: true},
-            '2012-05-09': {dots: [{key: 'vacation', color: 'blue', selectedColor: 'red'}, {key: 'massage', color: 'red', selectedColor: 'blue'}], disabled: true}
+            '2012-05-09': {dots: [{key: 'vacation', color: 'blue', selectedDotColor: 'red'}, {key: 'massage', color: 'red', selectedDotColor: 'blue'}], disabled: true}
           }}
           hideArrows={false}
         />
@@ -104,6 +104,122 @@ export default class CalendarsScreen extends Component {
           showWeekNumbers
           markedDates={{[this.state.selected]: {selected: true}}}
         />
+        <Text style={styles.text}>Custom calendar with custom marking type</Text>
+        <Calendar
+          style={styles.calendar}
+          onDayLongPress={this.onDayLongPress}
+          hideExtraDays
+          current={'2018-03-01'}
+          minDate={'2018-03-01'}
+          markingType={'custom'}
+          markedDates={{
+            '2018-03-01': {
+              customStyles: {
+                container: {
+                  backgroundColor: 'white',
+                  elevation: 2
+                },
+                text: {
+                  color: 'blue',
+                },
+              }
+            },
+            '2018-03-08': {selected: true},
+            '2018-03-09': {
+              customStyles: {
+                container: {
+                  backgroundColor: 'red',
+                  elevation: 4,
+                },
+                text: {
+                  color: 'white',
+                },
+              }
+            },
+            '2018-03-10': {disabled: true},
+            '2018-03-14': {
+              customStyles: {
+                container: {
+                  backgroundColor: 'green',
+                },
+                text: {
+                  color: 'white',
+                },
+              },
+            },
+            '2018-03-15': {
+              customStyles: {
+                container: {
+                  backgroundColor: 'black',
+                  elevation: 2
+                },
+                text: {
+                  color: 'yellow',
+                },
+              }
+            },
+            '2018-03-20': {
+              customStyles: {
+                container: {
+                  backgroundColor: 'pink',
+                  elevation: 4,
+                },
+                text: {
+                  color: 'blue',
+                },
+              }
+            },
+            '2018-03-21': {disabled: true},
+            '2018-03-28': {
+              customStyles: {
+                container: {
+                  backgroundColor: 'green',
+                },
+                text: {
+                  color: 'black',
+                  fontWeight: 'bold'
+                },
+              },
+            },
+            '2018-03-29': {
+              customStyles: {
+                container: {
+                  backgroundColor: 'white',
+                  elevation: 2
+                },
+                text: {
+                  color: 'blue',
+                },
+              }
+            },
+            '2018-03-30': {
+              customStyles: {
+                container: {
+                  backgroundColor: 'violet',
+                  elevation: 4,
+                  borderColor: 'red',
+                  borderWidth: 5,
+                },
+                text: {
+                  marginTop: 3,
+                  fontSize: 11,
+                  color: 'yellow',
+                },
+              }
+            },
+            '2018-03-31': {
+              customStyles: {
+                container: {
+                  backgroundColor: 'green',
+                  borderRadius: 0,
+                },
+                text: {
+                  color: 'white',
+                },
+              },
+            }}}
+          hideArrows={false}
+        />
       </ScrollView>
     );
   }

diff --git a/example/src/screens/horizontalCalendarList.js b/example/src/screens/horizontalCalendarList.js
@@ -0,0 +1,25 @@
+import React, {Component} from 'react';
+
+import {CalendarList} from 'react-native-calendars';
+import {View} from 'react-native';
+
+export default class HorizontalCalendarList extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <View>
+        <CalendarList
+          current={'2012-05-16'}
+          pastScrollRange={24}
+          futureScrollRange={24}
+          horizontal
+          pagingEnabled
+          style={{borderBottomWidth: 1, borderBottomColor: 'black'}}
+        />
+      </View>
+    );
+  }
+}
diff --git a/example/src/screens/index.js b/example/src/screens/index.js
@@ -4,10 +4,12 @@ import MenuScreen from './menu';
 import CalendarsScreen from './calendars';
 import AgendaScreen from './agenda';
 import CalendarsList from './calendarsList';
+import HorizontalCalendarList from './horizontalCalendarList';
 
 export function registerScreens() {
   Navigation.registerComponent('Menu', () => MenuScreen);
   Navigation.registerComponent('Calendars', () => CalendarsScreen);
   Navigation.registerComponent('Agenda', () => AgendaScreen);
   Navigation.registerComponent('CalendarsList', () => CalendarsList);
+  Navigation.registerComponent('HorizontalCalendarList', () => HorizontalCalendarList);
 }
diff --git a/example/src/screens/menu.js b/example/src/screens/menu.js
@@ -17,6 +17,9 @@ export default class MenuScreen extends Component {
         <TouchableOpacity style={styles.menu} onPress={this.onCalendarListPress.bind(this)}>
           <Text style={styles.menuText}>Calendar List</Text>
         </TouchableOpacity>
+        <TouchableOpacity style={styles.menu} onPress={this.onHorizontalCalendarListPress.bind(this)}>
+          <Text style={styles.menuText}>Horizontal Calendar List</Text>
+        </TouchableOpacity>
         <TouchableOpacity style={styles.menu} onPress={this.onAgendaPress.bind(this)}>
           <Text style={styles.menuText}>Agenda</Text>
         </TouchableOpacity>
@@ -38,6 +41,13 @@ export default class MenuScreen extends Component {
     });
   }
 
+  onHorizontalCalendarListPress() {
+    this.props.navigator.push({
+      screen: 'HorizontalCalendarList',
+      title: 'Horizontal Calendars List'
+    });
+  }
+
   onAgendaPress() {
     this.props.navigator.push({
       screen: 'Agenda',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-calendars",
-  "version": "1.17.4",
+  "version": "1.18.2",
   "main": "src/index.js",
   "description": "React Native Calendar Components",
   "scripts": {

diff --git a/src/agenda/index.js b/src/agenda/index.js
@@ -386,6 +386,7 @@ export default class AgendaView extends Component {
               current={this.currentMonth}
               markedDates={this.generateMarkings()}
               markingType={this.props.markingType}
+              removeClippedSubviews={this.props.removeClippedSubviews}
               onDayPress={this._chooseDayFromCalendar.bind(this)}
               scrollingEnabled={this.state.calendarScrollable}
               hideExtraDays={this.state.calendarScrollable}

diff --git a/src/agenda/reservation-list/index.js b/src/agenda/reservation-list/index.js
@@ -188,6 +188,7 @@ class ReactComp extends Component {
       <FlatList
         ref={(c) => this.list = c}
         style={this.props.style}
+        contentContainerStyle={this.styles.content}
         renderItem={this.renderRow.bind(this)}
         data={this.state.reservations}
         onScroll={this.onScroll.bind(this)}