//效果预览gif
https://i.ibb.co/HqWGPFg/xvkg8-6aomu.gif
//gitee仓库
https://gitee.com/yin-chunyang/sa-calendar-vue3/tree/master/src/package
- 可以收起展开日历;收起时展示传入date的周;
- 展开则展示传入日期的月
- 在这之前的calendar日历是固定的6行天数;这次会在5和6切换
- [3]的功能也加入了参数控制;还加入了visible参数用于控制展开收起;还有latticeHeight参数单格格子的高度;这个默认是40;
- 除[4]新增参数; 其他没有变化用法和之前的一样;
- 事件修改了一下;
- 单格日期可以双击切换日期;双击上月下月部分也可以切换日期展示;
//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>