React-calendar: More explicit documentation on how to override formatting

[hansmodo]

For example it's not clear how to use 'formatShortWeekday' .

example is currently: (value) => formatDate(value, 'dd')

But when supplying my own formatting function as in the example I get an error complaining about calling incorrectly calling .replace() in the source code. Questions I have would be - is 'value' passed to the custom function supposed to be a date? Are we supposed to perform some native js date operation and return a value? A fully working example would be even better. thx

[wojtekmaj]

Yes, your assumptions are correct. I'll make sure to make documentation clearer :) Thanks for suggestion.

[nikolas]

Same problem here, I'm just trying to make the day names display as the first letter rather than the first three, and this is unclear from the documentation.

[wojtekmaj]

@nikolas formatShortWeekday should be the way to go. The easiest solution in your case would be something like
formatShortWeekday={value => ['S', 'M', 'T', 'W', 'T', 'F', 'S'][value.getDay()]}

[nikolas]

thanks, i got it! ^_^

[Alek-S]

Hey, I got a related question. I'm doing

formatShortWeekday = { value => ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'][value.getDay()]}

but it gets formatted into all caps to MO TU WE TH FR SA SU

is there a way to get it to retain capitalization fed in with formatShortWeekday?

[wojtekmaj]

Sure. They are capitalized by CSS only, so you just have to overwrite the default styling.

[Chusynuk]

Hi, I have a doubt about formatShortWeekday also. Idk why but all languages are working nicely, but Portuguese is the only language which shows the whole weekday word , trying this

() => new Intl.DateTimeFormat(localeLang, { weekday: 'short' }).format(date).substring(0, 3)

localeLang and date are a dynamic variables

but not success. Any ideas?

[akhilaudable]

@nikolas formatShortWeekday should be the way to go. The easiest solution in your case would be something like
formatShortWeekday={value => ['S', 'M', 'T', 'W', 'T', 'F', 'S'][value.getDay()]}

How to use it in the "Calendar" ?