feat: udpate calendar

components/calendar/Constants.js

@@ -1 +0,0 @@
-export const PREFIX_CLS = 'ant-fullcalendar';

components/calendar/Header.jsx

@@ -1,8 +1,8 @@
-import { PREFIX_CLS } from './Constants';
 import Select from '../select';
 import { Group, Button } from '../radio';
 import PropTypes from '../_util/vue-types';
 import { initDefaultProps } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
 const Option = Select.Option;
 
 export const HeaderProps = {
@@ -20,15 +20,16 @@ export const HeaderProps = {
 
 export default {
   props: initDefaultProps(HeaderProps, {
-    prefixCls: `${PREFIX_CLS}-header`,
     yearSelectOffset: 10,
     yearSelectTotal: 20,
   }),
-
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   // private calenderHeaderNode: HTMLDivElement;
   methods: {
-    getYearSelectElement(year) {
+    getYearSelectElement(prefixCls, year) {
-      const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen, validRange } = this;
+      const { yearSelectOffset, yearSelectTotal, locale, fullscreen, validRange } = this;
       let start = year - yearSelectOffset;
       let end = start + yearSelectTotal;
       if (validRange) {
@@ -66,8 +67,8 @@ export default {
       return months;
     },
 
-    getMonthSelectElement(month, months) {
+    getMonthSelectElement(prefixCls, month, months) {
-      const { prefixCls, fullscreen, validRange, value } = this;
+      const { fullscreen, validRange, value } = this;
       const options = [];
       let start = 0;
       let end = 12;
@@ -76,7 +77,8 @@ export default {
         const currentYear = value.get('year');
         if (rangeEnd.get('year') === currentYear) {
           end = rangeEnd.get('month') + 1;
-        } else if (rangeStart.get('year') === currentYear) {
+        }
+        if (rangeStart.get('year') === currentYear) {
           start = rangeStart.get('month');
         }
       }
@@ -133,11 +135,14 @@ export default {
   },
 
   render() {
-    const { type, value, prefixCls, locale, fullscreen } = this;
+    const { prefixCls: customizePrefixCls,type, value, locale, fullscreen } = this;
-    const yearSelect = this.getYearSelectElement(value.year());
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls);
+
+    const yearSelect = this.getYearSelectElement(prefixCls, value.year());
     const monthSelect =
       type === 'date'
-        ? this.getMonthSelectElement(value.month(), this.getMonthsLocale(value))
+        ? this.getMonthSelectElement(prefixCls, value.month(), this.getMonthsLocale(value))
         : null;
     const size = fullscreen ? 'default' : 'small';
     const typeSwitch = (

components/calendar/index.jsx

@@ -4,9 +4,9 @@ import { getOptionProps, hasProp, initDefaultProps } from '../_util/props-util';
 import * as moment from 'moment';
 import FullCalendar from '../vc-calendar/src/FullCalendar';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import { PREFIX_CLS } from './Constants';
 import Header from './Header';
 import interopDefault from '../_util/interopDefault';
+import { ConfigConsumerProps } from '../config-provider';
 import enUS from './locale/en_US';
 
 export { HeaderProps } from './Header';
@@ -55,18 +55,21 @@ const Calendar = {
   props: initDefaultProps(CalendarProps(), {
     locale: {},
     fullscreen: true,
-    prefixCls: PREFIX_CLS,
     mode: 'month',
   }),
   model: {
     prop: 'value',
     event: 'change',
   },
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   data() {
     const value = this.value || this.defaultValue || interopDefault(moment)();
     if (!interopDefault(moment).isMoment(value)) {
       throw new Error('The value/defaultValue of Calendar must be a moment object, ');
     }
+    this._sPrefixCls = undefined;
     return {
       sValue: value,
       sMode: this.mode,
@@ -86,23 +89,23 @@ const Calendar = {
   },
   methods: {
     monthCellRender2(value) {
-      const { prefixCls, $scopedSlots } = this;
+      const { _sPrefixCls, $scopedSlots } = this;
       const monthCellRender = this.monthCellRender || $scopedSlots.monthCellRender || noop;
       return (
-        <div class={`${prefixCls}-month`}>
+        <div class={`${_sPrefixCls}-month`}>
-          <div class={`${prefixCls}-value`}>{value.localeData().monthsShort(value)}</div>
+          <div class={`${_sPrefixCls}-value`}>{value.localeData().monthsShort(value)}</div>
-          <div class={`${prefixCls}-content`}>{monthCellRender(value)}</div>
+          <div class={`${_sPrefixCls}-content`}>{monthCellRender(value)}</div>
         </div>
       );
     },
 
     dateCellRender2(value) {
-      const { prefixCls, $scopedSlots } = this;
+      const { _sPrefixCls, $scopedSlots } = this;
       const dateCellRender = this.dateCellRender || $scopedSlots.dateCellRender || noop;
       return (
-        <div class={`${prefixCls}-date`}>
+        <div class={`${_sPrefixCls}-date`}>
-          <div class={`${prefixCls}-value`}>{zerofixed(value.date())}</div>
+          <div class={`${_sPrefixCls}-value`}>{zerofixed(value.date())}</div>
-          <div class={`${prefixCls}-content`}>{dateCellRender(value)}</div>
+          <div class={`${_sPrefixCls}-content`}>{dateCellRender(value)}</div>
         </div>
       );
     },
@@ -164,9 +167,16 @@ const Calendar = {
       if (value && localeCode) {
         value.locale(localeCode);
       }
-      const { prefixCls, fullscreen, dateFullCellRender, monthFullCellRender } = props;
+      const { prefixCls: customizePrefixCls, fullscreen, dateFullCellRender, monthFullCellRender } = props;
+      const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+      const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls);
       const type = mode === 'year' ? 'month' : 'date';
 
+      // To support old version react.
+      // Have to add prefixCls on the instance.
+      // https://github.com/facebook/react/issues/12397
+      this._sPrefixCls = prefixCls;
+
       let cls = '';
       if (fullscreen) {
         cls += ` ${prefixCls}-fullscreen`;