shows predicted bleeding with red circles, also sets up today formatting

components/calendar.js

@@ -1,8 +1,10 @@
 import React, { Component } from 'react'
 import { CalendarList } from 'react-native-calendars'
+import {LocalDate} from 'js-joda'
 import { getOrCreateCycleDay, bleedingDaysSortedByDate } from '../db'
 import cycleModule from '../lib/cycle'
-import {shadesOfRed, shadesOfGrey} from '../styles/index'
+import {shadesOfRed} from '../styles/index'
+import styles from '../styles/index'
 
 export default class CalendarView extends Component {
   constructor(props) {
@@ -10,7 +12,8 @@ export default class CalendarView extends Component {
     const predictedMenses = cycleModule().getPredictedMenses()
     this.state = {
       bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate),
-      predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses)
+      predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
+      todayInCalFormat: todayToCalFormat()
     }
 
     this.setStateWithCalFormattedDays = (function (CalendarComponent) {
@@ -18,7 +21,8 @@ export default class CalendarView extends Component {
         const predictedMenses = cycleModule().getPredictedMenses()
         CalendarComponent.setState({
           bleedingDaysInCalFormat: toCalFormat(bleedingDaysSortedByDate),
-          predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses)
+          predictedBleedingDaysInCalFormat: predictionToCalFormat(predictedMenses),
+          todayInCalFormat: todayToCalFormat()
         })
       }
     })(this)
@@ -35,7 +39,6 @@ export default class CalendarView extends Component {
     const navigate = this.props.navigate
     navigate('CycleDay', { cycleDay })
   }
-
   render() {
     return (
       <CalendarList
@@ -43,11 +46,12 @@ export default class CalendarView extends Component {
         markedDates={
           Object.assign(
             {},
+            this.state.todayInCalFormat,
             this.state.bleedingDaysInCalFormat,
             this.state.predictedBleedingDaysInCalFormat
           )
         }
-        markingType={'period'}
+        markingType={'custom'}
       />
     )
   }
@@ -56,9 +60,14 @@ export default class CalendarView extends Component {
 function toCalFormat(bleedingDaysSortedByDate) {
   return bleedingDaysSortedByDate.reduce((acc, day) => {
     acc[day.date] = {
-      startingDay: true,
+      customStyles: {
-      endingDay: true,
+        container: {
-      color: shadesOfRed[day.bleeding.value]
+          backgroundColor: shadesOfRed[day.bleeding.value],
+        }
+      }
+    }
+    if (day.date === LocalDate.now().toString()) {
+      acc[day.date].customStyles.text = styles.calendarToday
     }
     return acc
   }, {})
@@ -70,12 +79,36 @@ function predictionToCalFormat(predictedDays) {
   return predictedDays.reduce((acc, setOfDays) => {
     setOfDays.reduce((accSet, day, i) => {
       accSet[day] = {
-        startingDay: true,
+        customStyles: {
-        endingDay: true,
+          container: {
-        color: (i === middleIndex) ? shadesOfGrey[1] : shadesOfGrey[0]
+            borderColor: (i === middleIndex) ? shadesOfRed[3] : shadesOfRed[2],
+            borderWidth: 3,
+          },
+          text: {
+            marginTop: 1,
+          }
+        }
+      }
+      if (day === LocalDate.now().toString()) {
+        accSet[day].customStyles.text = Object.assign(
+          {},
+          styles.calendarToday,
+          {marginTop: -2}
+        )
       }
       return accSet
     }, acc)
     return acc
   }, {})
+}
+
+function todayToCalFormat() {
+  const todayDateString = LocalDate.now().toString()
+  const todayFormated = {}
+  todayFormated[todayDateString] = {
+    customStyles: {
+      text: styles.calendarToday
+    }
+  }
+  return todayFormated
 }

styles/index.js

@@ -2,9 +2,9 @@ import { StyleSheet } from 'react-native'
 
 export const primaryColor = '#ff7e5f'
 export const secondaryColor = '#351c4d'
+export const secondaryColorLight = '#91749d'
 export const fontOnPrimaryColor = 'white'
 export const shadesOfRed = ['#ffcbbf', '#ffb19f', '#ff977e', '#ff7e5f'] // light to dark
-export const shadesOfGrey = ['#e5e5e5', '#cccccc'] // [lighter, darker]
 
 const defaultBottomMargin = 5
 const defaultIndentation = 10
@@ -243,6 +243,12 @@ export default StyleSheet.create({
   },
   page: {
     marginHorizontal: 10
+  },
+  calendarToday: {
+    fontWeight: 'bold',
+    fontSize: 20,
+    color: secondaryColor,
+    marginTop: 1
   }
 })