React-native-calendars: Style Selected Date with Marking type Period

[shiroze]

Description

Selected date is become square box, I want to style it to Circle

Expected Behavior

Observed Behavior

Code I use

<Calendar
  ref={(ref) => { this.calendarRef = ref; }}
  style={styles.calendar}
  theme={{
    backgroundColor: '#ffffff',
    calendarBackground: '#ffffff',
    textSectionTitleColor: Theme.COLORS.HEADTITLES,
    selectedDayBackgroundColor: Theme.COLORS.DEFAULT,
    selectedDayTextColor: '#ffffff',
    todayTextColor: '#00adf5',
    dayTextColor: '#2d4150',
    textDisabledColor: '#d9e1e8',
    dotColor: '#00adf5',
    selectedDotColor: '#ffffff',
    arrowColor: 'orange',
    monthTextColor: Theme.COLORS.DEFAULT,
    indicatorColor: Theme.COLORS.DEFAULT,
    textDayFontFamily: 'monospace',
    textMonthFontFamily: 'monospace',
    textDayHeaderFontFamily: 'monospace',
    textDayFontWeight: '300',
    textMonthFontWeight: 'bold',
    // textDayHeaderFontWeight: '300',
    // textDayFontSize: 16,
    // textMonthFontSize: 16,
    // textDayHeaderFontSize: 16,
    // 'stylesheet.day.basic': {
    //   base: {
    //     overflow: 'hidden',
    //   }
    // },
    'stylesheet.day.period': {
      base: {
        overflow: 'hidden',
        height: 34,
        alignItems: 'center',
        width: 38,
      },
    },
    // 'stylesheet.day.single': {
    //   base: {
    //     overflow: 'hidden',
    //     height: 34,
    //     alignItems: 'center',
    //     width: 38,
    //   }
    // }
  }}
  onMonthChange={(month) => {this._loadData(month.year+"-"+month.month+"-"+month.day,this.state.katakunci)}}
  firstDay={1}
  onPressArrowLeft={substractMonth => { substractMonth(); this.setState({ selected: "", items: {}, events: [] }) }}
  onPressArrowRight={addMonth => { addMonth(); this.setState({ selected: "", items: {}, events: [] }) }}
  markingType={'period'}
  markedDates={{ ...this.state.items, [this.state.selected]: { selected: true, color: Theme.COLORS.DEFAULT, disableTouchEvent: true }}}
/>

Environment

Please run these commands in the project folder and fill in their results:

• npm ls react-native-calendars: [email protected]
• npm ls react-native: [email protected]

Also specify:

Emulator Genymotion Google Pixel (7.1 API 25)

[shahrajk]

Hi @shiroze

Try this

'stylesheet.day.period': { today: { backgroundColor: 'red', borderRadius: 32 / 2, } },

[shiroze]

Hi @shiroze

Try this

'stylesheet.day.period': { today: { backgroundColor: 'red', borderRadius: 32 / 2, } },

Not working, for selected day. the Stylesheet for Today date.

Solution I use to solve this case

markingType={'period'}
markedDates={{ ...this.state.items, [this.state.selected]: { startingDay: true, endingDay: true, color : 'rgba(231, 76, 60, .8)', textColor: '#FFF' }}}