diff --git a/components/calendar.js b/components/calendar.js index 791654ae74834032d4b4560bcd0f51928744e955..6c4ec69987fd1d3eeab870da04e794486eb270c6 100644 --- a/components/calendar.js +++ b/components/calendar.js @@ -1,9 +1,9 @@ import React, { Component } from 'react' import { CalendarList } from 'react-native-calendars' -import {LocalDate} from 'js-joda' +import { LocalDate } from 'js-joda' import { getBleedingDaysSortedByDate } from '../db' import cycleModule from '../lib/cycle' -import {shadesOfRed} from '../styles/index' +import { shadesOfRed, calendarTheme } from '../styles/index' import styles from '../styles/index' import nothingChanged from '../db/db-unchanged' @@ -52,6 +52,9 @@ export default class CalendarView extends Component { ) } markingType={'custom'} + // If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday. + firstDay={1} + theme={calendarTheme} /> ) } diff --git a/styles/index.js b/styles/index.js index c0dac87494e9941a9803e1bc4ab9bd4f8b550296..baa39373cfa4599348c8e1f61b215e8dd07dbcad 100644 --- a/styles/index.js +++ b/styles/index.js @@ -26,6 +26,16 @@ const defaultIndentation = 10 const defaultTopMargin = 10 const colorInActive = '#666666' +export const calendarTheme = { + textDayFontFamily: textFont, + textMonthFontFamily: textFontBold, + textDayHeaderFontFamily: textFont, + textDayFontSize: regularSize, + textMonthFontSize: regularSize, + textDayHeaderFontSize: hintSize, + textSectionTitleColor: 'grey' +} + export default StyleSheet.create({ appText: { color: 'black',