react-native-calendar-strip icon indicating copy to clipboard operation
react-native-calendar-strip copied to clipboard

Is it possible to change the highlight shape and size of a date?

Open johnnydepup opened this issue 2 years ago • 1 comments

Right now, when i set customDatesStyles with a background color, it get applied as a big circle around the date. Is it possible to change the shape to be a square instead of a circle?

Also, Can the radius of the circle be decreased? By default, it is bigger than what I would want. I don't see nay properties to directly change it.

Can it be set through either dateContainerStyle in customDatesStyles? I don't see any example of a way to do that.

johnnydepup avatar May 12 '23 18:05 johnnydepup

After going through the code, I see it is possible to do these. I couldn't get it working exactly as I wanted, but I see that it can be possible. I probably have to dig into the code a little bit more to get the necessary details.

For anyone interested, here is how this can be done:

To change the shape from a circle to square, we can play with the borderRadius parameter in the dateContainerStyle. So, something like the following will create rounded squares.

 <CalendarStrip
        ....
    customDatesStyles={(date) => {
    dateContainerStyle: {
        borderRadius: 5
    }}
    />

Similarly, for adjusting the size of the circle, we have width and height properties for the dateContainerStyle object.

I am trying to see if I can change the size of the circle without changing the size of the date, but I haven't been able to figure that out yet. I will keep this open until I find that too or get an answer from someone.

For anyone, wondering, I found these from the CalendarDay.js file in the code.

johnnydepup avatar May 12 '23 18:05 johnnydepup