vxe-pc-ui 4.12.0 → 4.12.2

package/packages/calendar/src/calendar.ts

@@ -1,13 +1,17 @@
 import { h, ref, Ref, computed, reactive, watch, PropType, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { getConfig, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui'
+import { VxeUI, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getDateQuarter } from '../../date-panel/src/util'
 import { toCssUnit } from '../../ui/src/dom'
+import { isEnableConf } from '../../ui/src/utils'
+import { errLog } from '../../ui/src/log'
 import VxeButtonComponent from '../../button/src/button'
 import XEUtils from 'xe-utils'
 
 import type { VxeCalendarConstructor, VxeCalendarEmits, CalendarInternalData, CalendarReactData, CalendarMethods, VxeCalendarPropTypes, CalendarPrivateRef, VxeDatePanelDefines, ValueOf } from '../../../types'
 
+const { menus, getConfig, getI18n } = VxeUI
+
 export default defineVxeComponent({
   name: 'VxeCalendar',
   props: {
@@ -49,7 +53,8 @@ export default defineVxeComponent({
       type: Function as PropType<VxeCalendarPropTypes.DisabledMethod>,
       default: () => getConfig().calendar.disabledMethod
     },
-    cellStyle: Function as PropType<VxeCalendarPropTypes.CellStyle>,
+    cellStyle: [Object, Function] as PropType<VxeCalendarPropTypes.CellStyle>,
+    menuConfig: Object as PropType<VxeCalendarPropTypes.MenuConfig>,
 
     // week
     selectDay: {
@@ -60,11 +65,13 @@ export default defineVxeComponent({
   emits: [
     'update:modelValue',
     'change',
-    'click',
+    'cell-click',
     'date-prev',
     'date-today',
     'date-next',
-    'view-change'
+    'view-change',
+    'cell-menu',
+    'menu-click'
   ] as VxeCalendarEmits,
   setup (props, context) {
     const { emit } = context
@@ -136,6 +143,10 @@ export default defineVxeComponent({
       return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1
     })
 
+    const computeMenuOpts = computed(() => {
+      return Object.assign({}, getConfig().calendar.menuConfig, props.menuConfig)
+    })
+
     const computeDateListValue = computed(() => {
       const { multiple } = props
       const { selectValue } = reactData
@@ -263,11 +274,11 @@ export default defineVxeComponent({
           y = yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : ''
         } else {
           y = `${year}`
-          m = month ? getI18n(`vxe.input.date.m${month}`) : '-'
+          m = month ? getI18n('vxe.calendar.monthLabel', [month]) : '-'
         }
       }
       return {
-        y,
+        y: getI18n('vxe.calendar.yearLabel', [y]),
         m
       }
     })
@@ -709,10 +720,46 @@ export default defineVxeComponent({
       }
     }
 
-    const dateSelectEvent = (item: VxeDatePanelDefines.DateYearItem | VxeDatePanelDefines.DateQuarterItem | VxeDatePanelDefines.DateMonthItem | VxeDatePanelDefines.DateDayItem) => {
+    const dateClickEvent = (evnt: MouseEvent, item: VxeDatePanelDefines.DateYearItem | VxeDatePanelDefines.DateQuarterItem | VxeDatePanelDefines.DateMonthItem | VxeDatePanelDefines.DateDayItem) => {
+      const { type } = props
+      const { datePanelType } = reactData
+      const { date } = item
       if (!isDateDisabled(item)) {
-        dateSelectItem(item.date)
+        dateSelectItem(date)
+        dispatchEvent('cell-click', { date, type, viewType: datePanelType }, evnt)
+      }
+    }
+
+    const datContextmenuEvent = (evnt: MouseEvent, item: VxeDatePanelDefines.DateYearItem | VxeDatePanelDefines.DateQuarterItem | VxeDatePanelDefines.DateMonthItem | VxeDatePanelDefines.DateDayItem) => {
+      const { type } = props
+      const { datePanelType } = reactData
+
+      const { menuConfig } = props
+      const menuOpts = computeMenuOpts.value
+      if (menuConfig ? isEnableConf(menuOpts) : menuOpts.enabled) {
+        const { options, visibleMethod } = menuOpts
+        const { date } = item
+        if (!visibleMethod || visibleMethod({ $calendar: $xeCalendar, options, date, type, viewType: datePanelType })) {
+          if (VxeUI.contextMenu) {
+            VxeUI.contextMenu.openByEvent(evnt, {
+              options,
+              events: {
+                optionClick (eventParams) {
+                  const { option } = eventParams
+                  const gMenuOpts = menus.get(option.code)
+                  const cmMethod = gMenuOpts ? gMenuOpts.calendarMenuMethod : null
+                  const params = { menu: option, date, type, viewType: datePanelType, $event: evnt, $calendar: $xeCalendar }
+                  if (cmMethod) {
+                    cmMethod(params, evnt)
+                  }
+                  dispatchEvent('menu-click', params, eventParams.$event)
+                }
+              }
+            })
+          }
+        }
       }
+      dispatchEvent('cell-menu', { date: item.date, type, viewType: datePanelType }, evnt)
     }
 
     const dateMoveDay = (offsetDay: Date) => {
@@ -770,6 +817,10 @@ export default defineVxeComponent({
       }
     }
 
+    const dateMouseleaveEvent = () => {
+      reactData.datePanelValue = null
+    }
+
     const dateConfirmEvent = () => {
     }
 
@@ -799,14 +850,16 @@ export default defineVxeComponent({
         const extraItem = festivalItem.extra ? (XEUtils.isString(festivalItem.extra) ? { label: festivalItem.extra } : festivalItem.extra) : null
         const labels = [
           h('span', {
-            class: ['vxe-calendar--date-label', {
+            class: ['vxe-calendar--label', {
               'is-notice': festivalItem.notice
             }]
           }, extraItem && extraItem.label
             ? [
-                h('span', `${label || ''}`),
                 h('span', {
-                  class: ['vxe-calendar--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
+                  class: 'vxe-calendar--label--number'
+                }, `${label || ''}`),
+                h('span', {
+                  class: ['vxe-calendar--label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
                   style: extraItem.style
                 }, XEUtils.toValueString(extraItem.label))
               ]
@@ -818,15 +871,15 @@ export default defineVxeComponent({
           const festivalLabels = XEUtils.toValueString(festivalLabel).split(',')
           labels.push(
             h('span', {
-              class: ['vxe-calendar--date-festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
+              class: ['vxe-calendar--festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
               style: festivalItem.style
             }, [
               festivalLabels.length > 1
                 ? h('span', {
-                  class: ['vxe-calendar--date-festival--overlap', `overlap--${festivalLabels.length}`]
+                  class: ['vxe-calendar--festival--overlap', `overlap--${festivalLabels.length}`]
                 }, festivalLabels.map(label => h('span', label.substring(0, 3))))
                 : h('span', {
-                  class: 'vxe-calendar--date-festival--label'
+                  class: 'vxe-calendar--festival--label'
                 }, festivalLabels[0].substring(0, 3))
             ])
           )
@@ -845,35 +898,68 @@ export default defineVxeComponent({
       const dateListValue = computeDateListValue.value
       const matchFormat = 'yyyyMMdd'
       return [
-        h('table', {
-          class: `vxe-calendar--date-${datePanelType}-view`,
-          cellspacing: 0,
-          cellpadding: 0,
-          border: 0
+        h('div', {
+          class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
         }, [
-          h('tr', dateHeaders.map((item) => {
-            return h('th', {
-              class: 'vxe-calendar--view-th'
-            }, item.label)
-          })),
-          ...dayDatas.map((rows) => {
-            return h('tr', rows.map((item) => {
-              return h('td', {
-                class: ['vxe-calendar--view-td', {
+          h('div', {
+            class: 'vxe-calendar--view-header',
+            style: {
+              height: `${100 / (dayDatas.length + 1)}%`
+            }
+          }, [
+            h('div', {
+              class: 'vxe-calendar--view-row'
+            }, dateHeaders.map((item) => {
+              return h('div', {
+                class: 'vxe-calendar--view-item',
+                style: {
+                  width: `${100 / dateHeaders.length}%`
+                }
+              }, [
+                h('div', {
+                  class: 'vxe-calendar--view-item-inner'
+                }, [
+                  h('div', {
+                    class: 'vxe-calendar--view-item-label'
+                  }, item.label)
+                ])
+              ])
+            }))
+          ]),
+          h('div', {
+            class: 'vxe-calendar--view-body'
+          }, dayDatas.map((rows) => {
+            return h('div', {
+              class: 'vxe-calendar--view-row',
+              style: {
+                height: `${100 / dayDatas.length}%`
+              }
+            }, rows.map((item) => {
+              const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat)
+              return h('div', {
+                class: ['vxe-calendar--view-item', {
                   'is--prev': item.isPrev,
                   'is--current': item.isCurrent,
                   'is--now': item.isNow,
                   'is--next': item.isNext,
                   'is--disabled': isDateDisabled(item),
-                  'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                  'is--selected': isSelected,
                   'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                 }],
-                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle),
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item)
-              }, renderDateLabel(item, item.label))
+                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                  width: `${100 / rows.length}%`
+                }),
+                onClick: (evnt) => dateClickEvent(evnt, item),
+                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                onMouseenter: () => dateMouseenterEvent(item),
+                onMouseleave: dateMouseleaveEvent
+              }, [
+                h('div', {
+                  class: 'vxe-calendar--view-item-inner'
+                }, renderDateLabel(item, item.label))
+              ])
             }))
-          })
+          }))
         ])
       ]
     }
@@ -887,38 +973,70 @@ export default defineVxeComponent({
       const dateListValue = computeDateListValue.value
       const matchFormat = 'yyyyMMdd'
       return [
-        h('table', {
-          class: `vxe-calendar--date-${datePanelType}-view`,
-          cellspacing: 0,
-          cellpadding: 0,
-          border: 0
+        h('div', {
+          class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
         }, [
-          h('tr', weekHeaders.map((item) => {
-            return h('td', {
-              class: 'vxe-calendar--view-th'
-            }, item.label)
-          })),
-          ...weekDates.map((rows) => {
+          h('div', {
+            class: 'vxe-calendar--view-header',
+            style: {
+              height: `${100 / (weekDates.length + 1)}%`
+            }
+          }, [
+            h('div', {
+              class: 'vxe-calendar--view-row'
+            }, weekHeaders.map((item, rIndex) => {
+              return h('div', {
+                class: 'vxe-calendar--view-item',
+                style: {
+                  width: `${rIndex ? 13 : 9}%`
+                }
+              }, [
+                h('div', {
+                  class: 'vxe-calendar--view-item-inner'
+                }, [
+                  h('div', {
+                    class: 'vxe-calendar--view-item-label'
+                  }, item.label)
+                ])
+              ])
+            }))
+          ]),
+          h('div', {
+            class: 'vxe-calendar--view-body'
+          }, weekDates.map((rows) => {
             const isSelected = multiple ? rows.some((item) => dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat))) : rows.some((item) => XEUtils.isDateSame(dateValue, item.date, matchFormat))
             const isHover = rows.some((item) => XEUtils.isDateSame(datePanelValue, item.date, matchFormat))
-            return h('tr', rows.map((item) => {
-              return h('td', {
-                class: ['vxe-calendar--view-td', {
+            const isNowWeek = rows.some(item => item.isNow)
+            return h('div', {
+              class: 'vxe-calendar--view-row',
+              style: {
+                height: `${100 / weekDates.length}%`
+              }
+            }, rows.map((item, rIndex) => {
+              return h('div', {
+                class: ['vxe-calendar--view-item', {
                   'is--prev': item.isPrev,
                   'is--current': item.isCurrent,
-                  'is--now': item.isNow,
+                  'is--now': rIndex ? item.isNow : isNowWeek,
                   'is--next': item.isNext,
                   'is--disabled': isDateDisabled(item),
                   'is--selected': isSelected,
                   'is--hover': isHover
                 }],
-                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle),
-                // event
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item)
-              }, renderDateLabel(item, item.label))
+                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                  width: `${rIndex ? 13 : 9}%`
+                }),
+                onClick: (evnt) => dateClickEvent(evnt, item),
+                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                onMouseenter: () => dateMouseenterEvent(item),
+                onMouseleave: dateMouseleaveEvent
+              }, [
+                h('div', {
+                  class: 'vxe-calendar--view-item-inner'
+                }, renderDateLabel(item, item.label))
+              ])
             }))
-          })
+          }))
         ])
       ]
     }
@@ -931,28 +1049,41 @@ export default defineVxeComponent({
       const dateListValue = computeDateListValue.value
       const matchFormat = 'yyyyMM'
       return [
-        h('table', {
-          class: `vxe-calendar--date-${datePanelType}-view`,
-          cellspacing: 0,
-          cellpadding: 0,
-          border: 0
+        h('div', {
+          class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
         }, [
-          h('tbody', monthDatas.map((rows) => {
-            return h('tr', rows.map((item) => {
-              return h('td', {
-                class: ['vxe-calendar--view-td', {
+          h('div', {
+            class: 'vxe-calendar--view-body'
+          }, monthDatas.map((rows) => {
+            return h('div', {
+              class: 'vxe-calendar--view-row',
+              style: {
+                height: `${100 / monthDatas.length}%`
+              }
+            }, rows.map((item) => {
+              const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat)
+              return h('div', {
+                class: ['vxe-calendar--view-item', {
                   'is--prev': item.isPrev,
                   'is--current': item.isCurrent,
                   'is--now': item.isNow,
                   'is--next': item.isNext,
                   'is--disabled': isDateDisabled(item),
-                  'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                  'is--selected': isSelected,
                   'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                 }],
-                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle),
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item)
-              }, renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`)))
+                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                  width: `${100 / rows.length}%`
+                }),
+                onClick: (evnt) => dateClickEvent(evnt, item),
+                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                onMouseenter: () => dateMouseenterEvent(item),
+                onMouseleave: dateMouseleaveEvent
+              }, [
+                h('div', {
+                  class: 'vxe-calendar--view-item-inner'
+                }, renderDateLabel(item, getI18n(`vxe.input.date.months.m${item.month}`)))
+              ])
             }))
           }))
         ])
@@ -967,28 +1098,41 @@ export default defineVxeComponent({
       const dateListValue = computeDateListValue.value
       const matchFormat = 'yyyyq'
       return [
-        h('table', {
-          class: `vxe-calendar--date-${datePanelType}-view`,
-          cellspacing: 0,
-          cellpadding: 0,
-          border: 0
+        h('div', {
+          class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
         }, [
-          h('tbody', quarterDatas.map((rows) => {
-            return h('tr', rows.map((item) => {
-              return h('td', {
-                class: ['vxe-calendar--view-td', {
+          h('div', {
+            class: 'vxe-calendar--view-body'
+          }, quarterDatas.map((rows) => {
+            return h('div', {
+              class: 'vxe-calendar--view-row',
+              style: {
+                height: `${100 / quarterDatas.length}%`
+              }
+            }, rows.map((item) => {
+              const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat)
+              return h('div', {
+                class: ['vxe-calendar--view-item', {
                   'is--prev': item.isPrev,
                   'is--current': item.isCurrent,
                   'is--now': item.isNow,
                   'is--next': item.isNext,
                   'is--disabled': isDateDisabled(item),
-                  'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                  'is--selected': isSelected,
                   'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                 }],
-                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle),
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item)
-              }, renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)))
+                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                  width: `${100 / rows.length}%`
+                }),
+                onClick: (evnt) => dateClickEvent(evnt, item),
+                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                onMouseenter: () => dateMouseenterEvent(item),
+                onMouseleave: dateMouseleaveEvent
+              }, [
+                h('div', {
+                  class: 'vxe-calendar--view-item-inner'
+                }, renderDateLabel(item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)))
+              ])
             }))
           }))
         ])
@@ -1003,28 +1147,41 @@ export default defineVxeComponent({
       const dateListValue = computeDateListValue.value
       const matchFormat = 'yyyy'
       return [
-        h('table', {
-          class: `vxe-calendar--date-${datePanelType}-view`,
-          cellspacing: 0,
-          cellpadding: 0,
-          border: 0
+        h('div', {
+          class: ['vxe-calendar--view-wrapper', `type--${datePanelType}`]
         }, [
-          h('tbody', yearDatas.map((rows) => {
-            return h('tr', rows.map((item) => {
-              return h('td', {
-                class: ['vxe-calendar--view-td', {
+          h('div', {
+            class: 'vxe-calendar--view-body'
+          }, yearDatas.map((rows) => {
+            return h('div', {
+              class: 'vxe-calendar--view-row',
+              style: {
+                height: `${100 / yearDatas.length}%`
+              }
+            }, rows.map((item) => {
+              const isSelected = multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat)
+              return h('div', {
+                class: ['vxe-calendar--view-item', {
                   'is--prev': item.isPrev,
                   'is--current': item.isCurrent,
                   'is--now': item.isNow,
                   'is--next': item.isNext,
                   'is--disabled': isDateDisabled(item),
-                  'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                  'is--selected': isSelected,
                   'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
                 }],
-                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle),
-                onClick: () => dateSelectEvent(item),
-                onMouseenter: () => dateMouseenterEvent(item)
-              }, renderDateLabel(item, item.year))
+                style: Object.assign({}, XEUtils.isFunction(cellStyle) ? cellStyle({ type: datePanelType, viewType: datePanelType, date: item.date, $calendar: $xeCalendar }) : cellStyle, {
+                  width: `${100 / rows.length}%`
+                }),
+                onClick: (evnt) => dateClickEvent(evnt, item),
+                onContextmenu: (evnt) => datContextmenuEvent(evnt, item),
+                onMouseenter: () => dateMouseenterEvent(item),
+                onMouseleave: dateMouseleaveEvent
+              }, [
+                h('div', {
+                  class: 'vxe-calendar--view-item-inner'
+                }, renderDateLabel(item, item.year))
+              ])
             }))
           }))
         ])
@@ -1176,6 +1333,11 @@ export default defineVxeComponent({
     })
 
     onMounted(() => {
+      const { menuConfig } = props
+      const VxeUIContextMenu = VxeUI.getComponent('VxeContextMenu')
+      if (menuConfig && !VxeUIContextMenu) {
+        errLog('vxe.error.reqComp', ['vxe-context-menu'])
+      }
       dateOpenPanel()
     })
 

package/packages/date-panel/src/date-panel.ts

@@ -1147,7 +1147,9 @@ export default defineVxeComponent({
             }]
           }, extraItem && extraItem.label
             ? [
-                h('div', `${label}`),
+                h('div', {
+                  class: 'vxe-date-panel--label--number'
+                }, `${label}`),
                 h('div', {
                   class: ['vxe-date-panel--label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
                   style: extraItem.style

package/packages/language/ar-EG.ts

@@ -333,6 +333,10 @@ export default {
         }
       }
     },
+    calendar: {
+      yearLabel: '{0} 年',
+      monthLabel: '{0} 月'
+    },
     numberInput: {
       currencySymbol: '$'
     },

package/packages/language/de-DE.ts

@@ -333,6 +333,10 @@ export default {
         }
       }
     },
+    calendar: {
+      yearLabel: '{0} 年',
+      monthLabel: '{0} 月'
+    },
     numberInput: {
       currencySymbol: '$'
     },

package/packages/language/en-US.ts

@@ -333,6 +333,10 @@ export default {
         }
       }
     },
+    calendar: {
+      yearLabel: '{0}',
+      monthLabel: '{0}'
+    },
     numberInput: {
       currencySymbol: '$'
     },

package/packages/language/es-ES.ts

@@ -333,6 +333,10 @@ export default {
         }
       }
     },
+    calendar: {
+      yearLabel: '{0} 年',
+      monthLabel: '{0} 月'
+    },
     numberInput: {
       currencySymbol: '$'
     },

package/packages/language/fr-FR.ts

@@ -333,6 +333,10 @@ export default {
         }
       }
     },
+    calendar: {
+      yearLabel: '{0} 年',
+      monthLabel: '{0} 月'
+    },
     numberInput: {
       currencySymbol: '$'
     },

package/packages/language/hu-HU.ts

@@ -333,6 +333,10 @@ export default {
         }
       }
     },
+    calendar: {
+      yearLabel: '{0} 年',
+      monthLabel: '{0} 月'
+    },
     numberInput: {
       currencySymbol: '$'
     },

package/packages/language/hy-AM.ts

@@ -333,6 +333,10 @@ export default {
         }
       }
     },
+    calendar: {
+      yearLabel: '{0} 年',
+      monthLabel: '{0} 月'
+    },
     numberInput: {
       currencySymbol: '$'
     },

package/packages/language/id-ID.ts

@@ -333,6 +333,10 @@ export default {
         }
       }
     },
+    calendar: {
+      yearLabel: '{0} 年',
+      monthLabel: '{0} 月'
+    },
     numberInput: {
       currencySymbol: '$'
     },

package/packages/language/it-IT.ts

@@ -333,6 +333,10 @@ export default {
         }
       }
     },
+    calendar: {
+      yearLabel: '{0} 年',
+      monthLabel: '{0} 月'
+    },
     numberInput: {
       currencySymbol: '$'
     },

package/packages/language/ja-JP.ts

@@ -333,6 +333,10 @@ export default {
         }
       }
     },
+    calendar: {
+      yearLabel: '{0} 年',
+      monthLabel: '{0} 月'
+    },
     numberInput: {
       currencySymbol: '$'
     },