Add marked text styles support

src/Calendar.style.js

@@ -63,15 +63,16 @@ export default StyleSheet.create({
   dot: {
     width: 6,
     height: 6,
-    marginTop: 1,
+    marginTop: 0,
     borderRadius: 5,
     opacity: 0
   },
 
   // CALENDAR DOTS
   dotsContainer: {
     flexDirection: 'row',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    height: 10
   },
   visibleDot: {
     opacity: 1,

src/CalendarDay.js

@@ -6,7 +6,7 @@ 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, Image } from "react-native";
 import styles from "./Calendar.style.js";
 
 class CalendarDay extends Component {
@@ -288,33 +288,34 @@ 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');
-    let validDots = <View style={[styles.dot]} />; // default empty view for no dots case
+    // const baseDotStyle = [styles.dot, styles.visibleDot];
+    // const markedDatesStyle = this.props.markedDatesStyle || {};
+    // 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))
-      .map((dot, index) => {
-        const selectedColor = dot.selectedColor || dot.selectedDotColor; // selectedDotColor deprecated
-        const backgroundColor = this.state.selected && selectedColor ? selectedColor : dot.color;
-        return (
-          <View
-            key={dot.key || (formattedDate + index)}
-            style={[
-              baseDotStyle,
-              { backgroundColor },
-              markedDatesStyle
-            ]}
-          />
-        );
-      });
+    // validDots = marking.dots
+    //   .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;
+    //     return (
+    //       <View
+    //         key={dot.key || (formattedDate + index)}
+    //         style={[
+    //           baseDotStyle,
+    //           { backgroundColor },
+    //           markedDatesStyle
+    //         ]}
+    //       />
+    //     );
+    //   });
 
     return (
-      <View style={styles.dotsContainer}>
-        {validDots}
-      </View>
+      null
+//       <View style={styles.dotsContainer}>
+//         <Image style={{width: 8}} resizeMode="contain" source={require('./img/heart.png')}></Image>
+//       </View>
     );
   }
 
@@ -348,6 +349,19 @@ class CalendarDay extends Component {
     );
   }
 
+  //Marked Text Styles
+  getMarkedTextStyles() {
+    if (!this.props.markedDates || this.props.markedDates.length === 0) {
+      return null;
+    }
+    const marking = this.state.marking;
+    if(marking.textStyle){
+      return marking.textStyle;
+    }else{
+      return null;
+    }
+  }
+
   render() {
     // Defaults for disabled state
     const {
@@ -460,7 +474,7 @@ class CalendarDay extends Component {
           >
             {showDayName && (
               <Text
-                style={[{ fontSize: dateNameFontSize }, _dateNameStyle]}
+                style={[{ fontSize: dateNameFontSize }, _dateNameStyle, this.getMarkedTextStyles()]}
                 allowFontScaling={allowDayTextScaling}
               >
                 {date.format("ddd").toUpperCase()}
@@ -471,7 +485,8 @@ class CalendarDay extends Component {
                 <Text
                   style={[
                     { fontSize: dateNumberFontSize },
-                    _dateNumberStyle
+                    _dateNumberStyle,
+                    this.getMarkedTextStyles()
                   ]}
                   allowFontScaling={allowDayTextScaling}
                 >