codesandbox

//效果预览gif
https://i.ibb.co/HqWGPFg/xvkg8-6aomu.gif

//gitee仓库
https://gitee.com/yin-chunyang/sa-calendar-vue3/tree/master/src/package

1. 可以收起展开日历;收起时展示传入date的周;
2. 展开则展示传入日期的月
3. 在这之前的calendar日历是固定的6行天数;这次会在5和6切换
4. [3]的功能也加入了参数控制;还加入了visible参数用于控制展开收起;还有latticeHeight参数单格格子的高度;这个默认是40;
5. 除[4]新增参数; 其他没有变化用法和之前的一样;
6. 事件修改了一下;
7. 单格日期可以双击切换日期;双击上月下月部分也可以切换日期展示;

//npm install sa-calendar-vue3;
//or
//yarn add sa-calendar-vue3

import { saCalendar, saWeekCalendar,saCalendarToggle } from 'sa-calendar-vue3';

日历组件 有月,周两种 可以自定义单格样式,展示数据内时间字段设置... 使用的监听更改props传递数据内容变化

sa-calendar-toggle

| 属性(事件) | 作用 | 值 | 说明 | | --- | --- | --- | --- | | data | 用于日历展示的内容 | Array | 数据需要一个日期格式YYYY-MM-DD的key | | date | 日历展示的日期 | Date \ YYYY-MM-DD | 使用时需要用v-model:date='date' | | detailkey | data属性日期字段的设置 | String | 需要和data属性的日期key一样 | | startWeek | 周的第一个位置是周一还是周日 | Number | 只能输入1或7 | | weekType | 中英文的周显示 | String | cn和en | | onDblClick | 点击单格的事件 | function(item,date) | 参数1会返回点击的年月日和data传入的点击日期对象 参数2是双击的时间 | | latticeHeight | 格子的高度 | Number | 默认40高度;用的定位容器高度由此计算 | | isSixRow | 是否固定展示6行 | Boolean | 默认false; | | visible | 用于控制显示隐藏 | Boolean | 这个使用时需要用v-model:visible; false展开true收起 |

带插槽的使用配合moment展示周

可以鼠标按下拖拽展开收起;touch事件也可以

<template>
    <div class="btns">
        <a-button @click="date = new Date()">set date</a-button>
        <a-button @click="startWeek = (startWeek == 7 ? 1 : 7)">set startWeek</a-button>
        <a-button @click="weekType = (weekType == 'cn' ? 'en' : 'cn')">set weekType</a-button>
        <a-button @click="addData">add Data</a-button>
    </div>
    <sa-calendar-toggle v-model:visible="visible" :latticeHeight="50" :isSixRow="false" :startWeek="startWeek"
        :weekType="weekType" v-model:date="date" :data="data" :detailkey="'date'" @onDblClick="handleDay">
        <template #header="{ data }">
            <div class="custom">
                {{ data }}
            </div>
        </template>
        <template #week="{ data, index }">
            {{ data }}
        </template>
        <template #day="{ data, index, row }">
            <div class="mydate">
                <template v-if="startWeek == 1">
                    <template v-if='index==0'>
                        <div class="mydate-week">{{ moment(new Date(data.year,data.month,data.day)).format("WW") }}</div>
                    </template>
                </template>
                <template v-else>
                    <template v-if='index==0'>
                        <div class="mydate-week">{{ moment(new Date(row[1].year,row[1].month,row[1].day)).format("WW") }}</div>
                    </template>
                </template>
                <div class="mydate-day" :class="{ 'active': data.active, 'opacity': data.status != 1 }">
                    <div>
                        {{ data.day }}
                    </div>
                    <p>{{ data.detail && data.detail.text }}</p>
                    <nav v-if="data.detail && data.detail.list">
                        <li v-for="v  in data.detail.list" :key="v">{{ v }}</li>
                    </nav>
                </div>
            </div>
        </template>
        <template #toggle>
            <div class="custom" @click="toggleFn">toggle</div>
        </template>
</sa-calendar-toggle>
</template>

<script setup lang="ts">
import moment from 'moment';
import { reactive, ref } from 'vue';
let startWeek = ref(7);
let weekType = ref('cn');
let date = ref(new Date());
let data: any = reactive([
    {
        date: '2023-02-11',
        text:'文本内容',
        list:[
            '今天干点什么啊','xx活动开启'
        ]
    }
]);
const addData = () => {
    data.push({
        date: moment(new Date()).format("YYYY-MM-DD"),
        text:'add Text'
    })
}
const handleDay = (item: any) => {
    console.log(item);
}
const setDate = () => {
    date.value = new Date(2022, 10, 10);
}
let visible = ref(false);
const toggleFn = () => {
    visible.value = !visible.value
}
</script>

<style scoped>
.btns button {
    margin-right: 20px;
}

.mydate {
    width: 100%;
    height: 100%;
    position: relative;
    user-select: none;
}

.mydate-day {
    height: 100%;
    position: relative;
    font-size: 16px;
}
.mydate-day div{
    height: 20px;
    line-height: 20px;
    margin: 4px 0px;
}
.mydate-day p{
    margin: 0px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
}
.mydate-day:hover nav{
    display: block;
}
.mydate-day nav{
    width: 80%;
    height: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 10%;
    background: white;
    box-shadow: 0px 0px 10px pink;
    z-index: 99999999999999999999999;
    display: none;
    padding: 10px;
}
.mydate-day nav li{
    height: 20px;
    line-height: 20px;
    text-align: left;
    font-size: 14px;
}
.mydate-day nav li+.mydate-day nav li{
    margin-top: 6px;
}
:deep .calendarToggle-day-row .calendarToggle-day-row-column{
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
:deep .calendarToggle-day-row .calendarToggle-day-row-column:nth-last-child(1){
    border-right: none;
}
:deep .calendarToggle-day-row:nth-last-child(1) .calendarToggle-day-row-column{
    border-bottom: none;
}
:deep .calendarToggle-day-row_active .calendarToggle-day-row-column{
    border-bottom: none;
}

.mydate-week {
    position: absolute;
    font-size: 14px;
    color: pink;
    text-align: center;
    border-right: 1px solid pink;
    cursor: pointer;
    width: 40px;
    left: -40px;
}

:deep .calendarToggle-day-row {
    padding-left: 40px;
}

:deep .calendarToggle-week {
    padding-left: 40px;
}

:deep .calendarToggle-day-row_active {
    background: white;
    box-shadow: 0px 0px 10px #ccc;
}

.custom {
    width: 100%;
    text-align: center;
    user-select: none;
}

.active div{
    font-size: 20px;
    color: #58241d;
    font-weight: 600;
}

.opacity {
    opacity: .5;
}
</style>

sa-calendar

| 属性(事件) | 作用 | 值 | 说明 | | --- | --- | --- | --- | | data | 用于日历展示的内容 | Array | 数据需要一个日期格式YYYY-MM-DD的key | | date | 日历展示的日期 | Date \ YYYY-MM-DD | 可以传入时间对象也可以是'2022-10-10' | | detailkey | data属性日期字段的设置 | String | 需要和data属性的日期key一样 | | startWeek | 周的第一个位置是周一还是周日 | Number | 只能输入1或7 | | weekType | 中英文的周显示 | String | cn和en | | handleClickDate | 点击单格的事件 | function(r) | 会返回点击的年月日和data传入的点击日期对象 |

handleClickDate 接收到的对象{active,dateStr,day,month,year,status,detail}

| key | type | des | | --- | --- | --- | | active | boolean | 是否是date传递日期 true是的 | | dateStr | String | YYYY-MM-DD字符串 | | day | Number | 日 | | month | Number | 月(下标 0,1,2,3...) | | year | Number | 年 | | status | Number | 是否是当前月的日期 (0上月或下月\1本月) | | detail | Object | 通过属性data的时间字段 和 点击时间 的对比返回 点击日期的data对象 |

例子 基本的使用

<template>
    <sa-calendar 
        @handleClickDate="handleClickDate" 
        :detailkey="detailkey"
        :startWeek="startWeek" 
        :data="data" 
        :date="date">
    </sa-calendar>
</template>

<script setup>
import {ref,reactive} from 'vue';
let detailkey = ref();
let data = reactive([]);
let date = ref(new Date());
let startWeek = ref('1');
const handleClickDate = (item) =>{
    
}
</script>

例子 自定义样式

<template>
    <sa-calendar 
        @handleClickDate="handleClickDate" 
        :detailkey="detailkey"
        :startWeek="startWeek" 
        :data="data" 
        :date="date">
        
        <!-- 日期header的自定义样式,date是 "今天的日期(YYYY-MM-DD)" -->
        <template #header="{ date }">
            <div style="height:40px;line-height:40px;background:skyblue;text-align:center">
                <span>
                    {{ date }}
                </span>
                <span @click="toggleDate">点击我切换日期</span>
            </div>
        </template>
      
        <!--单格的自定义 item同事件handleClickDate返回的的一样,detail就是data传入的内容-->
        <template #dayItem="{ item }">
            <div class="date-item">
                <div>{{ item.day }} {{ item.dateStr }}</div>
                <div>{{ (item.detail && item.detail.text) }}</div>
            </div>
        </template>
        
    </sa-calendar>
</template>

<script setup>
import {ref,reactive} from 'vue';
let detailkey = ref('date');    //!! YYYY-MM-DD key
let date = ref(new Date('2022-10-01'));
let startWeek = ref(1);
let data = reactive([
    {
        date:'2022-10-10',   //!! YYYY-MM-DD
        text:'世界很美好感谢有你'
    }
])
const handleClickDate = (item) =>{
    // {active,dateStr,day,month,year,status,detail}
}
const toggleDate =() =>{
    date.value = new Date("2022-11-10")
}
</script>

sa-week-calendar

| 属性(事件) | 作用 | 值 | 说明 | | --- | --- | --- | --- | | data | 用于日历展示的内容 | Array | 数据需要一个日期格式YYYY-MM-DD的key | | date | 日历展示的日期 | Date \ YYYY-MM-DD | 可以传入时间对象也可以是'2022-10-10' | | detailkey | data属性日期字段的设置 | String | 需要和data属性的日期key一样 | | startWeek | 周的第一个位置是周一还是周日 | Number | 只能输入1或7 | | weekType | 中英文的周显示 | String | cn和en | | handleClickWeek | 点击单格的事件 | function(r) | 会返回点击的年月日和data传入的点击日期对象 |

handleClickWeek接收到的 {dateStr,day,month,week,year,detail}基本和handleClickDate一样

例子 基本使用. 这个组件基本使用是不会展示data数据的

<template>
    <sa-week-calendar
        @handleClickWeek="handleClickWeek" 
        :detailkey="detailkey"
        :startWeek="startWeek" 
        :data="data" 
        :date="date">
    </sa-week-calendar>
</template>

<script setup>
import {ref,reactive} from 'vue';
let detailkey = ref();
let startWeek = ref(1);
let data = reactive([]);
let date = ref(mew Date('2022-10-10'));
const handleClickWeek = (item) =>{
    
}
</script>

例子 自定义样式

<template>
    <sa-week-calendar
        @handleClickWeek="handleClickWeek" 
        :detailkey="detailkey"
        :startWeek="startWeek" 
        :data="data" 
        :date="date">
        <template #weekItem="{ item }">
            <div>
                <p>{{item.detail && item.detail.text}}</p>
                <div>{{ item.day }}日</div>
                <div>星期{{ item.week }}</div>
            </div>
        </template>
    </sa-week-calendar>
</template>

<script setup>
import {ref,reactive} from 'vue';
let detailkey = ref('date');  //!! YYYY-MM-DD
let startWeek = ref(1);
let data = reactive([
    {
        date:'2022-10-10',   //!! YYYY-MM-DD
        text:'世界很美好感谢有你'
    }
]);
let date = ref(mew Date('2022-10-10'));
const handleClickWeek = (item) =>{
    
}
</script>