154 lines
3.7 KiB
Vue
154 lines
3.7 KiB
Vue
|
|
import PropTypes from '../../_util/vue-types'
|
|
import BaseMixin from '../../_util/BaseMixin'
|
|
import { getOptionProps, hasProp } from '../../_util/props-util'
|
|
import DateTable from './date/DateTable'
|
|
import MonthTable from './month/MonthTable'
|
|
import CalendarMixin from './mixin/CalendarMixin'
|
|
import CommonMixin from './mixin/CommonMixin'
|
|
import CalendarHeader from './full-calendar/CalendarHeader'
|
|
import enUs from './locale/en_US'
|
|
const FullCalendar = {
|
|
props: {
|
|
locale: PropTypes.object.def(enUs),
|
|
format: PropTypes.string,
|
|
visible: PropTypes.bool.def(true),
|
|
prefixCls: PropTypes.string.def('rc-calendar'),
|
|
defaultType: PropTypes.string.def('date'),
|
|
type: PropTypes.string,
|
|
// locale: PropTypes.object,
|
|
// onTypeChange: PropTypes.func,
|
|
fullscreen: PropTypes.bool.def(false),
|
|
monthCellRender: PropTypes.func,
|
|
dateCellRender: PropTypes.func,
|
|
showTypeSwitch: PropTypes.bool.def(true),
|
|
Select: PropTypes.object.isRequired,
|
|
headerComponents: PropTypes.array,
|
|
headerComponent: PropTypes.object, // The whole header component
|
|
headerRender: PropTypes.func,
|
|
showHeader: PropTypes.bool.def(true),
|
|
disabledDate: PropTypes.func,
|
|
renderFooter: PropTypes.func.def(() => null),
|
|
renderSidebar: PropTypes.func.def(() => null),
|
|
},
|
|
mixins: [BaseMixin, CommonMixin, CalendarMixin],
|
|
data () {
|
|
let type
|
|
if (hasProp(this, 'type')) {
|
|
type = this.type
|
|
} else {
|
|
type = this.defaultType
|
|
}
|
|
return {
|
|
sType: type,
|
|
}
|
|
},
|
|
watch: {
|
|
type (val) {
|
|
this.setState({
|
|
sType: val,
|
|
})
|
|
},
|
|
},
|
|
methods: {
|
|
onMonthSelect (value) {
|
|
this.onSelect(value, {
|
|
target: 'month',
|
|
})
|
|
},
|
|
setType (type) {
|
|
if (!hasProp(this, 'type')) {
|
|
this.setState({
|
|
sType: type,
|
|
})
|
|
}
|
|
this.__emit('typeChange', type)
|
|
},
|
|
},
|
|
|
|
render () {
|
|
const props = getOptionProps(this)
|
|
const {
|
|
locale,
|
|
prefixCls,
|
|
fullscreen,
|
|
showHeader,
|
|
headerComponent,
|
|
headerRender,
|
|
disabledDate,
|
|
} = props
|
|
const { sValue: value, sType: type, $listeners } = this
|
|
|
|
let header = null
|
|
if (showHeader) {
|
|
if (headerRender) {
|
|
header = headerRender(value, type, locale)
|
|
} else {
|
|
const TheHeader = headerComponent || CalendarHeader
|
|
const headerProps = {
|
|
props: {
|
|
...props,
|
|
prefixCls: `${prefixCls}-full`,
|
|
type,
|
|
value,
|
|
},
|
|
on: {
|
|
...$listeners,
|
|
typeChange: this.setType,
|
|
valueChange: this.setValue,
|
|
},
|
|
key: 'calendar-header',
|
|
}
|
|
header = (
|
|
<TheHeader
|
|
{...headerProps}
|
|
/>
|
|
)
|
|
}
|
|
}
|
|
|
|
const table = type === 'date' ? (
|
|
<DateTable
|
|
dateRender={props.dateCellRender}
|
|
contentRender={props.dateCellContentRender}
|
|
locale={locale}
|
|
prefixCls={prefixCls}
|
|
onSelect={this.onSelect}
|
|
value={value}
|
|
disabledDate={disabledDate}
|
|
/>
|
|
) : (
|
|
<MonthTable
|
|
cellRender={props.monthCellRender}
|
|
contentRender={props.monthCellContentRender}
|
|
locale={locale}
|
|
onSelect={this.onMonthSelect}
|
|
prefixCls={`${prefixCls}-month-panel`}
|
|
value={value}
|
|
disabledDate={disabledDate}
|
|
/>
|
|
)
|
|
|
|
const children = [
|
|
header,
|
|
(<div key='calendar-body' class={`${prefixCls}-calendar-body`}>
|
|
{ table }
|
|
</div>),
|
|
]
|
|
|
|
const className = [`${prefixCls}-full`]
|
|
|
|
if (fullscreen) {
|
|
className.push(`${prefixCls}-fullscreen`)
|
|
}
|
|
|
|
return this.renderRoot({
|
|
children,
|
|
class: className.join(' '),
|
|
})
|
|
},
|
|
}
|
|
|
|
export default FullCalendar
|
|
|