github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: udpate calendar

pull/666/head
wangxueliang 2019-03-13 13:34:40 +08:00
parent 9b5082fee9
commit 5f09422d87
3 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/calendar/Constants.js
View File

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

27
components/calendar/Header.jsx
View File

@ -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) {
const { yearSelectOffset, yearSelectTotal, locale, prefixCls, fullscreen, validRange } = this;
getYearSelectElement(prefixCls, year) {
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) {
const { prefixCls, fullscreen, validRange, value } = this;
getMonthSelectElement(prefixCls, month, months) {
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 yearSelect = this.getYearSelectElement(value.year());
const { prefixCls: customizePrefixCls,type, value, locale, fullscreen } = this;
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 = (

32
components/calendar/index.jsx
View File

@ -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={`${prefixCls}-value`}>{value.localeData().monthsShort(value)}</div>
<div class={`${prefixCls}-content`}>{monthCellRender(value)}</div>
<div class={`${_sPrefixCls}-month`}>
<div class={`${_sPrefixCls}-value`}>{value.localeData().monthsShort(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={`${prefixCls}-value`}>{zerofixed(value.date())}</div>
<div class={`${prefixCls}-content`}>{dateCellRender(value)}</div>
<div class={`${_sPrefixCls}-date`}>
<div class={`${_sPrefixCls}-value`}>{zerofixed(value.date())}</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`;