Calendar 日历

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

何时使用

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

代码演示

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

<template>
  <f-calendar v-model:value="value" @panelChange="onPanelChange" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Dayjs } from 'dayjs';

export default defineComponent({
  setup() {
    const value = ref<Dayjs>();
    const onPanelChange = (value: Dayjs, mode: string) => {
      console.log(value, mode);
    };

    return {
      value,
      onPanelChange,
    };
  },
});
</script>

卡片模式
用于嵌套在空间有限的容器中。

<template>
  <div :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
    <f-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange" />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Dayjs } from 'dayjs';

export default defineComponent({
  setup() {
    const value = ref<Dayjs>();
    const onPanelChange = (value: Dayjs, mode: string) => {
      console.log(value, mode);
    };

    return {
      value,
      onPanelChange,
    };
  },
});
</script>

通知事项日历
一个复杂的应用示例，用 dateCellRender 和 monthCellRender 函数来自定义需要渲染的数据。

<template>
  <f-calendar v-model:value="value">
    <template #dateCellRender="{ current }">
      <ul class="events">
        <li v-for="item in getListData(current)" :key="item.content">
          <f-badge :status="item.type" :text="item.content" />
        </li>
      </ul>
    </template>
    <template #monthCellRender="{ current }">
      <div v-if="getMonthData(current)" class="notes-month">
        <section>{{ getMonthData(current) }}</section>
        <span>Backlog number</span>
      </div>
    </template>
  </f-calendar>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Dayjs } from 'dayjs';

export default defineComponent({
  setup() {
    const value = ref<Dayjs>();

    const getListData = (value: Dayjs) => {
      let listData;
      switch (value.date()) {
        case 8:
          listData = [
            { type: 'warning', content: 'This is warning event.' },
            { type: 'success', content: 'This is usual event.' },
          ];
          break;
        case 10:
          listData = [
            { type: 'warning', content: 'This is warning event.' },
            { type: 'success', content: 'This is usual event.' },
            { type: 'error', content: 'This is error event.' },
          ];
          break;
        case 15:
          listData = [
            { type: 'warning', content: 'This is warning event' },
            { type: 'success', content: 'This is very long usual event。。....' },
            { type: 'error', content: 'This is error event 1.' },
            { type: 'error', content: 'This is error event 2.' },
            { type: 'error', content: 'This is error event 3.' },
            { type: 'error', content: 'This is error event 4.' },
          ];
          break;
        default:
      }
      return listData || [];
    };

    const getMonthData = (value: Dayjs) => {
      if (value.month() === 8) {
        return 1394;
      }
    };

    return {
      value,
      getListData,
      getMonthData,
    };
  },
});
</script>
<style scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}
.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}
.notes-month {
  text-align: center;
  font-size: 28px;
}
.notes-month section {
  font-size: 28px;
}
</style>

自定义头部
自定义日历头部内容。

<template>
  <div style="width: 300px; border: 1px solid #d9d9d9; border-radius: 4px">
    <f-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange">
      <template #headerRender="{ value: current, type, onChange, onTypeChange }">
        <div style="padding: 10px">
          <div style="margin-bottom: 10px">Custom header</div>
          <f-row type="flex" justify="space-between">
            <f-col>
              <f-radio-group size="small" :value="type" @change="e => onTypeChange(e.target.value)">
                <f-radio-button value="month">Month</f-radio-button>
                <f-radio-button value="year">Year</f-radio-button>
              </f-radio-group>
            </f-col>
            <f-col>
              <f-select
                size="small"
                :dropdown-match-select-width="false"
                class="my-year-select"
                :value="String(current.year())"
                @change="
                  newYear => {
                    onChange(current.year(+newYear))
                  }
                "
              >
                <f-select-option v-for="val in getYears(current)" :key="String(val)" class="year-item">
                  {{ val }}
                </f-select-option>
              </f-select>
            </f-col>
            <f-col>
              <f-select
                size="small"
                :dropdown-match-select-width="false"
                :value="String(current.month())"
                @change="
                  selectedMonth => {
                    onChange(current.month(parseInt(String(selectedMonth), 10)))
                  }
                "
              >
                <f-select-option v-for="(val, index) in getMonths(current)" :key="String(index)" class="month-item">
                  {{ val }}
                </f-select-option>
              </f-select>
            </f-col>
          </f-row>
        </div>
      </template>
    </f-calendar>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { Dayjs } from 'dayjs'

export default defineComponent({
  setup() {
    const value = ref<Dayjs>()

    const onPanelChange = (value: Dayjs, mode: string) => {
      console.log(value, mode)
    }

    const getMonths = (value: Dayjs) => {
      const localeData = value.localeData()
      const months: any[] = []
      for (let i = 0; i < 12; i++) {
        months.push(localeData.monthsShort(value.month(i)))
      }
      return months
    }

    const getYears = (value: Dayjs) => {
      const year = value.year()
      const years: number[] = []
      for (let i = year - 10; i < year + 10; i += 1) {
        years.push(i)
      }
      return years
    }

    return {
      value,
      onPanelChange,
      getMonths,
      getYears,
    }
  },
})
</script>

<style>
.fs-picker-calendar td.fs-picker-cell-in-view {
  color: #333;
}
.fs-picker-calendar .fs-picker-cell {
  color: #bbbbbb;
}
</style>

API

**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 dayjs 的 locale。

参数	说明	类型	默认值
dateCellRender	作用域插槽，用来自定义渲染日期单元格，返回内容会被追加到单元格	v-slot:dateCellRender="{current: dayjs}"	无
dateFullCellRender	作用域插槽，自定义渲染日期单元格，返回内容覆盖单元格	v-slot:dateFullCellRender="{current: dayjs}"	无
disabledDate	不可选择的日期	(currentDate: dayjs) => boolean	无
fullscreen	是否全屏显示	boolean	true
headerRender	自定义头部内容	v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}"	--
locale	国际化配置	object	--
mode	初始模式，month/year	string	month
monthCellRender	作用域插槽，自定义渲染月单元格，返回内容会被追加到单元格	v-slot:monthCellRender="{current: dayjs}"	无
monthFullCellRender	作用域插槽，自定义渲染月单元格，返回内容覆盖单元格	v-slot:monthFullCellRender="{current: dayjs}"	无
validRange	设置可以显示的日期	[dayjs, dayjs]	无
value(v-model)	展示日期	dayjs	无
valueFormat	可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象	string，具体格式	--

事件

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