diff --git a/index.d.ts b/index.d.ts
index 6df6aed..dd921ab 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -150,6 +150,8 @@ interface CalendarStripProps {
   headerText?: string;
 
   ref?: RefObject<any>;
+
+  datesStripStyle?: StyleProp<ViewStyle>;
 }
 
 export default class ReactNativeCalendarStrip extends Component<CalendarStripProps> {
diff --git a/src/Calendar.style.js b/src/Calendar.style.js
index d6dc1bd..b16814f 100644
--- a/src/Calendar.style.js
+++ b/src/Calendar.style.js
@@ -7,32 +7,37 @@ import { StyleSheet } from "react-native";
 export default StyleSheet.create({
   //CALENDAR STYLES
   calendarContainer: {
-    overflow: "hidden"
+    overflow: "hidden",
   },
   datesStrip: {
     flexDirection: "row",
     flex: 1,
     alignItems: "center",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+  },
+  headerContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
   },
   calendarDates: {
     flex: 1,
     flexDirection: "row",
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
   },
   calendarHeader: {
     textAlign: "center",
     fontWeight: "bold",
-    alignSelf: "center"
+    alignSelf: "center",
   },
   iconContainer: {
     justifyContent: "center",
     alignItems: "center",
-    alignSelf: "center"
+    alignSelf: "center",
   },
   icon: {
-    resizeMode: "contain"
+    resizeMode: "contain",
   },
 
   //CALENDAR DAY
@@ -42,43 +47,50 @@ export default StyleSheet.create({
   dateContainer: {
     justifyContent: "center",
     alignItems: "center",
-    alignSelf: "center"
+    alignSelf: "center",
+    backgroundColor: "#E7EBFB",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#E7EBFB",
+    paddingHorizontal: 4,
+    paddingVertical: 6,
   },
   dateName: {
-    textAlign: "center"
+    textAlign: "center",
   },
   weekendDateName: {
     color: "#A7A7A7",
-    textAlign: "center"
+    textAlign: "center",
   },
   dateNumber: {
     fontWeight: "bold",
-    textAlign: "center"
+    textAlign: "center",
+    paddingTop: 6,
   },
   weekendDateNumber: {
     color: "#A7A7A7",
     fontWeight: "bold",
-    textAlign: "center"
+    textAlign: "center",
   },
   dot: {
     width: 6,
     height: 6,
     marginTop: 1,
     borderRadius: 5,
-    opacity: 0
+    opacity: 0,
   },
 
   // CALENDAR DOTS
   dotsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center'
+    flexDirection: "row",
+    justifyContent: "center",
   },
   visibleDot: {
     opacity: 1,
-    backgroundColor: 'blue'
+    backgroundColor: "blue",
   },
   selectedDot: {
-    backgroundColor: 'blue'
+    backgroundColor: "blue",
   },
 
   // Calendar Lines
@@ -86,16 +98,16 @@ export default StyleSheet.create({
     height: 4,
     marginTop: 3,
     borderRadius: 1,
-    opacity: 0
+    opacity: 0,
   },
   linesContainer: {
-    justifyContent: 'center'
+    justifyContent: "center",
   },
   visibleLine: {
     opacity: 1,
-    backgroundColor: 'blue'
+    backgroundColor: "blue",
   },
   selectedLine: {
-    backgroundColor: 'blue'
+    backgroundColor: "blue",
   },
 });
diff --git a/src/CalendarDay.js b/src/CalendarDay.js
index 03f776e..e4bb5c5 100644
--- a/src/CalendarDay.js
+++ b/src/CalendarDay.js
@@ -6,8 +6,16 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import moment from "moment";
 
-import { Text, View, Animated, Easing, LayoutAnimation, TouchableOpacity } from "react-native";
+import {
+  Text,
+  View,
+  Animated,
+  Easing,
+  LayoutAnimation,
+  TouchableOpacity,
+} from "react-native";
 import styles from "./Calendar.style.js";
+import LinearGradient from "react-native-linear-gradient";
 
 class CalendarDay extends Component {
   static propTypes = {
@@ -64,26 +72,30 @@ class CalendarDay extends Component {
       animType: LayoutAnimation.Types.easeInEaseOut,
       animUpdateType: LayoutAnimation.Types.easeInEaseOut,
       animProperty: LayoutAnimation.Properties.opacity,
-      animSpringDamping: undefined // Only applicable for LayoutAnimation.Types.spring,
+      animSpringDamping: undefined, // Only applicable for LayoutAnimation.Types.spring,
     },
     styleWeekend: true,
     showDayName: true,
     showDayNumber: true,
     upperCaseDays: true,
     width: 0, // Default width and height to avoid calcSizes() *sometimes* doing Math.round(undefined) to cause NaN
-    height: 0
+    height: 0,
   };
 
   constructor(props) {
     super(props);
 
     this.state = {
-      enabled: this.isDateAllowed(props.date, props.datesBlacklist, props.datesWhitelist),
+      enabled: this.isDateAllowed(
+        props.date,
+        props.datesBlacklist,
+        props.datesWhitelist
+      ),
       selected: this.isDateSelected(props.date, props.selectedDate),
       customStyle: this.getCustomDateStyle(props.date, props.customDatesStyles),
       marking: this.getDateMarking(props.date, props.markedDates),
       animatedValue: new Animated.Value(0),
-      ...this.calcSizes(props)
+      ...this.calcSizes(props),
     };
 
     if (!props.scrollable) {
@@ -96,8 +108,11 @@ class CalendarDay extends Component {
     let doStateUpdate = false;
     let hasDateChanged = prevProps.date !== this.props.date;
 
-    if ((this.props.selectedDate !== prevProps.selectedDate) || hasDateChanged) {
-      if (this.props.daySelectionAnimation.type !== "" && !this.props.scrollable) {
+    if (this.props.selectedDate !== prevProps.selectedDate || hasDateChanged) {
+      if (
+        this.props.daySelectionAnimation.type !== "" &&
+        !this.props.scrollable
+      ) {
         let configurableAnimation = {
           duration: this.props.daySelectionAnimation.duration || 300,
           create: {
@@ -106,13 +121,13 @@ class CalendarDay extends Component {
               LayoutAnimation.Types.easeInEaseOut,
             property:
               this.props.daySelectionAnimation.animProperty ||
-              LayoutAnimation.Properties.opacity
+              LayoutAnimation.Properties.opacity,
           },
           update: {
             type:
               this.props.daySelectionAnimation.animUpdateType ||
               LayoutAnimation.Types.easeInEaseOut,
-            springDamping: this.props.daySelectionAnimation.animSpringDamping
+            springDamping: this.props.daySelectionAnimation.animSpringDamping,
           },
           delete: {
             type:
@@ -120,35 +135,61 @@ class CalendarDay extends Component {
               LayoutAnimation.Types.easeInEaseOut,
             property:
               this.props.daySelectionAnimation.animProperty ||
-              LayoutAnimation.Properties.opacity
-          }
+              LayoutAnimation.Properties.opacity,
+          },
         };
         LayoutAnimation.configureNext(configurableAnimation);
       }
-      newState.selected = this.isDateSelected(this.props.date, this.props.selectedDate);
+      newState.selected = this.isDateSelected(
+        this.props.date,
+        this.props.selectedDate
+      );
       doStateUpdate = true;
     }
 
-    if (prevProps.width !== this.props.width || prevProps.height !== this.props.height) {
+    if (
+      prevProps.width !== this.props.width ||
+      prevProps.height !== this.props.height
+    ) {
       newState = { ...newState, ...this.calcSizes(this.props) };
       doStateUpdate = true;
     }
 
-    if ((prevProps.customDatesStyles !== this.props.customDatesStyles) || hasDateChanged) {
-      newState = { ...newState, customStyle: this.getCustomDateStyle(this.props.date, this.props.customDatesStyles) };
+    if (
+      prevProps.customDatesStyles !== this.props.customDatesStyles ||
+      hasDateChanged
+    ) {
+      newState = {
+        ...newState,
+        customStyle: this.getCustomDateStyle(
+          this.props.date,
+          this.props.customDatesStyles
+        ),
+      };
       doStateUpdate = true;
     }
 
-    if ((prevProps.markedDates !== this.props.markedDates) || hasDateChanged) {
-      newState = { ...newState, marking: this.getDateMarking(this.props.date, this.props.markedDates) };
+    if (prevProps.markedDates !== this.props.markedDates || hasDateChanged) {
+      newState = {
+        ...newState,
+        marking: this.getDateMarking(this.props.date, this.props.markedDates),
+      };
       doStateUpdate = true;
     }
 
-    if ((prevProps.datesBlacklist !== this.props.datesBlacklist) ||
-        (prevProps.datesWhitelist !== this.props.datesWhitelist) ||
-        hasDateChanged)
-    {
-      newState = { ...newState, enabled: this.isDateAllowed(this.props.date, this.props.datesBlacklist, this.props.datesWhitelist) };
+    if (
+      prevProps.datesBlacklist !== this.props.datesBlacklist ||
+      prevProps.datesWhitelist !== this.props.datesWhitelist ||
+      hasDateChanged
+    ) {
+      newState = {
+        ...newState,
+        enabled: this.isDateAllowed(
+          this.props.date,
+          this.props.datesBlacklist,
+          this.props.datesWhitelist
+        ),
+      };
       doStateUpdate = true;
     }
 
@@ -157,15 +198,15 @@ class CalendarDay extends Component {
     }
   }
 
-  calcSizes = props => {
+  calcSizes = (props) => {
     return {
-      containerWidth: Math.round(props.width),
-      containerHeight: Math.round(props.height),
-      containerBorderRadius: Math.round(props.width / 2),
+      containerWidth: Math.round(props.width * 0.9),
+      // containerHeight: Math.round(props.height),
+      // containerBorderRadius: Math.round(props.width / 2),
       dateNameFontSize: Math.round(props.width / 5),
-      dateNumberFontSize: Math.round(props.width / 2.9)
+      dateNumberFontSize: Math.round(props.width / 2.9),
     };
-  }
+  };
 
   //Function to check if provided date is the same as selected one, hence date is selected
   //using isSame moment query with "day" param so that it check years, months and day
@@ -174,7 +215,7 @@ class CalendarDay extends Component {
       return date === selectedDate;
     }
     return date.isSame(selectedDate, "day");
-  }
+  };
 
   // Check whether date is allowed
   isDateAllowed = (date, datesBlacklist, datesWhitelist) => {
@@ -216,7 +257,7 @@ class CalendarDay extends Component {
     }
 
     return true;
-  }
+  };
 
   getCustomDateStyle = (date, customDatesStyles) => {
     if (Array.isArray(customDatesStyles)) {
@@ -243,24 +284,21 @@ class CalendarDay extends Component {
     } else if (customDatesStyles instanceof Function) {
       return customDatesStyles(date);
     }
-  }
+  };
 
   getDateMarking = (day, markedDates) => {
     if (Array.isArray(markedDates)) {
       if (markedDates.length === 0) {
         return {};
       }
-      return markedDates.find(md => moment(day).isSame(md.date, "day")) || {};
+      return markedDates.find((md) => moment(day).isSame(md.date, "day")) || {};
     } else if (markedDates instanceof Function) {
       return markedDates(day) || {};
     }
-  }
+  };
 
   createAnimation = () => {
-    const {
-      calendarAnimation,
-      useNativeDriver,
-    } = this.props
+    const { calendarAnimation, useNativeDriver } = this.props;
 
     if (calendarAnimation) {
       this.animation = Animated.timing(this.state.animatedValue, {
@@ -275,7 +313,7 @@ class CalendarDay extends Component {
       // Send animation to parent to collect and start together.
       return this.animation;
     }
-  }
+  };
 
   renderMarking() {
     if (!this.props.markedDates || this.props.markedDates.length === 0) {
@@ -283,14 +321,23 @@ class CalendarDay extends Component {
     }
     const marking = this.state.marking;
 
-    if (marking.dots && Array.isArray(marking.dots) && marking.dots.length > 0) {
+    if (
+      marking.dots &&
+      Array.isArray(marking.dots) &&
+      marking.dots.length > 0
+    ) {
       return this.renderDots(marking);
     }
-    if (marking.lines && Array.isArray(marking.lines) && marking.lines.length > 0) {
+    if (
+      marking.lines &&
+      Array.isArray(marking.lines) &&
+      marking.lines.length > 0
+    ) {
       return this.renderLines(marking);
     }
 
-    return ( // default empty spacer
+    return (
+      // default empty spacer
       <View style={styles.dotsContainer}>
         <View style={[styles.dot]} />
       </View>
@@ -300,32 +347,25 @@ class CalendarDay extends Component {
   renderDots(marking) {
     const baseDotStyle = [styles.dot, styles.visibleDot];
     const markedDatesStyle = this.props.markedDatesStyle || {};
-    const formattedDate = this.props.date.format('YYYY-MM-DD');
+    const formattedDate = this.props.date.format("YYYY-MM-DD");
     let validDots = <View style={[styles.dot]} />; // default empty view for no dots case
 
     // Filter dots and process only those which have color property
     validDots = marking.dots
-      .filter(d => (d && d.color))
+      .filter((d) => d && d.color)
       .map((dot, index) => {
         const selectedColor = dot.selectedColor || dot.selectedDotColor; // selectedDotColor deprecated
-        const backgroundColor = this.state.selected && selectedColor ? selectedColor : dot.color;
+        const backgroundColor =
+          this.state.selected && selectedColor ? selectedColor : dot.color;
         return (
           <View
-            key={dot.key || (formattedDate + index)}
-            style={[
-              baseDotStyle,
-              { backgroundColor },
-              markedDatesStyle
-            ]}
+            key={dot.key || formattedDate + index}
+            style={[baseDotStyle, { backgroundColor }, markedDatesStyle]}
           />
         );
       });
 
-    return (
-      <View style={styles.dotsContainer}>
-        {validDots}
-      </View>
-    );
+    return <View style={styles.dotsContainer}>{validDots}</View>;
   }
 
   renderLines(marking) {
@@ -335,9 +375,12 @@ class CalendarDay extends Component {
 
     // Filter lines and process only those which have color property
     validLines = marking.lines
-      .filter(d => (d && d.color))
+      .filter((d) => d && d.color)
       .map((line, index) => {
-        const backgroundColor = this.state.selected && line.selectedColor ? line.selectedColor : line.color;
+        const backgroundColor =
+          this.state.selected && line.selectedColor
+            ? line.selectedColor
+            : line.color;
         const width = this.props.width * 0.6;
         return (
           <View
@@ -345,17 +388,13 @@ class CalendarDay extends Component {
             style={[
               baseLineStyle,
               { backgroundColor, width },
-              markedDatesStyle
+              markedDatesStyle,
             ]}
           />
         );
       });
 
-    return (
-      <View style={styles.linesContainer}>
-        {validLines}
-      </View>
-    );
+    return <View style={styles.linesContainer}>{validLines}</View>;
   }
 
   render() {
@@ -396,8 +435,14 @@ class CalendarDay extends Component {
       dateNumberFontSize,
     } = this.state;
 
-    let _dateNameStyle = [styles.dateName, enabled ? dateNameStyle : disabledDateNameStyle];
-    let _dateNumberStyle = [styles.dateNumber, enabled ? dateNumberStyle : disabledDateNumberStyle];
+    let _dateNameStyle = [
+      styles.dateName,
+      enabled ? dateNameStyle : disabledDateNameStyle,
+    ];
+    let _dateNumberStyle = [
+      styles.dateNumber,
+      enabled ? dateNumberStyle : disabledDateNumberStyle,
+    ];
     let _dateViewStyle = enabled
       ? [{ backgroundColor: "transparent" }]
       : [{ opacity: disabledDateOpacity }];
@@ -419,12 +464,14 @@ class CalendarDay extends Component {
       //If it is border, the user has to input color for border animation
       switch (daySelectionAnimation.type) {
         case "background":
-          _dateViewStyle.push({ backgroundColor: daySelectionAnimation.highlightColor });
+          _dateViewStyle.push({
+            backgroundColor: daySelectionAnimation.highlightColor,
+          });
           break;
         case "border":
           _dateViewStyle.push({
             borderColor: daySelectionAnimation.borderHighlightColor,
-            borderWidth: daySelectionAnimation.borderWidth
+            borderWidth: daySelectionAnimation.borderWidth,
           });
           break;
         default:
@@ -434,100 +481,99 @@ class CalendarDay extends Component {
 
       _dateNameStyle = [styles.dateName, dateNameStyle];
       _dateNumberStyle = [styles.dateNumber, dateNumberStyle];
-      if (styleWeekend &&
+      if (
+        styleWeekend &&
         (date.isoWeekday() === 6 || date.isoWeekday() === 7)
       ) {
-        _dateNameStyle = [
-          styles.weekendDateName,
-          weekendDateNameStyle
-        ];
-        _dateNumberStyle = [
-          styles.weekendDateNumber,
-          weekendDateNumberStyle
-        ];
+        _dateNameStyle = [styles.weekendDateName, weekendDateNameStyle];
+        _dateNumberStyle = [styles.weekendDateNumber, weekendDateNumberStyle];
       }
 
       _dateViewStyle.push(highlightDateContainerStyle);
       _dateNameStyle = [
         styles.dateName,
         highlightDateNameStyle,
-        _customHighlightDateNameStyle
+        _customHighlightDateNameStyle,
       ];
       _dateNumberStyle = [
         styles.dateNumber,
         highlightDateNumberStyle,
-        _customHighlightDateNumberStyle
+        _customHighlightDateNumberStyle,
       ];
       _dateNumberContainerStyle.push(highlightDateNumberContainerStyle);
     }
 
     let responsiveDateContainerStyle = {
-      width: containerWidth,
-      height: containerHeight,
-      borderRadius: containerBorderRadius,
+      minWidth: containerWidth,
+      // height: containerHeight,
+      // borderRadius: containerBorderRadius,
     };
 
     let containerStyle = selected
       ? { ...dayContainerStyle, ...highlightDateContainerStyle }
       : dayContainerStyle;
 
-    let day;
+    let day, dayName;
     if (DayComponent) {
-      day = (<DayComponent {...this.props} {...this.state}/>);
-    }
-    else {
+      day = <DayComponent {...this.props} {...this.state} />;
+    } else {
+      if (date.format("YYYY-MM-DD") === moment().format("YYYY-MM-DD")) {
+        dayName = "Today";
+      } else {
+        dayName = date.format("ddd");
+      }
       day = (
         <TouchableOpacity
           onPress={onDateSelected.bind(this, date)}
           disabled={!enabled}
         >
-          <View
+          <LinearGradient
             style={[
               styles.dateContainer,
               responsiveDateContainerStyle,
-              _dateViewStyle,
-              containerStyle
+              // _dateViewStyle,
+              containerStyle,
             ]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 0.6, y: 0.6 }}
+            colors={selected ? ["#ECEDCD", "#568E96"] : ["#E7EBFB", "#E7EBFB"]}
           >
             {showDayName && (
               <Text
                 style={[{ fontSize: dateNameFontSize }, _dateNameStyle]}
                 allowFontScaling={allowDayTextScaling}
+                numberOfLines={1}
               >
-                {upperCaseDays ? date.format("ddd").toUpperCase() : date.format("ddd")}
+                {upperCaseDays ? dayName.toUpperCase() : dayName}
               </Text>
             )}
             {showDayNumber && (
               <View style={_dateNumberContainerStyle}>
                 <Text
-                  style={[
-                    { fontSize: dateNumberFontSize },
-                    _dateNumberStyle
-                  ]}
+                  style={[{ fontSize: dateNumberFontSize }, _dateNumberStyle]}
                   allowFontScaling={allowDayTextScaling}
                 >
                   {date.date()}
                 </Text>
-
               </View>
             )}
-            { this.renderMarking() }
-          </View>
+            {this.renderMarking()}
+          </LinearGradient>
         </TouchableOpacity>
       );
     }
 
     return calendarAnimation && !scrollable ? (
-      <Animated.View style={[
-        styles.dateRootContainer,
-        {opacity: this.state.animatedValue}
-      ]}>
+      <Animated.View
+        style={[
+          styles.dateRootContainer,
+          { opacity: this.state.animatedValue },
+        ]}
+      >
         {day}
       </Animated.View>
     ) : (
-      <View style={styles.dateRootContainer}>
-        {day}
-      </View>
+      <View style={styles.dateRootContainer}>{day}</View>
     );
   }
 }
diff --git a/src/CalendarHeader.js b/src/CalendarHeader.js
index 2402cf3..e8b0642 100644
--- a/src/CalendarHeader.js
+++ b/src/CalendarHeader.js
@@ -9,11 +9,11 @@ class CalendarHeader extends Component {
     calendarHeaderFormat: PropTypes.string.isRequired,
     calendarHeaderContainerStyle: PropTypes.oneOfType([
       PropTypes.object,
-      PropTypes.number
+      PropTypes.number,
     ]),
     calendarHeaderStyle: PropTypes.oneOfType([
       PropTypes.object,
-      PropTypes.number
+      PropTypes.number,
     ]),
     weekStartDate: PropTypes.object,
     weekEndDate: PropTypes.object,
@@ -79,21 +79,25 @@ class CalendarHeader extends Component {
       weekEndDate: _weekEndDate,
       headerText,
     } = this.props;
-    const _headerText = headerText || this.formatCalendarHeader(calendarHeaderFormat);
+    const _headerText =
+      headerText || this.formatCalendarHeader(calendarHeaderFormat);
     const weekStartDate = _weekStartDate && _weekStartDate.clone();
     const weekEndDate = _weekEndDate && _weekEndDate.clone();
 
     return (
       <TouchableOpacity
-        onPress={onHeaderSelected && onHeaderSelected.bind(this, {weekStartDate, weekEndDate})}
+        onPress={
+          onHeaderSelected &&
+          onHeaderSelected.bind(this, { weekStartDate, weekEndDate })
+        }
         disabled={!onHeaderSelected}
         style={calendarHeaderContainerStyle}
       >
         <Text
           style={[
             styles.calendarHeader,
-            { fontSize: fontSize },
-            calendarHeaderStyle
+            // { fontSize: fontSize },
+            calendarHeaderStyle,
           ]}
           allowFontScaling={allowHeaderTextScaling}
         >
diff --git a/src/CalendarStrip.js b/src/CalendarStrip.js
index 4064262..962c63d 100644
--- a/src/CalendarStrip.js
+++ b/src/CalendarStrip.js
@@ -95,6 +95,9 @@ class CalendarStrip extends Component {
     shouldAllowFontScaling: PropTypes.bool,
     useNativeDriver: PropTypes.bool,
     upperCaseDays: PropTypes.bool,
+
+    // more
+    datesStripStyle: PropTypes.any,
   };
 
   static defaultProps = {
@@ -161,24 +164,28 @@ class CalendarStrip extends Component {
     let days = {};
     let updateState = false;
 
-    if (!this.compareDates(prevProps.startingDate, this.props.startingDate) ||
-        !this.compareDates(prevProps.selectedDate, this.props.selectedDate) ||
-        prevProps.datesBlacklist !== this.props.datesBlacklist ||
-        prevProps.datesWhitelist !== this.props.datesWhitelist ||
-        prevProps.markedDates  !== this.props.markedDates  ||
-        prevProps.customDatesStyles !== this.props.customDatesStyles )
-    {
+    if (
+      !this.compareDates(prevProps.startingDate, this.props.startingDate) ||
+      !this.compareDates(prevProps.selectedDate, this.props.selectedDate) ||
+      prevProps.datesBlacklist !== this.props.datesBlacklist ||
+      prevProps.datesWhitelist !== this.props.datesWhitelist ||
+      prevProps.markedDates !== this.props.markedDates ||
+      prevProps.customDatesStyles !== this.props.customDatesStyles
+    ) {
       // Protect against undefined startingDate prop
       let _startingDate = this.props.startingDate || this.state.startingDate;
 
-      startingDate = { startingDate: this.setLocale(_startingDate)};
-      selectedDate = { selectedDate: this.setLocale(this.props.selectedDate)};
-      days = this.createDays(startingDate.startingDate, selectedDate.selectedDate);
+      startingDate = { startingDate: this.setLocale(_startingDate) };
+      selectedDate = { selectedDate: this.setLocale(this.props.selectedDate) };
+      days = this.createDays(
+        startingDate.startingDate,
+        selectedDate.selectedDate
+      );
       updateState = true;
     }
 
     if (updateState) {
-      this.setState({...startingDate, ...selectedDate, ...days });
+      this.setState({ ...startingDate, ...selectedDate, ...days });
     }
   }
 
@@ -204,25 +211,24 @@ class CalendarStrip extends Component {
   // JS date, or ISO 8601 strings.
   // Returns true if the datetimes values are the same; false otherwise.
   compareDates = (date1, date2) => {
-    if (date1 && date1.valueOf && date2 && date2.valueOf)
-    {
+    if (date1 && date1.valueOf && date2 && date2.valueOf) {
       return moment(date1).isSame(date2, "day");
     } else {
       return JSON.stringify(date1) === JSON.stringify(date2);
     }
-  }
+  };
 
   //Function that checks if the locale is passed to the component and sets it to the passed date
-  setLocale = date => {
+  setLocale = (date) => {
     let _date = date && moment(date);
     if (_date) {
-      _date.set({ hour: 12}); // keep date the same regardless of timezone shifts
+      _date.set({ hour: 12 }); // keep date the same regardless of timezone shifts
       if (this.props.locale) {
         _date = _date.locale(this.props.locale.name);
       }
     }
     return _date;
-  }
+  };
 
   getInitialStartingDate = () => {
     if (this.props.startingDate) {
@@ -233,7 +239,7 @@ class CalendarStrip extends Component {
       let date = this.setLocale(moment(this.props.selectedDate));
       return this.props.useIsoWeekday ? date.startOf("isoweek") : date;
     }
-  }
+  };
 
   //Set startingDate to the previous week
   getPreviousWeek = () => {
@@ -242,10 +248,12 @@ class CalendarStrip extends Component {
       return;
     }
     this.animations = [];
-    const previousWeekStartDate = this.state.startingDate.clone().subtract(1, "w");
+    const previousWeekStartDate = this.state.startingDate
+      .clone()
+      .subtract(1, "w");
     const days = this.createDays(previousWeekStartDate);
     this.setState({ startingDate: previousWeekStartDate, ...days });
-  }
+  };
 
   //Set startingDate to the next week
   getNextWeek = () => {
@@ -257,11 +265,14 @@ class CalendarStrip extends Component {
     const nextWeekStartDate = this.state.startingDate.clone().add(1, "w");
     const days = this.createDays(nextWeekStartDate);
     this.setState({ startingDate: nextWeekStartDate, ...days });
-  }
+  };
 
   // Set the current visible week to the selectedDate
   // When date param is undefined, an update always occurs (e.g. initialize)
-  updateWeekStart = (newStartDate, originalStartDate = this.state.startingDate) => {
+  updateWeekStart = (
+    newStartDate,
+    originalStartDate = this.state.startingDate
+  ) => {
     if (!this.props.updateWeek) {
       return originalStartDate;
     }
@@ -279,10 +290,10 @@ class CalendarStrip extends Component {
     startingDate = originalStartDate[addOrSubtract](adjustWeeks, "w");
 
     return this.setLocale(startingDate);
-  }
+  };
 
   // updateWeekView allows external callers to update the visible week.
-  updateWeekView = date => {
+  updateWeekView = (date) => {
     if (this.props.scrollable) {
       this.scroller.scrollToDate(date);
       return;
@@ -290,18 +301,19 @@ class CalendarStrip extends Component {
 
     this.animations = [];
     let startingDate = moment(date);
-    startingDate = this.props.useIsoWeekday ? startingDate.startOf("isoweek") : startingDate;
+    startingDate = this.props.useIsoWeekday
+      ? startingDate.startOf("isoweek")
+      : startingDate;
     const days = this.createDays(startingDate);
-    this.setState({startingDate, ...days});
-  }
+    this.setState({ startingDate, ...days });
+  };
 
   //Handling press on date/selecting date
-  onDateSelected = selectedDate => {
+  onDateSelected = (selectedDate) => {
     let newState;
     if (this.props.scrollable) {
       newState = { selectedDate };
-    }
-    else {
+    } else {
       newState = {
         selectedDate,
         ...this.createDays(this.state.startingDate, selectedDate),
@@ -310,7 +322,7 @@ class CalendarStrip extends Component {
     this.setState(() => newState);
     const _selectedDate = selectedDate && selectedDate.clone();
     this.props.onDateSelected && this.props.onDateSelected(_selectedDate);
-  }
+  };
 
   // Get the currently selected date (Moment JS object)
   getSelectedDate = () => {
@@ -318,10 +330,10 @@ class CalendarStrip extends Component {
       return; // undefined (no date has been selected yet)
     }
     return this.state.selectedDate;
-  }
+  };
 
   // Set the selected date.  To clear the currently selected date, pass in 0.
-  setSelectedDate = date => {
+  setSelectedDate = (date) => {
     let mDate = moment(date);
     this.onDateSelected(mDate);
     if (this.props.scrollToOnSetSelectedDate) {
@@ -330,25 +342,24 @@ class CalendarStrip extends Component {
       scrolledDate.subtract(Math.floor(this.props.numDaysInWeek / 2), "days");
       this.scroller.scrollToDate(scrolledDate);
     }
-  }
+  };
 
   // Gather animations from each day. Sequence animations must be started
   // together to work around bug in RN Animated with individual starts.
-  registerAnimation = animation => {
+  registerAnimation = (animation) => {
     this.animations.push(animation);
     if (this.animations.length >= this.state.days.length) {
       if (this.props.calendarAnimation?.type.toLowerCase() === "sequence") {
         Animated.sequence(this.animations).start();
-      }
-      else {
+      } else {
         Animated.parallel(this.animations).start();
       }
     }
-  }
+  };
 
   // Responsive sizing based on container width.
   // Debounce to prevent rapid succession of onLayout calls from thrashing.
-  onLayout = event => {
+  onLayout = (event) => {
     if (event.nativeEvent.layout.width === this.layout.width) {
       return;
     }
@@ -360,9 +371,9 @@ class CalendarStrip extends Component {
       this.onLayoutDebounce(this.layout);
       this.onLayoutTimer = null;
     }, 100);
-  }
+  };
 
-  onLayoutDebounce = layout => {
+  onLayoutDebounce = (layout) => {
     const {
       numDaysInWeek,
       responsiveSizingOffset,
@@ -391,31 +402,33 @@ class CalendarStrip extends Component {
     height += showDate ? dayComponentHeight || dayComponentWidth : 0;
     selectorSize = Math.min(selectorSize, height);
 
-    this.setState({
-      dayComponentWidth,
-      dayComponentHeight: dayComponentHeight || dayComponentWidth,
-      height,
-      monthFontSize,
-      selectorSize,
-      marginHorizontal,
-      numVisibleDays,
-    },
-    () => this.setState( {...this.createDays(this.state.startingDate)} ));
-  }
+    this.setState(
+      {
+        dayComponentWidth,
+        dayComponentHeight: dayComponentHeight || dayComponentWidth,
+        height,
+        monthFontSize,
+        selectorSize,
+        marginHorizontal,
+        numVisibleDays,
+      },
+      () => this.setState({ ...this.createDays(this.state.startingDate) })
+    );
+  };
 
   getItemLayout = (data, index) => {
     const length = this.state.height * 1.05; //include margin
-    return { length, offset: length * index, index }
-  }
+    return { length, offset: length * index, index };
+  };
 
   updateMonthYear = (weekStartDate, weekEndDate) => {
     this.setState({
       weekStartDate,
       weekEndDate,
     });
-  }
+  };
 
-  createDayProps = selectedDate => {
+  createDayProps = (selectedDate) => {
     return {
       selectedDate,
       onDateSelected: this.onDateSelected,
@@ -433,7 +446,8 @@ class CalendarStrip extends Component {
       weekendDateNumberStyle: this.props.weekendDateNumberStyle,
       highlightDateNameStyle: this.props.highlightDateNameStyle,
       highlightDateNumberStyle: this.props.highlightDateNumberStyle,
-      highlightDateNumberContainerStyle: this.props.highlightDateNumberContainerStyle,
+      highlightDateNumberContainerStyle:
+        this.props.highlightDateNumberContainerStyle,
       highlightDateContainerStyle: this.props.highlightDateContainerStyle,
       disabledDateNameStyle: this.props.disabledDateNameStyle,
       disabledDateNumberStyle: this.props.disabledDateNumberStyle,
@@ -451,8 +465,8 @@ class CalendarStrip extends Component {
       marginHorizontal: this.state.marginHorizontal,
       allowDayTextScaling: this.props.shouldAllowFontScaling,
       upperCaseDays: this.props.upperCaseDays,
-    }
-  }
+    };
+  };
 
   createDays = (startingDate, selectedDate = this.state.selectedDate) => {
     const {
@@ -472,7 +486,7 @@ class CalendarStrip extends Component {
     if (scrollable) {
       numDays = this.numDaysScroll;
       // Center start date in scroller.
-      _startingDate = startingDate.clone().subtract(numDays/2, "days");
+      _startingDate = startingDate.clone().subtract(numDays / 2, "days");
       if (minDate && _startingDate.isBefore(minDate, "day")) {
         _startingDate = moment(minDate);
       }
@@ -493,15 +507,16 @@ class CalendarStrip extends Component {
         if (date.isSame(startingDate, "day")) {
           initialScrollerIndex = i;
         }
-        datesList.push({date});
-      }
-      else {
-        days.push(this.renderDay({
-          date,
-          key: date.format("YYYY-MM-DD"),
-          ...this.createDayProps(selectedDate),
-        }));
-        datesList.push({date});
+        datesList.push({ date });
+      } else {
+        days.push(
+          this.renderDay({
+            date,
+            key: date.format("YYYY-MM-DD"),
+            ...this.createDayProps(selectedDate),
+          })
+        );
+        datesList.push({ date });
       }
     }
 
@@ -524,27 +539,27 @@ class CalendarStrip extends Component {
     // else Scroller sets weekStart/EndDate and fires onWeekChanged.
 
     return newState;
-  }
+  };
 
   renderDay(props) {
-    return (
-      <CalendarDay {...props} />
-    );
+    return <CalendarDay {...props} />;
   }
 
   renderHeader() {
-    return ( this.props.showMonth &&
-      <CalendarHeader
-        calendarHeaderFormat={this.props.calendarHeaderFormat}
-        calendarHeaderContainerStyle={this.props.calendarHeaderContainerStyle}
-        calendarHeaderStyle={this.props.calendarHeaderStyle}
-        onHeaderSelected={this.props.onHeaderSelected}
-        weekStartDate={this.state.weekStartDate}
-        weekEndDate={this.state.weekEndDate}
-        fontSize={this.state.monthFontSize}
-        allowHeaderTextScaling={this.props.shouldAllowFontScaling}
-        headerText={this.props.headerText}
-      />
+    return (
+      this.props.showMonth && (
+        <CalendarHeader
+          calendarHeaderFormat={this.props.calendarHeaderFormat}
+          calendarHeaderContainerStyle={this.props.calendarHeaderContainerStyle}
+          calendarHeaderStyle={this.props.calendarHeaderStyle}
+          onHeaderSelected={this.props.onHeaderSelected}
+          weekStartDate={this.state.weekStartDate}
+          weekEndDate={this.state.weekEndDate}
+          fontSize={this.state.monthFontSize}
+          allowHeaderTextScaling={this.props.shouldAllowFontScaling}
+          headerText={this.props.headerText}
+        />
+      )
     );
   }
 
@@ -552,11 +567,11 @@ class CalendarStrip extends Component {
     if (this.props.scrollable && this.state.datesList.length) {
       return (
         <Scroller
-          ref={scroller => this.scroller = scroller}
+          ref={(scroller) => (this.scroller = scroller)}
           data={this.state.datesList}
           pagingEnabled={this.props.scrollerPaging}
           renderDay={this.renderDay}
-          renderDayParams={{...this.createDayProps(this.state.selectedDate)}}
+          renderDayParams={{ ...this.createDayProps(this.state.selectedDate) }}
           maxSimultaneousDays={this.numDaysScroll}
           initialRenderIndex={this.state.initialScrollerIndex}
           minDate={this.props.minDate}
@@ -581,53 +596,52 @@ class CalendarStrip extends Component {
         style={[
           styles.calendarContainer,
           { backgroundColor: this.props.calendarColor },
-          this.props.style
+          this.props.style,
         ]}
       >
         <View style={[this.props.innerStyle, { height: this.state.height }]}>
-          {this.props.showDate && this.props.calendarHeaderPosition === "above" &&
-            this.renderHeader()
-          }
-
-          <View style={styles.datesStrip}>
-            <WeekSelector
-              controlDate={this.props.minDate}
-              iconComponent={this.props.leftSelector}
-              iconContainerStyle={this.props.iconContainer}
-              iconInstanceStyle={this.props.iconLeftStyle}
-              iconStyle={this.props.iconStyle}
-              imageSource={this.props.iconLeft}
-              onPress={this.getPreviousWeek}
-              weekStartDate={this.state.weekStartDate}
-              weekEndDate={this.state.weekEndDate}
-              size={this.state.selectorSize}
-            />
-
+          {this.props.showDate &&
+            this.props.calendarHeaderPosition === "above" && (
+              <View style={styles.headerContainer}>
+                <WeekSelector
+                  controlDate={this.props.minDate}
+                  iconComponent={this.props.leftSelector}
+                  iconContainerStyle={this.props.iconContainer}
+                  iconInstanceStyle={this.props.iconLeftStyle}
+                  iconStyle={this.props.iconStyle}
+                  imageSource={this.props.iconLeft}
+                  onPress={this.getPreviousWeek}
+                  weekStartDate={this.state.weekStartDate}
+                  weekEndDate={this.state.weekEndDate}
+                  size={this.state.selectorSize}
+                />
+                {this.renderHeader()}
+                <WeekSelector
+                  controlDate={this.props.maxDate}
+                  iconComponent={this.props.rightSelector}
+                  iconContainerStyle={this.props.iconContainer}
+                  iconInstanceStyle={this.props.iconRightStyle}
+                  iconStyle={this.props.iconStyle}
+                  imageSource={this.props.iconRight}
+                  onPress={this.getNextWeek}
+                  weekStartDate={this.state.weekStartDate}
+                  weekEndDate={this.state.weekEndDate}
+                  size={this.state.selectorSize}
+                />
+              </View>
+            )}
+
+          <View style={[styles.datesStrip, this.props.datesStripStyle]}>
             <View onLayout={this.onLayout} style={styles.calendarDates}>
-              {this.props.showDate ? (
-                this.renderWeekView(this.state.days)
-              ) : (
-                this.renderHeader()
-              )}
+              {this.props.showDate
+                ? this.renderWeekView(this.state.days)
+                : this.renderHeader()}
             </View>
-
-            <WeekSelector
-              controlDate={this.props.maxDate}
-              iconComponent={this.props.rightSelector}
-              iconContainerStyle={this.props.iconContainer}
-              iconInstanceStyle={this.props.iconRightStyle}
-              iconStyle={this.props.iconStyle}
-              imageSource={this.props.iconRight}
-              onPress={this.getNextWeek}
-              weekStartDate={this.state.weekStartDate}
-              weekEndDate={this.state.weekEndDate}
-              size={this.state.selectorSize}
-            />
           </View>
 
-          {this.props.showDate && this.props.calendarHeaderPosition === "below" &&
-            this.renderHeader()
-          }
+          {this.props.showDate &&
+            this.props.calendarHeaderPosition === "below" &&
+            this.renderHeader()}
         </View>
       </View>
     );
diff --git a/src/WeekSelector.js b/src/WeekSelector.js
index 1e5a03a..fb6229d 100644
--- a/src/WeekSelector.js
+++ b/src/WeekSelector.js
@@ -12,22 +12,26 @@ class WeekSelector extends Component {
     iconComponent: PropTypes.any,
     iconContainerStyle: PropTypes.oneOfType([
       PropTypes.object,
-      PropTypes.number
+      PropTypes.number,
     ]),
     iconInstanceStyle: PropTypes.oneOfType([
       PropTypes.object,
-      PropTypes.number
+      PropTypes.number,
     ]),
     iconStyle: PropTypes.oneOfType([
       PropTypes.object,
       PropTypes.number,
-      PropTypes.array
+      PropTypes.array,
+    ]),
+    imageSource: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.object,
+      PropTypes.number,
     ]),
-    imageSource: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.number]),
     size: PropTypes.number,
     onPress: PropTypes.func,
     weekStartDate: PropTypes.object,
-    weekEndDate: PropTypes.object
+    weekEndDate: PropTypes.object,
   };
 
   shouldComponentUpdate(nextProps) {
@@ -67,7 +71,7 @@ class WeekSelector extends Component {
       onPress,
       weekEndDate,
       weekStartDate,
-      size
+      size,
     } = this.props;
 
     const enabled = this.isEnabled(controlDate, weekStartDate, weekEndDate);
@@ -76,7 +80,7 @@ class WeekSelector extends Component {
     let component;
     if (React.isValidElement(iconComponent)) {
       component = React.cloneElement(iconComponent, {
-        style: [iconComponent.props.style, { opacity: opacity.opacity }]
+        style: [iconComponent.props.style, { opacity: opacity.opacity }],
       });
     } else if (Array.isArray(iconComponent)) {
       component = iconComponent;
@@ -89,7 +93,7 @@ class WeekSelector extends Component {
             imageSize,
             iconStyle,
             iconInstanceStyle,
-            opacity
+            opacity,
           ]}
           source={imageSource}
         />
@@ -98,7 +102,11 @@ class WeekSelector extends Component {
 
     return (
       <TouchableOpacity
-        style={[styles.iconContainer, iconContainerStyle]}
+        style={[
+          styles.iconContainer,
+          iconContainerStyle,
+          { opacity: opacity.opacity },
+        ]}
         onPress={onPress}
         disabled={!enabled}
       >