Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
durgaswaroop opened this issue May 12, 2023 · 1 comment
Open

Comments

@durgaswaroop
Copy link

durgaswaroop commented May 12, 2023

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant