Add locale support for month name

Are you submitting a bug report or a feature request?

Feature request

What is the current behavior?

Month names are english only and there is no way to change it since it’s using formatDate function from date-fns, which defaults to en-US if no locale is specified.

What is the expected behavior?

Should be able to pass a locale prop to the component and get months names according to it.

What’s your environment?

simple-react-calendar 1.9.4

[franciscohanna92]

Ok! I have not use date-fns that much, but I will go for the dynamic import solution and open a PR.

[irhamputra]

this is a great idea what I was looking for but currently the PR is still open. otherwise I need to overwrite via MonthHeaderComponent props and copy-paste from the month_header.tsx and header_button.tsx also the PR code

don’t forget to import module from date-fns.

workaround:

// Header Button
const HeaderButton = ({ arrow, blockClassName, enabled, type, title, onClick }) => (
  <button
    className={cx(`${blockClassName}-header_button`, `is-${type}`, {
      'is-disabled': !enabled,
    })}
    type="button"
    disabled={!enabled}
    title={title}
    onClick={onClick}
  >
    {arrow}
  </button>
);

// Custom Month Header
const CustomMonthHeader = ({
  activeMonth,
  minDate,
  maxDate,
  blockClassName,
  headerNextArrow,
  headerNextTitle,
  headerPrevArrow,
  headerPrevTitle,
  onMonthChange,
}) => {
  const prevEnabled = minDate ? isBefore(startOfMonth(minDate), startOfMonth(activeMonth)) : true;
  const nextEnabled = maxDate ? isAfter(startOfMonth(maxDate), startOfMonth(activeMonth)) : true;

  const switchMonth = (offset) => {
    onMonthChange(addMonths(activeMonth, offset));
  };

  return (
    <div className={`${blockClassName}-month_header`}>
      <HeaderButton
        type="prev"
        arrow={headerPrevArrow}
        title={headerPrevTitle}
        enabled={prevEnabled}
        onClick={() => switchMonth(-1)}
        blockClassName={blockClassName}
      />
      <div className={`${blockClassName}-month_header_title`}>{format(activeMonth, 'MMMM yyyy', { locale: de })}</div>
      <HeaderButton
        type="next"
        arrow={headerNextArrow}
        title={headerNextTitle}
        enabled={nextEnabled}
        onClick={() => switchMonth(1)}
        blockClassName={blockClassName}
      />
    </div>
  );
};


// Root Calendar
const Calendar = ({ onSelectDate, selectedDate, children }) => {
  return (
      <ReactCalendar
        MonthHeaderComponent={(props) => <CustomMonthHeader {...props} />}
        onSelect={onSelectDate}
        selected={selectedDate}
        activeMonth={selectedDate}
        renderDay={(props) => (
          <CustomDay {...props} />
        )}
        renderDayOfWeek={(props) => <CustomDayOfWeek {...props} />}
      />
  );
};