markingType="period" single day CIRCLE

[kenkotch]

Please make our job easier by filling this template out to completion. If you're requesting a feature instead of reporting a bug, please feel free to skip the Environment and Reproducible Demo sections.

Description

I'm setting my marking type to period as I have some multi day events and single day events. When making a single day event, the marker is not a circle. How can I make it such?

Expected Behavior

Single day events should be circles

Observed Behavior

They are ovals

If there's an error message, please paste the full terminal output and error message in this code block:

Error text goes here!

Environment

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

• npm ls react-native-calendars: react-native-calendars@1.19.3
• npm ls react-native: (empty) though it is version 0.55.3

Also specify:

1. Phone/emulator/simulator & version: Android - every version I have tried, simulator and tablet

Reproducible Demo

let dot = {}
dot['2018-07-09'] = { startingDay: true, color: '#00adf5', textColor: '#2e2e2e' }
dot['2018-07-10'] = { endingDay: true, color: '#d4d4d4' }
dot['2018-07-17'] = { startingDay: true, endingDay: true, color: '#d4d4d4' }
dot['2018-07-25'] = { startingDay: true, endingDay: true, color: '#d4d4d4' }

<Calendar
  markingType="period"
  markedDates={ dot }
/>

[externalshawnhong]

Did you figure out a solution on this? I'm trying to achieve the same thing

[kenkotch]

I did not. No longer on this project so I moved on. I still think it should be addressed though

[externalshawnhong]

Oh. Do you happen to know the issue number where it was resolved? Couldn't find it myself.

[claidler]

I fixed this by making a change in the library. Will try a pull request later. Inside src/period/index.js inside of elseif(flags.endingDay && flags.startingDay) around line 190, try adding width:34 inside container.push()

[EmilianoCervantes]

I did this simple validation to change from the semi-oval to a circle when selecting same day:

const checkSameDay = () => {
 if (fromDate === toDate) {
   return {
     [fromDate]: {selected: true, color: '#66e394'},
   };
 }
 return {
   [fromDate]: {startingDay: true, color: '#66e394'},
   [toDate]: {endingDay: true, color: '#66e394'},
 };
}

You also have to change from starting to selected

[StefChatz]

Try adding this in the single day:

[date]: { color: 'grey', customContainerStyle: { width: '74%', }, },