BugiDev / react-native-calendar-strip

Easy to use and visually stunning calendar component for React Native.
MIT License
959 stars 329 forks source link

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

Open durgaswaroop opened 1 year ago

durgaswaroop commented 1 year ago

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.

durgaswaroop commented 1 year ago

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.