vue3使用v-calendar日历，选中当前日期

首先看看效果，蓝色是自己标记的

 下载

npm i v-calendar

注册使用全局

import { createApp } from 'vue';
import App from './App.vue';
import VCalendar from 'v-calendar';

const app = createApp(App);

app.use(VCalendar, {
  componentPrefix: 'vc'
});

组件中使用

   <vc-calendar
        :columns="3"   // 展示的数量
        :multiple="true"  
        @dayclick="handleSelect"   // 当前选中的日期
        expanded
        :attributes="attrs"  // 一开始就回显标记的日期
        class="calendar"
      >
      </vc-calendar>

  

//js部分


// 一开始就回显的标记日期
onMounted(() => {
    getTables(props.roundId);
    if (props.items.exceptDays) {
      dataString.value = props.items.exceptDays + ',';
    }
    // 判断是否有值
    if (props.items.exceptDays) {
      attrsId.value = 0;
      attrs.value = [];
      let arr = props.items.exceptDays.split(',');
      arr.forEach((item) => {
        attrsId.value++;
        attrs.value.push({
          key: 'v' + attrsId.value + 'Day',
          // 括号内传递日期可点亮指定日期，如new Date(2019, 6, 1)，也可传递多个日期：如dates: [ new Date(2018, 0, 1), new Date(2018, 0, 15) ]
          dates: new Date(item),
          highlight: true,
          dot: true,
          // popover 点亮的日期上出现提示内容
          popover: {
            label: '美好的一天！要开心呦！'
          }
        });
      });
    }
  });


// 获取选择的日期
  const handleSelect = (val) => {
    console.log(dataString.value, '日期初始值');
    console.log(val, '处理前日期');
    let result = new Date(val.id);
    attrsId.value++;
    // 判断是否已经存在
    let flag = attrs.value.some((item) => {
      return item.dates.getTime() === result.getTime();
    });
    if (!flag) {
      console.log(dataString.value, '中间日期');
      attrsId.value++;
      dataString.value += val.id + ',';
      attrs.value.push({
        key: 'v' + attrsId.value + 'Day',
        // 括号内传递日期可点亮指定日期，如new Date(2019, 6, 1)，也可传递多个日期：如dates: [ new Date(2018, 0, 1), new Date(2018, 0, 15) ]
        dates: new Date(val.id),
        highlight: true,
        dot: true,
        // popover 点亮的日期上出现提示内容
        popover: {
          label: '美好的一天！要开心呦！'
        }
      });
    } else {
      // 就删除该日期
      dataString.value = dataString.value.replace(val.id + ',', '');
      attrs.value = attrs.value.filter((item) => {
        return item.dates.getTime() !== result.getTime();
      });
    }
    console.log(dataString.value, '处理后日期');
  };