Calendar 日历

按照日历形式展示数据的容器。

何时使用

当数据是日期或按照日期划分时,例如日程、课表、价格日历等,农历等。目前支持年/月切换。

代码演示

Calendar 日历 - 图1

基本

一个通用的日历面板,支持年/月切换。

  1. <template>
  2. <a-calendar @panelChange="onPanelChange" />
  3. </template>
  4. <script>
  5. export default {
  6. methods: {
  7. onPanelChange(value, mode) {
  8. console.log(value, mode);
  9. },
  10. },
  11. };
  12. </script>

Calendar 日历 - 图2

卡片模式

用于嵌套在空间有限的容器中。

  1. <template>
  2. <div :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
  3. <a-calendar :fullscreen="false" @panelChange="onPanelChange" />
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. methods: {
  9. onPanelChange(value, mode) {
  10. console.log(value, mode);
  11. },
  12. },
  13. };
  14. </script>

Calendar 日历 - 图3

通知事项日历

一个复杂的应用示例,用 dateCellRendermonthCellRender 函数来自定义需要渲染的数据。

  1. <template>
  2. <a-calendar>
  3. <ul class="events" slot="dateCellRender" slot-scope="value">
  4. <li v-for="item in getListData(value)" :key="item.content">
  5. <a-badge :status="item.type" :text="item.content" />
  6. </li>
  7. </ul>
  8. <template slot="monthCellRender" slot-scope="value">
  9. <div v-if="getMonthData(value)" class="notes-month">
  10. <section>{{getMonthData(value)}}</section>
  11. <span>Backlog number</span>
  12. </div>
  13. </template>
  14. </a-calendar>
  15. </template>
  16. <script>
  17. export default {
  18. methods: {
  19. getListData(value) {
  20. let listData;
  21. switch (value.date()) {
  22. case 8:
  23. listData = [
  24. { type: 'warning', content: 'This is warning event.' },
  25. { type: 'success', content: 'This is usual event.' },
  26. ];
  27. break;
  28. case 10:
  29. listData = [
  30. { type: 'warning', content: 'This is warning event.' },
  31. { type: 'success', content: 'This is usual event.' },
  32. { type: 'error', content: 'This is error event.' },
  33. ];
  34. break;
  35. case 15:
  36. listData = [
  37. { type: 'warning', content: 'This is warning event' },
  38. { type: 'success', content: 'This is very long usual event。。....' },
  39. { type: 'error', content: 'This is error event 1.' },
  40. { type: 'error', content: 'This is error event 2.' },
  41. { type: 'error', content: 'This is error event 3.' },
  42. { type: 'error', content: 'This is error event 4.' },
  43. ];
  44. break;
  45. default:
  46. }
  47. return listData || [];
  48. },
  49. getMonthData(value) {
  50. if (value.month() === 8) {
  51. return 1394;
  52. }
  53. },
  54. },
  55. };
  56. </script>
  57. <style scoped>
  58. .events {
  59. list-style: none;
  60. margin: 0;
  61. padding: 0;
  62. }
  63. .events .ant-badge-status {
  64. overflow: hidden;
  65. white-space: nowrap;
  66. width: 100%;
  67. text-overflow: ellipsis;
  68. font-size: 12px;
  69. }
  70. .notes-month {
  71. text-align: center;
  72. font-size: 28px;
  73. }
  74. .notes-month section {
  75. font-size: 28px;
  76. }
  77. </style>

Calendar 日历 - 图4

选择功能

一个通用的日历面板,支持年/月切换。

<template>
  <div>
    <a-alert
      :message="`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`"
    />
    <div
      :style="{ display: 'inline-block', width: '500px', border: '1px solid #d9d9d9', borderRadius: '4px' }"
    >
      <a-calendar :value="value" @select="onSelect" @panelChange="onPanelChange" />
    </div>
    <div
      :style="{ display: 'inline-block', width: '500px',marginLeft: '20px', border: '1px solid #d9d9d9', borderRadius: '4px' }"
    >
      <a-calendar v-model="value1" />
    </div>
  </div>
</template>
<script>
  import moment from 'moment';
  export default {
    data() {
      return {
        value: moment('2017-01-25'),
        selectedValue: moment('2017-01-25'),
        value1: moment('2017-01-25'),
      };
    },
    methods: {
      onSelect(value) {
        this.value = value;
        this.selectedValue = value;
      },
      onPanelChange(value) {
        this.value = value;
      },
    },
  };
</script>

API

注意:Calendar 部分 locale 是从 value 中读取,所以请先正确设置 moment 的 locale。

// 默认语言为 en-US,所以如果需要使用其他语言,推荐在入口文件全局设置 locale // import moment from
'moment'; // import 'moment/locale/zh-cn'; // moment.locale('zh-cn');

<a-calendar @panelChange="onPanelChange" @select="onSelect">
  <template slot="dateCellRender" slot-scope="value"></template>
  <template slot="monthCellRender" slot-scope="value"></template>
</a-calendar>
参数说明类型默认值
dateCellRender作用域插槽,用来自定义渲染日期单元格,返回内容会被追加到单元格,function(date: moment)
dateFullCellRender作用域插槽,自定义渲染日期单元格,返回内容覆盖单元格function(date: moment)
defaultValue默认展示的日期moment默认日期
disabledDate不可选择的日期(currentDate: moment) => boolean
fullscreen是否全屏显示booleantrue
locale国际化配置object默认配置
mode初始模式,month/yearstringmonth
monthCellRender作用域插槽,自定义渲染月单元格,返回内容会被追加到单元格function(date: moment)
monthFullCellRender作用域插槽,自定义渲染月单元格,返回内容覆盖单元格function(date: moment)
validRange设置可以显示的日期[moment, moment]
value(v-model)展示日期moment当前日期

事件

事件名称说明回调参数
panelChange日期面板变化回调function(date: moment, mode: string)
select点击选择日期回调function(date: moment)
change日期变化时的回调, 面板变化有可能导致日期变化function(date: moment)