vue3+ts 自定义日历组件模板开发1.0（纯代码）

---

组件初始样式如下（样式简单方便修改）

1.创建组件文件

dateComponent.vue

该日历组件只区分周日和周一开头的日历面板

<template>
    <div class="calendar">
        <div class="calendar-header">
            <button class="btnx" @click="prevMonth">&lt;</button>
            <span>{{ currentMonth }}</span>
            <button class="btnx" @click="nextMonth">&gt;</button>
        </div>
        <div class="calendar-grid">
            <div v-for="item in currentWeerkList" :key="item + 'week'" class="calendar-day-header">
                {{ item }}
            </div>
            <!-- 汇总 -->
            <div v-for="item in dayList" :key="item.month + '-' + item.day" class="calendar-day" @click="getSome(item)">
                <div :class="['itemBox', item.isCurrent ? 'isCurrent' : '']">
                    {{ item.day }}
                </div>
            </div>
        </div>
    </div>
    <div class="bottomBoxBtn" @click="backCurrentDate">返回当月</div>
</template>

<script lang="ts" setup>
import { computed, ref, watch } from "vue"
// weekListBegin 传入0或1 0代表周末开头 1代表周一开头
interface propTypes {
    weekListBegin: number
}
interface ymd {
    year: number
    month: number
    day: number
    isCurrent?: boolean
}
// const props =
const props = withDefaults(defineProps<propTypes>(), {
    weekListBegin: 0
})
const currentDate = ref(new Date())
const currentMonth = computed(() => {
    let res = currentDate.value.toLocaleString("zh", {
        month: "long",
        year: "numeric"
    })
    console.log(res)
    return res
})
const dayList = ref<any>([])
const daysInMonth = computed(() => {
    const year = currentDate.value.getFullYear()
    const month = currentDate.value.getMonth() + 1
    //获取到当月最后一天是几号（用下一个月的第一天的前一天算出）
    const days = new Date(year, month, 0).getDate()
    //获取前一个月最后一天是几号(用当前月的第一天往前一天算出)
    let arr: Array<ymd> = []
    for (let i = 1; i <= days; i++) {
        arr.push({
            year: year,
            month: month,
            day: i
        })
    }
    return arr
})
const daysPreMonth = computed(() => {
    const year = currentDate.value.getFullYear()
    const month = currentDate.value.getMonth() + 1
    const pre_days = new Date(year, currentDate.value.getMonth(), 0).getDate()
    // const pre_month = currentDate.value.getMonth() === 0 ? 12 : currentDate.value.getMonth()
    // const next_month = currentDate.value.getMonth() === 11 ? 1 : currentDate.value.getMonth() + 1
    //1号是星期几
    const currentWeekDate = new Date(year + "-" + month + "-1").getDay()
    //console.log("1号是星期几", currentWeekDate)
    //从周末开始
    //需要填充的各自数量
    let num
    if (!props.weekListBegin) {
        //console.log("从周末开始")
        //console.log(currentWeekDate)
        //1号不是周末
        if (currentWeekDate != 0) {
            num = currentWeekDate
            //console.log("1号不是周末前面填充格子数：", num)
        } else {
            num = 0
            //console.log("1号是周末前面填充格子数：", num)
        }
    } else {
        //从周一开始
        //1号不是周末
        //console.log("不是从周末开始")
        //console.log("1号是星期：", currentWeekDate)
        if (currentWeekDate != 0) {
            num = currentWeekDate - 1
            //console.log("1号不是周末前面填充格子数：", num)
        } else {
            //1号是周末
            num = 6
            //console.log("1号是周末前面填充格子数：", num)
        }
    }
    let arr: Array<ymd> = []
    for (let i = pre_days; i > pre_days - num; i--) {
        arr.push({
            year:
                currentDate.value.getMonth() === 0
                    ? currentDate.value.getFullYear() - 1
                    : currentDate.value.getFullYear(),
            month: currentDate.value.getMonth() === 0 ? 12 : currentDate.value.getMonth(),
            day: i
        })
    }
    return arr.reverse()
})
const daysNextMonth = computed(() => {
    const year = currentDate.value.getFullYear()
    const month = currentDate.value.getMonth() + 1
    // const days = new Date(year, month, 0).getDate()
    // const pre_days = new Date(year, currentDate.value.getMonth(), 0).getDate()
    // const pre_month = currentDate.value.getMonth() === 0 ? 12 : currentDate.value.getMonth()
    // const next_month = currentDate.value.getMonth() === 11 ? 1 : currentDate.value.getMonth() + 1
    //console.log(
    //     "前一个月是",
    //     pre_month,
    //     "月",
    //     "前一个月最后一天是:",
    //     pre_days,
    //     "号",
    //     "当前月是",
    //     month,
    //     "月",
    //     "下一个月是",
    //     next_month,
    //     "月"
    // )
    //下个月1号是星期几
    const currentWeekDate = new Date(year, month, 1).getDay()
    //console.log("下个月1号是星期几", currentWeekDate)
    //从周末开始
    //需要填充的各自数量
    let num
    if (!props.weekListBegin) {
        //console.log("列表从周末开始")
        //console.log(currentWeekDate)
        //1号不是周末
        if (currentWeekDate != 0) {
            num = 7 - currentWeekDate
            //console.log("1号不是周末前面填充格子数：", num)
        } else {
            num = 0
            //console.log("1号是周末前面填充格子数：", num)
        }
    } else {
        //从周一开始
        //1号不是周末
        //console.log("列表不是从周末开始")
        //console.log("1号是星期：", currentWeekDate)
        if (currentWeekDate === 1) {
            num = 0
            //console.log("1号是周一后面填充格子数：", num)
        } else {
            //1号是周末
            if (currentWeekDate === 0) {
                num = 1
            } else {
                num = 7 - currentWeekDate + 1
            }
            //console.log("1号不是周一后面填充格子数：", num)
        }
    }
    let arr: Array<ymd> = []
    for (let i = 1; i <= num; i++) {
        arr.push({
            year:
                currentDate.value.getMonth() === 11
                    ? currentDate.value.getFullYear() + 1
                    : currentDate.value.getFullYear(),
            month: currentDate.value.getMonth() === 11 ? 1 : currentDate.value.getMonth() + 2,
            day: i
        })
    }
    return arr
})

watch(
    () => [daysPreMonth.value, daysInMonth.value, daysNextMonth.value],
    (v, _o) => {
        let tmp = [...v[0], ...v[1], ...v[2]]
        // dayList.value = [...v[0], ...v[1], ...v[2]]
        //获取当天
        const currentDay = new Date()
        //处理当前时间的高亮显示
        tmp.map((item) => {
            if (
                item.year === currentDay.getFullYear() &&
                item.month === currentDay.getMonth() + 1 &&
                item.day === currentDay.getDate()
            ) {
                item.isCurrent = true
            } else {
                item.isCurrent = false
            }
            return item
        })
        dayList.value = [...tmp]
    },
    {
        deep: true,
        immediate: true
    }
)
const currentWeerkList = computed(() => {
    switch (props.weekListBegin) {
        case 0:
            return ["日", "一", "二", "三", "四", "五", "六"]
        default:
            return ["一", "二", "三", "四", "五", "六", "日"]
    }
})
//上个月按钮
const prevMonth = () => {
    currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() - 1, 1)
    console.log(currentDate.value)
}
//下个月按钮
const nextMonth = () => {
    currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, 1)
}
//返回当前月
const backCurrentDate = () => {
    currentDate.value = new Date()
}
//每一天的点击事件
const getSome = (item: any) => {
    console.log(item)
}
</script>

<style scoped>
* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
.calendar {
    width: 100%;
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        .btnx {
            width: 50px;
            outline: none;
            border: 0px;
            background-color: rgba(167, 231, 236, 0.5);
            height: 40px;
        }
    }
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        /* gap: 5px; */
        .calendar-day-header {
            padding: 10px 0px;
            /* border: 1px solid #ccc; */
            border-bottom: 1px solid #ccc;
        }
        .calendar-day {
            padding: 5px;
            /* border: 1px solid #ccc; */
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            .itemBox {
                width: 100%;
                height: 100%;
                padding: 5px;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .isCurrent {
                background-color: rgba(82, 71, 233, 0.5);
                border-radius: 10px;
            }
        }
    }
}
.bottomBoxBtn {
    text-align: center;
    height: 40px;
    background-color: rgba(167, 231, 236, 0.5);
    margin-top: 10px;
    line-height: 40px;
    box-shadow: 2px 5px 5px rgb(167, 214, 236);
}
</style>

2.引入组件文件

<script setup lang="ts">
import DateComponent from './components/dateComponent.vue'
</script>
<template>
  <DateComponent :weekListBegin="1" />
</template>

End