官网地址
安装
npm i vue-cal
<template><div class="calendar-container"><!-- 这个日历双击可以跳转到下一个周期,但是我项目不允许点击,没找到相关的禁用事件,这里写个蒙层阻止点击 --><div class="mask"></div><!-- 日历startWeekOnSunday:从周天开始算,默认是周一active-view:显示的视图(月视图)hide-view-selector:隐藏切换视图的按钮hide-title-bar:隐藏标题栏xsmall:小尺寸(默认大尺寸)events:自定义数据--><vue-cal:selected-date="selectedDate"hide-view-selectorhide-title-barstartWeekOnSundayxsmallactive-view="month":events="events"events-count-on-year-view><template #events-count="{ events, view }"><!-- 显示自定义数据(events是个数组,只有一个对象,也就是选中0号元素即可) --><div class="data">{{ events[0].count }}</div></template></vue-cal></div>
</template><script setup>
import { ref } from "vue";
import "vue-cal/dist/vuecal.css";
import VueCal from "vue-cal";const selectedDate = ref("2024-10-19"); // 默认打开的月份和日期
const events = ref([// 具有特殊事件特殊样式的日期(start和end必须都要有，可以直接指定范围，如果相同代表某一天)// 可以自定义一些数据传入{start: "2024-10-19",end: "2024-10-19",count: 12, // 自定义的数据},{start: "2024-10-22",end: "2024-10-22",count: 24, // 自定义的数据},
]);
</script><style>
.calendar-container {width: 100%;height: 700px;position: relative;background-color: #cccccc;
}/* 遮罩层样式 */
.mask {position: absolute;width: 100%;height: 100%;z-index: 3;
}/* 特殊日期的样式 */
.data {position: relative;top: 0;right: 0;color: red !important;
}/* 隐藏默认的单元格边框 */
.vuecal__cell:before {border: none !important;
}
/* 隐藏外层单元格边框 */
.vuecal {box-shadow: none !important;
}
/* 隐藏周几的边框 */
.vuecal__weekdays-headings {border: none !important;
}
/* 隐藏选中的日期或者默认的今天日期 */
.vuecal__cell--today,
.vuecal__cell--selected {background-color: transparent !important;
}
/* 设置插槽的样式 */
.vuecal__cell-events-count {width: 0.52rem !important;height: 0.52rem !important;border-radius: 50% !important;right: 0 !important;top: 0 !important;padding: 0 !important;background-color: transparent !important;
}
/* 设置单元格的样式 */
.vuecal__cell-content {width: 0.52rem !important;height: 0.52rem !important;background-color: #22222233 !important;border-radius: 50% !important;
}
/* 恢复flex-grow默认的样式 */
.vuecal__flex[column] {flex-grow: initial !important;
}
/* 单元格内某日的文本样式 */
.vuecal__cell-date {font-family: PlusJakartaSansRegular;font-size: 0.24rem !important;color: #00000080 !important;
}
/* 周几的文本样式 */
.vuecal__flex.weekday-label {font-family: PlusJakartaSansMedium;
}
/* 隐藏其他非当前选择的月份的天数 */
.vuecal__cell--out-of-scope {opacity: 0 !important;
}
/* 设置顶部周几单元格的样式 */
.vuecal__heading {height: 0.5rem !important;
}
/* 设置单元格的样式 */
.vuecal__cell {margin-top: 0.3rem !important;height: 0.5rem !important;
}
/* 更多其他的样式各位可以浏览器自己查看,覆盖原有样式即可 */
</style>
