Calendar 日历

基础用法

使用v-model双向绑定数据，firstDay 表示以星期几为开头，onChange返回当前变化的日历数据。

以星期日开头

2024年1月28日

←

1月

→

日	一	二	三	四	五	六
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3
4	5	6	7	8	9	10

以星期一开头

2024年1月28日

←

1月

→

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31	1	2	3	4
5	6	7	8	9	10	11

<template>
  <div>
    <p>以星期日开头</p>
    <Calendar v-model="value" :first-day="0" :options="options" @on-change="onChange" />
    <br />
    <br />
    <p>以星期一开头</p>
    <Calendar v-model="value2" :first-day="1" :options="options" @on-change="onChange" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Calendar from '@com/Calendar/Calendar.vue'
const value = ref(new Date())
const value2 = ref(new Date())

const options = {
  width: '100%',
  height: '680px'
}

const onChange = (val: { date: Date; type: string }) => {
  console.log(val)
}
</script>

插槽自定义日历数据

具名插槽为date-cell,可以获取每个日期的数据

2024年1月28日

←

1月

→

日	一	二	三	四	五	六
12-31	01-01	01-02	01-03	01-04	01-05	01-06
01-07	01-08	01-09	01-10	01-11	01-12	01-13
01-14	01-15	01-16	01-17	01-18	01-19	01-20
01-21	01-22	01-23	01-24	01-25	01-26	01-27
01-28 😁	01-29	01-30	01-31	02-01	02-02	02-03
02-04	02-05	02-06	02-07	02-08	02-09	02-10

<template>
  <Calendar :first-day="0" :options="options">
    <template #date-cell="{ data }">
      <p :class="data.isSelected ? 'is-selected' : ''">
        {{ data.day.split('-').slice(1).join('-') }}
        {{ data.isSelected ? '😁' : '' }}
      </p>
    </template>
  </Calendar>
</template>
<script setup lang="ts">
import Calendar from '@com/Calendar/Calendar.vue'
const options = {
  height: '680px'
}
</script>

Calendar API

属性

属性名	说明	类型	可选值	默认值
v-model	选中项绑定值	Date	---	当前 Date
firstDay	以星期几开头，0~6 分别表示星期日、一、二、三、四、五、六	number	0,1,2,3,4,5,6	0
options	配置项(详细请看 options 属性)	object	-----------	---------

options 属性

属性名	说明	类型	可选值	默认值
width	日历的宽度	string	---	100%
height	日历的高度	string	---	100%

具名插槽

名称	说明	类型	默认
date-cell	type 表示该日期的所属月份，可选值有 prev-month、current-month 和 next-month；isSelected 标明该日期是否被选中；day 是格式化的日期，格式为 yyyy-MM-dd；date 是单元格的日期	Object	当前 Date

Events

方法名	说明	参数
onChange	type表示动作类型，selectDate选中日期，pre-month、next-month分别为上个月和上个月;date为变化后返回的日期	Object