-
Notifications
You must be signed in to change notification settings - Fork 24
Add locale support for month name #136
Comments
Should we dynamically import the locale module resolving it's path by the |
@franciscohanna92 it can be a solution definitely |
@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 |
Ok! I have not use date-fns that much, but I will go for the dynamic import solution and open a PR. |
@havenchyk Here it is #137 |
@havenchyk @franciscohanna92 Hi, I see that PR for the locale support is still open. Do you have a timeline when it could be merged? |
@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. |
@franciscohanna92 thank you! |
this is a great idea what I was looking for but currently the PR is still open. otherwise I need to overwrite via 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} />}
/>
);
}; |
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 fromdate-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
The text was updated successfully, but these errors were encountered: