ant-design-vue/components/vc-calendar/demo/full-calendar.vue

76 lines
1.7 KiB
Vue

<script>
/* eslint react/no-multi-comp:0, no-console:0 */
import '../assets/index.less';
import zhCN from '../src/locale/zh_CN';
import enUS from '../src/locale/en_US';
import '../../vc-time-picker/assets/index.less';
import BaseMixin from '@/components/_util/BaseMixin';
import FullCalendar from '@/components/vc-calendar/src/FullCalendar';
import '@/components/vc-select/assets/index.less';
import Select from '@/components/vc-select';
import moment from 'moment';
import 'moment/locale/zh-cn';
import 'moment/locale/en-gb';
const format = 'YYYY-MM-DD';
const cn = window.location.search.indexOf('cn') !== -1;
const now = moment();
if (cn) {
now.locale('zh-cn').utcOffset(8);
} else {
now.locale('en-gb').utcOffset(0);
}
const defaultCalendarValue = now.clone();
defaultCalendarValue.add(-1, 'month');
function onSelect (value) {
console.log('select', value.format(format));
}
export default {
mixins: [BaseMixin],
data () {
return {
type: 'month',
};
},
methods: {
onTypeChange (type) {
this.setState({
type,
});
},
},
render () {
return (
<div style={{ zIndex: 1000, position: 'relative' }}>
<FullCalendar
style={{ margin: '10px' }}
Select={Select}
fullscreen={false}
onSelect={onSelect}
defaultValue={now}
locale={cn ? zhCN : enUS}
/>
<FullCalendar
style={{ margin: '10px' }}
Select={Select}
fullscreen
defaultValue={now}
onSelect={onSelect}
type={this.type}
onTypeChange={this.onTypeChange}
locale={cn ? zhCN : enUS}
/>
</div>
);
},
};
</script>