bm-vue-calendar-component

用于本末项目卡片表格内部的日历组件, 自由标记日期和时间区间

安装

npm install bm-vue-calendar-component -s

<template>
	<div>
		<Calendar :markDateMore="calendarMark"></Calendar>
	</div>
</template>

<script>
	import Calendar from 'bm-vue-calendar-component'

	export default {
		name: 'BmVueCalendarComponent',
		components: { Calendar },
		data() {
			return {
				calendarMark: [
					{
						date: '2021-08-10',
						className: 'fileGetStart',
						markName: '招标文件获取开始时间'
					},
					{
						date: '2021-08-15',
						className: 'fileGetEnd',
						markName: '招标文件获取截止时间'
					},
					{
						date: '2021-08-17',
						className: 'tenderEnd',
						markName: '投标截止时间'
					},
					{
						date: '',
						className: 'fileGetEnd',
						range: ['2021-08-10', '2021-08-15']
					}
				]
			}
		}
	}
</script>

参数注解

calendarMark: 日历标记数组, 每一个数组对象代表日历上被标记的日期, className 为当前标记日期的 css markName 为标记日期的名称 date 为日期字符串

如对象内包含 range 属性则视为一个日期区间, 此时 date 为空字符串