引入组件

局部引入

// parent.vue
const FCalendar = defineAsyncComponent(() => import('@/components/formaui/f-calendar/f-calendar.vue'))

基础用法

弹层模式：通过 ref 调用 show() 打开日历

<f-calendar ref="calendarRef" is-fixed :mode="mode" :is-lunar="isLunar" @change="onChange" />
<f-button @click="calendarRef?.show()">选择单个日期</f-button>

import { ref } from 'vue'

const calendarRef = ref<{ show: () => void } | null>(null)
const mode = ref<1 | 2>(1)
const isLunar = ref(true)
const result = ref('')
const lunarResult = ref('')

const onChange = (detail: {
  result?: string
  week?: string
  startDate?: string
  endDate?: string
  lunar?: any
  startLunar?: any
  endLunar?: any
}) => {
  if (mode.value === 1 && detail.result) {
    result.value = `${detail.result} ${detail.week}`
    // 农历信息见 detail.lunar
  } else if (detail.startDate && detail.endDate) {
    result.value = `${detail.startDate} 至 ${detail.endDate}`
  }
}

默认平铺展示：切换年月触发 change 并配合 dayStatus 标记

<f-calendar
  :is-lunar="isLunar"
  :switch-type="2"
  is-emit-on-month-change
  :day-status="dayStatus"
  @change="onMonthChange" />

mode属性：选择模式（默认1）

• 1：单日期
• 2：起止日期

isLunar属性：显示农历（默认false）

<f-calendar is-lunar @change="onChange" />

switchType属性：切换类型（默认1）

• 1：切换年、月
• 2：仅切换月

<f-calendar :switch-type="2" @change="onChange" />

minDate / maxDate属性：可选日期范围

<f-calendar min-date="2022-10-07" max-date="2023-12-12" is-fixed @change="onChange" />

dayStatus属性：日期状态标记（平铺模式）

<f-calendar :day-status="dayStatus" @change="onChange" />

插槽

名称	说明
-	-

属性

名称	类型	说明	默认值
v-model	boolean	弹层显隐，isFixed=true 时生效	false
switchType	1 | 2	切换类型：1 年月 / 2 仅月	1
mode	1 | 2	选择模式：1 单日期 / 2 起止	1
maxYear	number	可切换最大年份	2030
minYear	number	可切换最小年份	1920
minDate	string	最小可选日期	1920-01-01
maxDate	string	最大可选日期，空为今天	-
title	string	弹层标题	日期选择
isRadius	boolean	弹层顶部圆角	true
dayStatus	FCalendarDayStatus[]	日期状态数据	[]
monthArrowColor	string	月份箭头颜色	#999999
yearArrowColor	string	年份箭头颜色	#BCBCBC
textColor	string	默认日期文字颜色	#0B1D4A
activeBgColor	string	选中背景色	主题色
activeColor	string	选中文字颜色	#FFFFFF
rangeBgColor	string	范围内背景色	rgba(86,119,252,0.1)
rangeColor	string	范围内文字颜色	主题色
startText	string	起始日期文案	开始
endText	string	结束日期文案	结束
confirmBgColor	string	确定按钮背景色	主题色
isFixed	boolean	是否底部弹层	false
isFixedHeight	boolean	是否固定日历高度	true
isActiveCurrent	boolean	当前选中是否高亮	true
isEmitOnMonthChange	boolean	单选时切换年月是否触发 change	false
isLunar	boolean	是否显示农历	false
isShowBgMonth	boolean	是否显示月份背景水印	false
initStartDate	string	初始起始日期	-
initEndDate	string	初始结束日期	-

FCalendarDayStatus

名称	类型	说明
text	string	描述，2字以内
value	string | number	状态值
bgColor	string	背景色
color	string	文字颜色
check	boolean	是否显示对勾

事件

事件名	说明	回调参数
change	确认或内联选择时	单选：{ year, month, day, result, week, lunar, ... }；范围：{ startDate, endDate, ... }
close	弹层关闭时	-

方法

通过 ref 调用：

方法名	说明	传入参数
show	打开弹层	-
hide	关闭弹层	-