ant-design-vue/components/vc-calendar/demo/full-calendar.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>