更新记录

1.0.0（2026-04-15） 下载此版本

初始化

平台兼容性

uni-app(4.85)

使用文档

平台兼容性

• ✅ 微信小程序、支付宝小程序、百度小程序、字节小程序、QQ小程序
• ✅ H5（移动端、PC端）
• ✅ App（Vue 2 / Vue 3）
• ✅ 支持 Vue 2 和 Vue 3 混合选项式 API

Props 属性列表

Events 事件

Methods（通过 ref 调用）

Slots 插槽

基础用法(单选)

<template>
  <view class="page">
    <fullCalendar v-model="selectedDate" mode="single" @change="onChange" />
    <text class="result">选中日期：{{ selectedDate }}</text>
  </view>
</template>

<script>
import fullCalendar from '@/uni_modules/dl-calendar/components/dl-calendar/dl-calendar.vue'

export default {
  components: { fullCalendar },
  data() {
    return {
      selectedDate: ''
    }
  },
  methods: {
    onChange(val) {
      console.log('日期变化:', val)
    }
  }
}
</script>

<style scoped>
.page {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.result {
  display: block;
  margin-top: 30rpx;
  font-size: 28rpx;
  color: #333;
  text-align: center;
}
</style>

多选+自定义日历状态+ 插槽

 <template>
   <view class="page">
     <fullCalendar
       v-model="selectedDates"
       mode="multiple"
       :dot-function="checkDot"
       primary-color="#ff6b6b"
     >
       <!-- 自定义日期单元格内容（在数字下方加文字） -->
       <template #date="{ date }">
         <text v-if="date.day === 15" class="custom-text">发薪</text>
       </template>

       <!-- 自定义底部栏 -->
       <template #footer="{ selectedDates, clearSelection }">
         <view class="custom-footer">
           <text>已选 {{ selectedDates.length }} 天</text>
           <button size="mini" @click="clearSelection">清空</button>
         </view>
       </template>
     </fullCalendar>
   </view>
 </template>

 <script>
import fullCalendar from '@/uni_modules/dl-calendar/components/dl-calendar/dl-calendar.vue'

 export default {
   components: { fullCalendar },
   data() {
     return {
       selectedDates: ['2026-04-10', '2026-04-15']
     }
   },
   methods: {
     // 自定义小圆点：周末显示红点
     checkDot(date) {
       const day = date.date.getDay()
       return day === 0 || day === 6
     }
   }
 }
 </script>

 <style scoped>
 .page {
   padding: 30rpx;
   background-color: #f5f5f5;
 }
 .custom-text {
   font-size: 20rpx;
   color: #ff6b6b;
   margin-top: -4rpx;
 }
 .custom-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 </style>

范围选择 + 折叠切换 + 限制可选日期

<template>
  <view class="page">
    <fullCalendar
      v-model="dateRange"
      mode="range"
      ref="fullCalendarRef"
      :collapsed.sync="collapsed"
      :min-date="minDate"
      :max-date="maxDate"
      @range-select="onRangeSelect"
    />
    <view class="info">
      <text>范围：{{ dateRange[0] || '未选' }} 至 {{ dateRange[1] || '未选' }}</text>
     <text @click="collapsedFn">切换折叠</text>
    </view>
  </view>
</template>

<script>
import fullCalendar from '@/uni_modules/dl-calendar/components/dl-calendar/dl-calendar.vue'

export default {
  components: { fullCalendar },
  data() {
    const today = new Date()
    const min = new Date(today.getFullYear(), today.getMonth(), 1)
    const max = new Date(today.getFullYear(), today.getMonth() + 2, 0)

    return {
      dateRange: [],
      collapsed: false,
      minDate: this.formatDate(min),
      maxDate: this.formatDate(max)
    }
  },
  methods: {
    formatDate(d) {
      return `${d.getFullYear()}-${(d.getMonth()+1).toString().padStart(2,'0')}-${d.getDate().toString().padStart(2,'0')}`
    },
    collapsedFn(){
        this.$refs.fullCalendarRef.toggleCollapse();
    },
    onRangeSelect(start) {
      console.log('范围选择中，当前起点：', start)
    }
  }
}
</script>

<style scoped>
.page {
  padding: 30rpx;
}
.info {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>