sa-calendar-vue3

1.1.1 • Public • Published

codesandbox

//效果预览gif
https://i.ibb.co/HqWGPFg/xvkg8-6aomu.gif

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

Package Sidebar

Install

npm i sa-calendar-vue3

Weekly Downloads

23

Version

1.1.1

License

ISC

Unpacked Size

54.4 kB

Total Files

14

Last publish

Collaborators

  • code_de