vue2-calendar-cc

calendar

一个 vue2 的简单日历组件

支持的功能

• 月份切换
• 年份切换
• 高亮指定日期
• 黑夜模式

props

名称	类型	默认值	说明
width	Number/String	'600px'	日历的宽度
highlight	Number/String	''	日历的高度
theme	String	''	主题颜色(可选'dark')
currentTime	String	系统年月日	初始化的时间(xxxx-xx-xx)
autoMonthSwitch	Boolean	true	点击非当前月日期,是否自动跳转到目标月份

events

名称	说明
change	change(item),切换日期时的回调事件
dateClick	dateClick(item),点击日期时的回调事件

slot

名称	说明
header	日历头部的插槽

methods

名称	说明
prevMonth	切换到上一个月
nextMonth	切换到下一个月
prevYear	切换到上一年
nextYear	切换到下一年
backToToday	切换到今天(受 currentTime 影响)

Project Setup

npm i vue2-calendar-cc

使用方法

<template>
	<div>
		<Calendar width="600px" theme="dark" :currentTime.sync="currentTime"></Calendar>
	</div>
</template>

<script>
import Calendar from 'vue2-calendar-cc';
export default {
	components: {
		Calendar,
	},
	data() {
		return {
			currentTime: '2023-01-01',
		};
	},
};
</script>

<style>
@import url('../node_modules/vue2-calendar-cc/dist/style.css');
</style>