React-calendar: Custom styling

[yicaiweng]

Hello there,
How do I get rid of some of those elements such as the << >> arrows, change Mon Tue Wed to just M T W.

Thanks in advance!

[jwrlee88]

check out the prevLabel and the prev2Label in the docs! The PrevLabel prop is what renders the '<' arrows, and the prev2Label is what renders '<<'

[yicaiweng]

thanks for your reply, I got that figured out. But not sure how to Chang Mon Tue We’d to just M T W T

[wojtekmaj]

You can hide that using CSS :) You need display: none on .react-calendar__month-view__weekNumbers.

[bobgutierrez]

Hi,
How can I change font family? Also, I want circles instead of squares when selecting a day, is that possible? Can I have today’s day showing with one style and another day selected i.e. 2 days ago, with a different style?

[yerassylad]

Hello, what can i do to change rendering of days to one line?
like:
1 2 3 4 ... 30

[wojtekmaj]

@bobgutierrez
font family: Just via CSS font-family, should work fine.
circles: border-radius: 50% on .react-calendar__tile--active class

@yerassylad
flex-wrap: nowrap; to .react-calendar__month-view__days and margin: 0 !important; to .react-calendar__month-view__days .react-calendar__tile

[ctriantaf]

Hello @wojtekmaj, can we pass styles using the style prop?

[sanjeevdev]

can add any html tag on Date box?

[wojtekmaj]

@Clepto no, it's not possible, sorry.

@saitodisse You can't, but you can use CSS content to prepend/append content with some additional text.

[llamerr]

@bobgutierrez
circles: border-radius: 50% on .react-calendar__tile--active class

This does not work, since they are not circles, but ellipsises - element is 36x29

Looking at code, I think for my case it's just hardcoded as count={7} for days, so applying some custom height of height: 36px; should work for me

[DDDDDanica]

@llamerr i found out you can do this to override the circle element style :)

"& abbr": {
              textDecoration: "none",
              width: "24px",
              height: "24px",
              borderRadius: "50%",
              display: "flex",
              justifyContent: "center",
              alignItems: "center"
            },

[CrazyPythonLover1]

how to change the border color of react-calendar?

.react-calendar{
    border: none !important;
}

I wrote this code .. but it doesn't work

[raraitis]

Hi, how could I change weekdays to - "M", "T", "W" ... instead of "MON" "TUE" "WED" ... ? And round only left and right for the first and last selected date on selecting range?

[wojtekmaj]

@raraitis

Hi, how could I change weekdays to - "M", "T", "W" ... instead of "MON" "TUE" "WED" ... ?

See README for formatShortWeekday.

And round only left and right for the first and last selected date on selecting range?

Tiles have classes:

• .react-calendar__tile--range
• .react-calendar__tile--rangeStart
• .react-calendar__tile--rangeEnd

I think they are pretty self explanatory. Add styles as you need them.