Skip to content
This repository has been archived by the owner on Jun 9, 2023. It is now read-only.

Add locale support for month name #136

Open
franciscohanna92 opened this issue Feb 18, 2020 · 10 comments
Open

Add locale support for month name #136

franciscohanna92 opened this issue Feb 18, 2020 · 10 comments

Comments

@franciscohanna92
Copy link

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

franciscohanna92 commented Feb 19, 2020

date-fns handles locales as modules to be imported when needed.

Should we dynamically import the locale module resolving it's path by the locale prop as a string or should we make the user install date-fns locally, import the locale module and pass it as a prop?

@havenchyk
Copy link
Contributor

@franciscohanna92 it can be a solution definitely

@franciscohanna92
Copy link
Author

@havenchyk Which one?

@havenchyk
Copy link
Contributor

@havenchyk Which one?

date-fns is a direct dependency, so user doesn’t need to install it additionally, on the other hand I’m not familiar with locales from date-fns, need to investigate

@franciscohanna92
Copy link
Author

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

franciscohanna92 added a commit to franciscohanna92/simple-react-calendar that referenced this issue Feb 20, 2020
@franciscohanna92
Copy link
Author

@havenchyk Here it is #137

@vbthrillworks
Copy link

@havenchyk @franciscohanna92 Hi, I see that PR for the locale support is still open. Do you have a timeline when it could be merged?

@franciscohanna92
Copy link
Author

@vbthrillworks I've resolved some merge conflicts that were pending, but I'm not a maintainer of this repo so @havenchyk has the last word on when this is going to be merged.

@vbthrillworks
Copy link

@franciscohanna92 thank you!

@irhamputra
Copy link

irhamputra commented Oct 18, 2021

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} />}
      />
  );
};

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

No branches or pull requests

4 participants