calendar translation / localization

new strings incl. decoration bindings for the moment.js based localizer. correction of sort-order based on moment.js format order (streamlining decorator and json). enables translation for the following formats: - dateFormat - dayFormat - yearMonthDateFormat (from dayFormat for year-view, incl. NaN display fixes) - weekOfYearFormat (in preparation of week-view) - agendaDateFormat (in preparation of agenda-view)
seatable · May 19, 2021 · c2f018c · c2f018c
1 parent 5b48307
commit c2f018c
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 21 deletions.
diff --git a/public/locale/de/calendar.json b/public/locale/de/calendar.json
@@ -7,11 +7,16 @@
   "Color_From": "Farbe",
   "Unnamed_record": "Neuer Eintrag",
   "more": "mehr",
+  ".rbc.localizer.moment.dateFormat": "DD",
+  ".rbc.localizer.moment.dayFormat": "DD ddd",
+  ".rbc.localizer.moment.weekdayFormat": "ddd",
+  ".rbc.localizer.moment.monthFormat": "MMMM",
   ".rbc.localizer.moment.yearHeaderFormat": "YYYY",
   ".rbc.localizer.moment.dayHeaderFormat": "dddd, DD. MMMM",
-  ".rbc.localizer.moment.monthFormat": "MMMM",
-  ".rbc.localizer.moment.weekdayFormat": "ddd",
+  ".rbc.localizer.moment.agendaDateFormat": "ddd MMM DD",
   ".rbc.localizer.moment.yearMonthWeekdayFormat": "ddd",
+  ".rbc.localizer.moment.yearMonthDateFormat": "DD",
+  ".rbc.localizer.moment.weekOfYearFormat": "WW",
   ".rbc.messages.date": "Datum",
   ".rbc.messages.time": "Zeit",
   ".rbc.messages.event": "Ereignis",

diff --git a/public/locale/en/calendar.json b/public/locale/en/calendar.json
@@ -7,11 +7,16 @@
   "Color_From": "Color field",
   "Unnamed_record": "Unnamed record",
   "more": "more",
+  ".rbc.localizer.moment.dateFormat": "DD",
+  ".rbc.localizer.moment.dayFormat": "DD ddd",
+  ".rbc.localizer.moment.weekdayFormat": "ddd",
+  ".rbc.localizer.moment.monthFormat": "MMM",
   ".rbc.localizer.moment.yearHeaderFormat": "YYYY",
   ".rbc.localizer.moment.dayHeaderFormat": "MM-dd-DD",
-  ".rbc.localizer.moment.monthFormat": "MMM",
-  ".rbc.localizer.moment.weekdayFormat": "ddd",
+  ".rbc.localizer.moment.agendaDateFormat": "ddd MMM DD",
   ".rbc.localizer.moment.yearMonthWeekdayFormat": "dd",
+  ".rbc.localizer.moment.yearMonthDateFormat": "DD",
+  ".rbc.localizer.moment.weekOfYearFormat": "WW",
   ".rbc.messages.date": "Date",
   ".rbc.messages.time": "Time",
   ".rbc.messages.event": "Event",

diff --git a/public/locale/fr/calendar.json b/public/locale/fr/calendar.json
@@ -7,11 +7,16 @@
   "Color_From": "Couleur",
   "Unnamed_record": "Nouveau enregistrement",
   "more": "Plus",
+  ".rbc.localizer.moment.dateFormat": "DD",
+  ".rbc.localizer.moment.dayFormat": "DD ddd",
+  ".rbc.localizer.moment.weekdayFormat": "ddd",
+  ".rbc.localizer.moment.monthFormat": "MMM",
   ".rbc.localizer.moment.yearHeaderFormat": "YYYY",
   ".rbc.localizer.moment.dayHeaderFormat": "ddd MMM DD",
-  ".rbc.localizer.moment.monthFormat": "MMM",
-  ".rbc.localizer.moment.weekdayFormat": "ddd",
+  ".rbc.localizer.moment.agendaDateFormat": "ddd MMM DD",
   ".rbc.localizer.moment.yearMonthWeekdayFormat": "dd",
+  ".rbc.localizer.moment.yearMonthDateFormat": "DD",
+  ".rbc.localizer.moment.weekOfYearFormat": "WW",
   ".rbc.messages.date": "Date",
   ".rbc.messages.time": "Heure",
   ".rbc.messages.event": "Evénement",

diff --git a/public/locale/zh_CN/calendar.json b/public/locale/zh_CN/calendar.json
@@ -7,11 +7,16 @@
   "Color_From": "颜色字段",
   "Unnamed_record": "未命名记录",
   "more": "更多",
+  ".rbc.localizer.moment.dateFormat": "DD",
+  ".rbc.localizer.moment.dayFormat": "DD ddd",
+  ".rbc.localizer.moment.weekdayFormat": "ddd",
+  ".rbc.localizer.moment.monthFormat": "MMM",
   ".rbc.localizer.moment.yearHeaderFormat": "YYYY年",
   ".rbc.localizer.moment.dayHeaderFormat": "MMMDD日 星期dd",
-  ".rbc.localizer.moment.monthFormat": "MMM",
-  ".rbc.localizer.moment.weekdayFormat": "ddd",
+  ".rbc.localizer.moment.agendaDateFormat": "ddd MMM DD",
   ".rbc.localizer.moment.yearMonthWeekdayFormat": "dd",
+  ".rbc.localizer.moment.yearMonthDateFormat": "DD",
+  ".rbc.localizer.moment.weekOfYearFormat": "WW",
   ".rbc.messages.date": "Date",
   ".rbc.messages.time": "Time",
   ".rbc.messages.event": "Event",

diff --git a/src/components/grid-views/year-widgets/YearDay.js b/src/components/grid-views/year-widgets/YearDay.js
@@ -35,12 +35,12 @@ class YearDay extends React.Component {
     let { isShowEvents } = this.state;
     let isOffRange = dates.month(day) !== dates.month(monthDate);
     let isCurrentDay = dates.eq(day, new Date(), 'day');
-    let label = localizer.format(day, 'dateFormat');
+    let label = localizer.format(day, 'yearMonthDateFormat');
 
     return (
       <div className="rbc-year-day-item" ref={ref => this.rbcYearDayItem = ref}>
         <div className="rbc-year-day-content" onClick={this.onEventsToggle}>
-          <div className={classnames('rbc-year-day', {'rbc-off-range': isOffRange, 'rbc-current': isCurrentDay})} >{Number(label)}</div>
+          <div className={classnames('rbc-year-day', {'rbc-off-range': isOffRange, 'rbc-current': isCurrentDay})} >{label}</div>
         </div>
         {dayEvents.length > 0 && <span className="day-events"></span>}
         {isShowEvents &&

diff --git a/src/locale/lang/de.js b/src/locale/lang/de.js
@@ -7,11 +7,16 @@ const de = {
   'Color_From': 'Farbe',
   'Unnamed_record': 'Neuer Eintrag',
   'more': 'mehr',
+  '.rbc.localizer.moment.dateFormat': 'DD',
+  '.rbc.localizer.moment.dayFormat': 'DD ddd',
+  '.rbc.localizer.moment.weekdayFormat': 'ddd',
+  '.rbc.localizer.moment.monthFormat': 'MMMM',
   '.rbc.localizer.moment.yearHeaderFormat': 'YYYY',
   '.rbc.localizer.moment.dayHeaderFormat': 'dddd, DD. MMMM',
-  '.rbc.localizer.moment.monthFormat': 'MMMM',
-  '.rbc.localizer.moment.weekdayFormat': 'ddd',
+  '.rbc.localizer.moment.agendaDateFormat': 'ddd MMM DD',
   '.rbc.localizer.moment.yearMonthWeekdayFormat': 'ddd',
+  '.rbc.localizer.moment.yearMonthDateFormat': 'DD',
+  '.rbc.localizer.moment.weekOfYearFormat': 'WW',
   '.rbc.messages.date': 'Datum',
   '.rbc.messages.time': 'Zeit',
   '.rbc.messages.event': 'Ereignis',

diff --git a/src/locale/lang/en.js b/src/locale/lang/en.js
@@ -7,11 +7,16 @@ const en = {
   'Color_From': 'Color field',
   'Unnamed_record': 'Unnamed record',
   'more': 'more',
+  '.rbc.localizer.moment.dateFormat': 'DD',
+  '.rbc.localizer.moment.dayFormat': 'DD ddd',
+  '.rbc.localizer.moment.weekdayFormat': 'ddd',
+  '.rbc.localizer.moment.monthFormat': 'MMM',
   '.rbc.localizer.moment.yearHeaderFormat': 'YYYY',
   '.rbc.localizer.moment.dayHeaderFormat': 'MM-dd-DD',
-  '.rbc.localizer.moment.monthFormat': 'MMM',
-  '.rbc.localizer.moment.weekdayFormat': 'ddd',
+  '.rbc.localizer.moment.agendaDateFormat': 'ddd MMM DD',
   '.rbc.localizer.moment.yearMonthWeekdayFormat': 'dd',
+  '.rbc.localizer.moment.yearMonthDateFormat': 'DD',
+  '.rbc.localizer.moment.weekOfYearFormat': 'WW',
   '.rbc.messages.date': 'Date',
   '.rbc.messages.time': 'Time',
   '.rbc.messages.event': 'Event',

diff --git a/src/locale/lang/fr.js b/src/locale/lang/fr.js
@@ -7,11 +7,16 @@ const fr = {
   'Color_From': 'Couleur',
   'Unnamed_record': 'Nouveau enregistrement',
   'more': 'Plus',
+  '.rbc.localizer.moment.dateFormat': 'DD',
+  '.rbc.localizer.moment.dayFormat': 'DD ddd',
+  '.rbc.localizer.moment.weekdayFormat': 'ddd',
+  '.rbc.localizer.moment.monthFormat': 'MMM',
   '.rbc.localizer.moment.yearHeaderFormat': 'YYYY',
   '.rbc.localizer.moment.dayHeaderFormat': 'ddd MMM DD',
-  '.rbc.localizer.moment.monthFormat': 'MMM',
-  '.rbc.localizer.moment.weekdayFormat': 'ddd',
+  '.rbc.localizer.moment.agendaDateFormat': 'ddd MMM DD',
   '.rbc.localizer.moment.yearMonthWeekdayFormat': 'dd',
+  '.rbc.localizer.moment.yearMonthDateFormat': 'DD',
+  '.rbc.localizer.moment.weekOfYearFormat': 'WW',
   '.rbc.messages.date': 'Date',
   '.rbc.messages.time': 'Heure',
   '.rbc.messages.event': 'Evénement',

diff --git a/src/locale/lang/zh_CN.js b/src/locale/lang/zh_CN.js
@@ -7,11 +7,16 @@ const zh_CN = {
   'Color_From': '颜色字段',
   'Unnamed_record': '未命名记录',
   'more': '更多',
+  '.rbc.localizer.moment.dateFormat': 'DD',
+  '.rbc.localizer.moment.dayFormat': 'DD ddd',
+  '.rbc.localizer.moment.weekdayFormat': 'ddd',
+  '.rbc.localizer.moment.monthFormat': 'MMM',
   '.rbc.localizer.moment.yearHeaderFormat': 'YYYY年',
   '.rbc.localizer.moment.dayHeaderFormat': 'MMMDD日 星期dd',
-  '.rbc.localizer.moment.monthFormat': 'MMM',
-  '.rbc.localizer.moment.weekdayFormat': 'ddd',
+  '.rbc.localizer.moment.agendaDateFormat': 'ddd MMM DD',
   '.rbc.localizer.moment.yearMonthWeekdayFormat': 'dd',
+  '.rbc.localizer.moment.yearMonthDateFormat': 'DD',
+  '.rbc.localizer.moment.weekOfYearFormat': 'WW',
   '.rbc.messages.date': 'Date',
   '.rbc.messages.time': 'Time',
   '.rbc.messages.event': 'Event',

diff --git a/src/utils/localizers/intl-decorator.js b/src/utils/localizers/intl-decorator.js
@@ -53,11 +53,21 @@ const intlDayHeaderFormatDecorator = (subject, moment) => {
       date, intl.get(`.rbc.localizer.moment.${format}`).d(_formats[format])
     );
   };
-  intlFormat('dayHeaderFormat');
-  intlFormat('yearHeaderFormat');
+  /* in moment.js order */
+  intlFormat('dateFormat');
+  intlFormat('dayFormat');
+  intlFormat('weekdayFormat');
   intlFormat('monthFormat');
+
+  intlFormat('yearHeaderFormat');
+  intlFormat('dayHeaderFormat');
+
+  intlFormat('agendaDateFormat', 'ddd MMM DD');
+
+  /* additional decorator formats */
   intlFormat('yearMonthWeekdayFormat', 'dd');
-  intlFormat('weekdayFormat');
+  intlFormat('yearMonthDateFormat', 'DD');
+  intlFormat('weekOfYearFormat', 'WW');
 
   subject.format = (value, format) => {
     return _format(value, format, intlLocaleCulture());