React-calendar: formatShortWeekday always returns a date string in English

[akabab]

Even if my locale is set to 'fr-FR', formatShortWeekday pass as 1st argument the date in english and as a String, I can't manage to format it as I would.

[wojtekmaj]

That is very odd. formatShortWeekday gets two arguments, one being a Date() and another being locale. Maybe it just looks like a string?

If not, try the following:

formatShortWeekday={(date) => {
  if (!(date instanceof Date)) {
    console.error(date);
    throw new Error('Date is not actually a date');
  }

  return 'Weekday';
}}

and share the console output.

[tokurvin]

Hello,

I am still rather inexperienced with javascript/React so I might have some silly mistake. So please bear with me.

I am having similar issues with localizing the formatMonthYear and formatShortWeekday. But in my case the argument "date" is always "undefined", and I cannot figure out what is my mistake.

I added your proposal code to my calendar as follows:

<Calendar
    id="calendarComponent"
    minDetail="month"
    maxDetail="month"
    showNeighboringMonth
    selectRange
    calendarType="ISO 8601"
    minDate={calendarMinDate}
    maxDate={calendarMaxDate}
    value={calendarDays}
    onClickDay={this.handleCalendarClick}
    onChange={this.handleCalendarChange}
    formatShortWeekday={(date) => {
        if (!(date instanceof Date)) {
          console.error(date);
          throw new Error('Date is not actually a date');
        }     
        return 'Weekday';
      }}
    tileDisabled={({date, view}) =>
        (view === 'month') && // Block day tiles only
        this.isDayReserved(this.props.reserveddays,date,true)} // check afternoons only
/>

The tileDisabled function works fine and I am able to disable wanted tiles (just mentioning this for reference).

Here is the console output:

ReservationForm.js:946 Uncaught Error: Date is not actually a date
    at formatShortWeekday (ReservationForm.js:946)
    at Weekdays (Weekdays.js:45)
    at renderWithHooks (react-dom.development.js:13449)
    at mountIndeterminateComponent (react-dom.development.js:15605)
    at beginWork (react-dom.development.js:16238)
    at performUnitOfWork (react-dom.development.js:20279)
    at workLoop (react-dom.development.js:20320)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:19503)
    at renderRoot (react-dom.development.js:20433)
    at performWorkOnRoot (react-dom.development.js:21357)
    at performWork (react-dom.development.js:21267)
    at performSyncWork (react-dom.development.js:21241)
    at requestWork (react-dom.development.js:21096)
    at scheduleWork (react-dom.development.js:20909)
    at scheduleRootUpdate (react-dom.development.js:21604)
    at updateContainerAtExpirationTime (react-dom.development.js:21630)
    at updateContainer (react-dom.development.js:21698)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:22011)
    at react-dom.development.js:22163
    at unbatchedUpdates (react-dom.development.js:21486)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:22159)
    at Object.render (react-dom.development.js:22234)
    at Module../src/index.js (index.js:10)
    at __webpack_require__ (bootstrap:781)
    at fn (bootstrap:149)
    at Object.0 (store.js:20)
    at __webpack_require__ (bootstrap:781)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

[wojtekmaj]

@tokurvin As documentation states, first argument is locale, second is date.

[tokurvin]

@tokurvin As documentation states, first argument is locale, second is date.

I actually tried that first, but then changed it to what you recommended above.
Unfortunately I am still so inexperienced, I did not understand that was not a solution, but something else...

But I think I now got it working by adding the following inline:
formatShortWeekday={(locale,value) => ['Su', 'Ma', 'Ti', 'Ke', 'To', 'Pe', 'La'][value.getDay()]}

I tried to create a callback and it was probably the issue I had.