2020-10-13 11:02:03 +00:00
|
|
|
import { App, defineComponent, inject, PropType } from 'vue';
|
2019-01-12 03:33:27 +00:00
|
|
|
import PropTypes from '../_util/vue-types';
|
|
|
|
import BaseMixin from '../_util/BaseMixin';
|
2020-10-13 11:02:03 +00:00
|
|
|
import { getOptionProps, hasProp } from '../_util/props-util';
|
2020-08-31 14:25:47 +00:00
|
|
|
import moment from 'moment';
|
2019-01-12 03:33:27 +00:00
|
|
|
import FullCalendar from '../vc-calendar/src/FullCalendar';
|
|
|
|
import Header from './Header';
|
2020-03-07 11:45:13 +00:00
|
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver';
|
2019-01-12 03:33:27 +00:00
|
|
|
import interopDefault from '../_util/interopDefault';
|
2020-09-30 02:47:18 +00:00
|
|
|
import { defaultConfigProvider } from '../config-provider';
|
2019-01-12 03:33:27 +00:00
|
|
|
import enUS from './locale/en_US';
|
2020-04-29 10:44:11 +00:00
|
|
|
import { checkValidate, stringToMoment, momentToString, TimeType } from '../_util/moment-util';
|
2020-10-13 11:02:03 +00:00
|
|
|
import { tuple } from '../_util/type';
|
2019-01-12 03:33:27 +00:00
|
|
|
|
|
|
|
function noop() {
|
|
|
|
return null;
|
|
|
|
}
|
2018-03-19 02:16:27 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
function zerofixed(v) {
|
2018-03-13 14:40:13 +00:00
|
|
|
if (v < 10) {
|
2019-01-12 03:33:27 +00:00
|
|
|
return `0${v}`;
|
2018-03-13 14:40:13 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
return `${v}`;
|
2018-03-13 14:40:13 +00:00
|
|
|
}
|
|
|
|
|
2020-10-13 11:02:03 +00:00
|
|
|
const CalendarModeTypes = tuple('month', 'year');
|
|
|
|
export type CalendarMode = typeof CalendarModeTypes[number];
|
|
|
|
|
|
|
|
export const CalendarProps = {
|
2020-07-22 07:33:57 +00:00
|
|
|
monthCellRender: PropTypes.func,
|
|
|
|
dateCellRender: PropTypes.func,
|
|
|
|
monthFullCellRender: PropTypes.func,
|
|
|
|
dateFullCellRender: PropTypes.func,
|
2018-03-13 14:40:13 +00:00
|
|
|
prefixCls: PropTypes.string,
|
2020-04-29 10:44:11 +00:00
|
|
|
value: TimeType,
|
|
|
|
defaultValue: TimeType,
|
2020-10-13 11:02:03 +00:00
|
|
|
mode: PropTypes.oneOf(CalendarModeTypes),
|
|
|
|
fullscreen: PropTypes.looseBool.def(true),
|
|
|
|
locale: PropTypes.object.def({}),
|
2018-03-13 14:40:13 +00:00
|
|
|
disabledDate: PropTypes.func,
|
2020-10-13 11:02:03 +00:00
|
|
|
validRange: {
|
|
|
|
type: Array as PropType<moment.Moment[]>,
|
|
|
|
},
|
2020-03-07 11:45:13 +00:00
|
|
|
headerRender: PropTypes.func,
|
2020-04-29 10:44:11 +00:00
|
|
|
valueFormat: PropTypes.string,
|
2020-07-22 07:33:57 +00:00
|
|
|
onPanelChange: PropTypes.func,
|
|
|
|
onSelect: PropTypes.func,
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
'onUpdate:value': PropTypes.func,
|
2020-10-13 11:02:03 +00:00
|
|
|
};
|
2018-03-13 14:40:13 +00:00
|
|
|
|
2020-10-13 11:02:03 +00:00
|
|
|
const Calendar = defineComponent({
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'ACalendar',
|
2020-07-22 07:33:57 +00:00
|
|
|
inheritAttrs: false,
|
2018-03-13 14:40:13 +00:00
|
|
|
mixins: [BaseMixin],
|
2020-10-13 11:02:03 +00:00
|
|
|
props: CalendarProps,
|
2020-07-22 07:33:57 +00:00
|
|
|
setup() {
|
|
|
|
return {
|
2020-09-30 02:47:18 +00:00
|
|
|
configProvider: inject('configProvider', defaultConfigProvider),
|
2020-10-13 11:02:03 +00:00
|
|
|
sPrefixCls: undefined
|
2020-07-22 07:33:57 +00:00
|
|
|
};
|
2019-03-13 05:34:40 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
data() {
|
2020-04-29 10:44:11 +00:00
|
|
|
const { value, defaultValue, valueFormat } = this;
|
|
|
|
const sValue = value || defaultValue || interopDefault(moment)();
|
|
|
|
checkValidate('Calendar', defaultValue, 'defaultValue', valueFormat);
|
|
|
|
checkValidate('Calendar', value, 'value', valueFormat);
|
2018-03-13 14:40:13 +00:00
|
|
|
return {
|
2020-04-29 10:44:11 +00:00
|
|
|
sValue: stringToMoment(sValue, valueFormat),
|
2020-03-07 11:45:13 +00:00
|
|
|
sMode: this.mode || 'month',
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-03-13 14:40:13 +00:00
|
|
|
},
|
|
|
|
watch: {
|
2019-01-12 03:33:27 +00:00
|
|
|
value(val) {
|
2020-04-29 10:44:11 +00:00
|
|
|
checkValidate('Calendar', val, 'value', this.valueFormat);
|
2018-03-13 14:40:13 +00:00
|
|
|
this.setState({
|
2020-04-29 10:44:11 +00:00
|
|
|
sValue: stringToMoment(val, this.valueFormat),
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-03-13 14:40:13 +00:00
|
|
|
},
|
2019-01-12 03:33:27 +00:00
|
|
|
mode(val) {
|
2018-03-13 14:40:13 +00:00
|
|
|
this.setState({
|
|
|
|
sMode: val,
|
2019-01-12 03:33:27 +00:00
|
|
|
});
|
2018-03-13 14:40:13 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
2020-10-13 11:02:03 +00:00
|
|
|
onHeaderValueChange(value: moment.Moment) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.setValue(value, 'changePanel');
|
2018-03-13 14:40:13 +00:00
|
|
|
},
|
2020-10-13 11:02:03 +00:00
|
|
|
onHeaderTypeChange(mode: CalendarMode) {
|
2020-03-07 11:45:13 +00:00
|
|
|
this.sMode = mode;
|
2020-07-22 07:33:57 +00:00
|
|
|
this.triggerPanelChange(this.sValue, mode);
|
2018-03-13 14:40:13 +00:00
|
|
|
},
|
2020-10-13 11:02:03 +00:00
|
|
|
triggerPanelChange(value: moment.Moment, mode: CalendarMode | undefined) {
|
2020-04-29 10:44:11 +00:00
|
|
|
const val = this.valueFormat ? momentToString(value, this.valueFormat) : value;
|
|
|
|
this.$emit('panelChange', val, mode);
|
2018-03-14 14:00:43 +00:00
|
|
|
if (value !== this.sValue) {
|
2020-07-22 07:33:57 +00:00
|
|
|
this.$emit('update:value', val);
|
2020-04-29 10:44:11 +00:00
|
|
|
this.$emit('change', val);
|
2018-03-14 14:00:43 +00:00
|
|
|
}
|
2018-03-13 14:40:13 +00:00
|
|
|
},
|
|
|
|
|
2020-10-13 11:02:03 +00:00
|
|
|
triggerSelect(value: moment.Moment) {
|
2019-01-12 03:33:27 +00:00
|
|
|
this.setValue(value, 'select');
|
2018-03-13 14:40:13 +00:00
|
|
|
},
|
2020-10-13 11:02:03 +00:00
|
|
|
setValue(value: moment.Moment, way: 'select' | 'changePanel') {
|
2020-04-29 10:44:11 +00:00
|
|
|
const prevValue = this.value ? stringToMoment(this.value, this.valueFormat) : this.sValue;
|
|
|
|
const { sMode: mode, valueFormat } = this;
|
2020-03-07 11:45:13 +00:00
|
|
|
if (!hasProp(this, 'value')) {
|
|
|
|
this.setState({ sValue: value });
|
|
|
|
}
|
|
|
|
if (way === 'select') {
|
2020-07-27 08:04:37 +00:00
|
|
|
const val = valueFormat ? momentToString(value, valueFormat) : value;
|
2020-03-07 11:45:13 +00:00
|
|
|
if (prevValue && prevValue.month() !== value.month()) {
|
2020-07-22 07:33:57 +00:00
|
|
|
this.triggerPanelChange(value, mode);
|
2020-07-27 08:04:37 +00:00
|
|
|
} else {
|
|
|
|
this.$emit('update:value', val);
|
2020-03-07 11:45:13 +00:00
|
|
|
}
|
2020-07-27 08:04:37 +00:00
|
|
|
this.$emit('select', val);
|
2020-03-07 11:45:13 +00:00
|
|
|
} else if (way === 'changePanel') {
|
2020-07-22 07:33:57 +00:00
|
|
|
this.triggerPanelChange(value, mode);
|
2020-03-07 11:45:13 +00:00
|
|
|
}
|
|
|
|
},
|
2020-10-13 11:02:03 +00:00
|
|
|
getDateRange(
|
|
|
|
validRange: [moment.Moment, moment.Moment],
|
|
|
|
disabledDate?: (current: moment.Moment) => boolean,
|
|
|
|
) {
|
|
|
|
return (current: moment.Moment) => {
|
2018-04-06 12:56:19 +00:00
|
|
|
if (!current) {
|
2019-01-12 03:33:27 +00:00
|
|
|
return false;
|
2018-04-06 12:56:19 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
const [startDate, endDate] = validRange;
|
|
|
|
const inRange = !current.isBetween(startDate, endDate, 'days', '[]');
|
2018-04-06 12:56:19 +00:00
|
|
|
if (disabledDate) {
|
2019-01-12 03:33:27 +00:00
|
|
|
return disabledDate(current) || inRange;
|
2018-04-06 12:56:19 +00:00
|
|
|
}
|
2019-01-12 03:33:27 +00:00
|
|
|
return inRange;
|
|
|
|
};
|
2018-04-06 12:56:19 +00:00
|
|
|
},
|
2019-09-10 10:57:08 +00:00
|
|
|
getDefaultLocale() {
|
|
|
|
const result = {
|
|
|
|
...enUS,
|
|
|
|
...this.$props.locale,
|
|
|
|
};
|
|
|
|
result.lang = {
|
|
|
|
...result.lang,
|
|
|
|
...(this.$props.locale || {}).lang,
|
|
|
|
};
|
|
|
|
return result;
|
|
|
|
},
|
2020-07-23 07:15:38 +00:00
|
|
|
monthCellRender2({ current: value }) {
|
2020-10-13 11:02:03 +00:00
|
|
|
const { sPrefixCls, $slots } = this;
|
|
|
|
const monthCellRender: Function = this.monthCellRender || $slots.monthCellRender || noop;
|
2020-03-07 11:45:13 +00:00
|
|
|
return (
|
2020-10-13 11:02:03 +00:00
|
|
|
<div class={`${sPrefixCls}-month`}>
|
|
|
|
<div class={`${sPrefixCls}-value`}>{value.localeData().monthsShort(value)}</div>
|
|
|
|
<div class={`${sPrefixCls}-content`}>{monthCellRender({ current: value })}</div>
|
2020-03-07 11:45:13 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2020-07-23 07:15:38 +00:00
|
|
|
dateCellRender2({ current: value }) {
|
2020-10-13 11:02:03 +00:00
|
|
|
const { sPrefixCls, $slots } = this;
|
|
|
|
const dateCellRender: Function = this.dateCellRender || $slots.dateCellRender || noop;
|
2020-03-07 11:45:13 +00:00
|
|
|
return (
|
2020-10-13 11:02:03 +00:00
|
|
|
<div class={`${sPrefixCls}-date`}>
|
|
|
|
<div class={`${sPrefixCls}-value`}>{zerofixed(value.date())}</div>
|
|
|
|
<div class={`${sPrefixCls}-content`}>{dateCellRender({ current: value })}</div>
|
2020-03-07 11:45:13 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
|
2020-10-13 11:02:03 +00:00
|
|
|
renderCalendar(locale: any, localeCode: string) {
|
|
|
|
const props: any = { ...getOptionProps(this), ...this.$attrs };
|
2020-07-22 07:33:57 +00:00
|
|
|
const { sValue: value, sMode: mode, $slots } = this;
|
2018-03-13 14:40:13 +00:00
|
|
|
if (value && localeCode) {
|
2019-01-12 03:33:27 +00:00
|
|
|
value.locale(localeCode);
|
2018-03-13 14:40:13 +00:00
|
|
|
}
|
2019-05-28 03:37:38 +00:00
|
|
|
const {
|
|
|
|
prefixCls: customizePrefixCls,
|
|
|
|
fullscreen,
|
|
|
|
dateFullCellRender,
|
|
|
|
monthFullCellRender,
|
2020-07-22 07:33:57 +00:00
|
|
|
class: className,
|
|
|
|
style,
|
2019-05-28 03:37:38 +00:00
|
|
|
} = props;
|
2020-07-22 07:33:57 +00:00
|
|
|
const headerRender = this.headerRender || $slots.headerRender;
|
2019-09-11 14:35:25 +00:00
|
|
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
2019-03-13 05:34:40 +00:00
|
|
|
const prefixCls = getPrefixCls('fullcalendar', customizePrefixCls);
|
2018-03-13 14:40:13 +00:00
|
|
|
|
2019-03-13 05:34:40 +00:00
|
|
|
// To support old version react.
|
|
|
|
// Have to add prefixCls on the instance.
|
|
|
|
// https://github.com/facebook/react/issues/12397
|
2020-10-13 11:02:03 +00:00
|
|
|
this.sPrefixCls = prefixCls;
|
2019-03-13 05:34:40 +00:00
|
|
|
|
2020-07-22 07:33:57 +00:00
|
|
|
let cls = className || '';
|
2018-03-13 14:40:13 +00:00
|
|
|
if (fullscreen) {
|
2019-01-12 03:33:27 +00:00
|
|
|
cls += ` ${prefixCls}-fullscreen`;
|
2018-03-13 14:40:13 +00:00
|
|
|
}
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
const monthCellRender =
|
2020-07-22 07:33:57 +00:00
|
|
|
monthFullCellRender || $slots.monthFullCellRender || this.monthCellRender2;
|
2019-01-12 03:33:27 +00:00
|
|
|
const dateCellRender =
|
2020-07-22 07:33:57 +00:00
|
|
|
dateFullCellRender || $slots.dateFullCellRender || this.dateCellRender2;
|
2018-04-06 12:56:19 +00:00
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
let disabledDate = props.disabledDate;
|
2018-04-06 12:56:19 +00:00
|
|
|
|
|
|
|
if (props.validRange) {
|
2019-01-12 03:33:27 +00:00
|
|
|
disabledDate = this.getDateRange(props.validRange, disabledDate);
|
2018-04-06 12:56:19 +00:00
|
|
|
}
|
2018-03-13 14:40:13 +00:00
|
|
|
const fullCalendarProps = {
|
2020-07-22 07:33:57 +00:00
|
|
|
...props,
|
|
|
|
...this.$attrs,
|
|
|
|
Select: {},
|
|
|
|
locale: locale.lang,
|
|
|
|
type: mode === 'year' ? 'month' : 'date',
|
|
|
|
prefixCls,
|
|
|
|
showHeader: false,
|
|
|
|
value,
|
|
|
|
monthCellRender,
|
|
|
|
dateCellRender,
|
|
|
|
disabledDate,
|
|
|
|
onSelect: this.triggerSelect,
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2018-03-13 14:40:13 +00:00
|
|
|
return (
|
2020-07-22 07:33:57 +00:00
|
|
|
<div class={cls} style={style}>
|
2018-03-13 14:40:13 +00:00
|
|
|
<Header
|
|
|
|
fullscreen={fullscreen}
|
2020-03-07 11:45:13 +00:00
|
|
|
type={mode}
|
|
|
|
headerRender={headerRender}
|
2018-03-13 14:40:13 +00:00
|
|
|
value={value}
|
|
|
|
locale={locale.lang}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
onTypeChange={this.onHeaderTypeChange}
|
|
|
|
onValueChange={this.onHeaderValueChange}
|
2018-04-06 12:56:19 +00:00
|
|
|
validRange={props.validRange}
|
2018-03-13 14:40:13 +00:00
|
|
|
/>
|
2019-01-12 03:33:27 +00:00
|
|
|
<FullCalendar {...fullCalendarProps} />
|
2018-03-13 14:40:13 +00:00
|
|
|
</div>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-03-13 14:40:13 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
2019-01-12 03:33:27 +00:00
|
|
|
render() {
|
2018-03-13 14:40:13 +00:00
|
|
|
return (
|
|
|
|
<LocaleReceiver
|
2019-01-12 03:33:27 +00:00
|
|
|
componentName="Calendar"
|
2018-11-28 13:58:42 +00:00
|
|
|
defaultLocale={this.getDefaultLocale}
|
2020-07-22 07:33:57 +00:00
|
|
|
children={this.renderCalendar}
|
2018-03-13 14:40:13 +00:00
|
|
|
/>
|
2019-01-12 03:33:27 +00:00
|
|
|
);
|
2018-03-13 14:40:13 +00:00
|
|
|
},
|
2020-10-13 11:02:03 +00:00
|
|
|
});
|
2018-03-19 02:16:27 +00:00
|
|
|
|
2018-09-19 05:21:57 +00:00
|
|
|
/* istanbul ignore next */
|
2020-10-13 11:02:03 +00:00
|
|
|
Calendar.install = function(app: App) {
|
2020-07-21 14:29:54 +00:00
|
|
|
app.component(Calendar.name, Calendar);
|
2020-10-13 11:14:56 +00:00
|
|
|
return app;
|
2019-01-12 03:33:27 +00:00
|
|
|
};
|
2019-08-28 02:50:19 +00:00
|
|
|
export { HeaderProps } from './Header';
|
2019-01-12 03:33:27 +00:00
|
|
|
export default Calendar;
|