How to configure locale?

[clauderic]

How to configure locale?

[RifeWang]

@clauderic thank you very much! it's very accurate.

[clauderic]

You can use the locale prop to pass in a custom locale to react-infinite-calendar. Behind the scenes, it relies on Moment.js for date parsing, so you can pass in all the params it supports, as well as a few custom ones specific to react-infinite-calendar (such as todayLabel, headerFormat and blank).

Here's an example I put together from looking at the Moment.js locale for zh-cn:

const locale = {
    name: 'zh-cn',
    todayLabel: {
        long: '今天'
    },
    blank: '选择日期...',
    headerFormat: 'LL',
    months : '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
    monthsShort : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
    weekdays : '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
    weekdaysShort : '周日_周一_周二_周三_周四_周五_周六'.split('_'),
    weekdaysMin : '日_一_二_三_四_五_六'.split('_'),
    longDateFormat : {
        LT : 'Ah点mm分',
        LTS : 'Ah点m分s秒',
        L : 'YYYY-MM-DD',
        LL : 'YYYY年MMMD日',
        LLL : 'YYYY年MMMD日Ah点mm分',
        LLLL : 'YYYY年MMMD日ddddAh点mm分',
        l : 'YYYY-MM-DD',
        ll : 'YYYY年MMMD日',
        lll : 'YYYY年MMMD日Ah点mm分',
        llll : 'YYYY年MMMD日ddddAh点mm分'
    },
    week: {
        dow: 1,
        doy: 4
    }
};

ReactDOM.render(
  <InfiniteCalendar locale={locale} />,
  document.getElementById('root')
);

And here is a live example:
https://jsfiddle.net/4rhn03do/23/

P.S. I don't speak Chinese so I'm not sure how accurate my example is 😅