sa-calendar-vue2

sa-calendar-vue2

npm install sa-calendar-vue2;
or
yarn add sa-calendar-vue2


//main.js
...
import saCalendar from 'sa-calendar-vue2';
import 'sa-calendar-vue2/sa-calendar-vue2.css';
Vue.use(saCalendar);
...

or

//xx.vue
import 'sa-calendar-vue2/sa-calendar-vue2.css';
import { saCalendar, saWeekCalendar } from 'sa-calendar-vue2';

日历组件 有月,周两种 可以自定义单格样式,展示数据内时间字段设置... 使用的监听更改props传递数据内容变化

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
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>
export default{
    data(){
        return {
            data:[      //这个数据是封装时使用的,用于考勤的
                {
                    "id": 166455,
                    "staffName": "张三",
                    "staffNumber": null,
                    "userId": "021406075729539388",
                    "content": "正常",
                    "attendanceDate": "2022-12-12", //!! YYYY-MM-DD
                    "staffId": null,
                    "department": "不动产",
                    "type": null,
                    "departmentId": null,
                    "attendanceGroup": "考勤",
                    "position": null,
                    "isLate": false,
                    "isEarly": false,
                    "isAbsence": false,
                    "isVacation": false,
                    "valid": true,
                    "isHoliday": false
                }
            ],
            startWeek:1,
            detailkey:'attendanceDate',      //!! YYYY-MM-DD
            date:new Date('2022-12-01'),
            
        }
    },
    methods:{
        handleClickDate(item){
            // {active,dateStr,day,month,year,status,detail}
        }
    }
}
</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>
export default{
    data(){
        return {
            data:[      //这个数据是封装时使用的,用于考勤的
                {
                   date:'2022-10-10',   //!! YYYY-MM-DD
                   text:'世界很美好感谢有你'
                }
            ],
            startWeek:1,
            detailkey:'date',      //!! YYYY-MM-DD
            date:new Date('2022-10-01'),
        }
    },
    methods:{
        handleClickDate(item){
            // {active,dateStr,day,month,year,status,detail}
        },
        toggleDate(){
            this.date = 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
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>
export default{
    data(){
        return {
            data:[      //这个数据是封装时使用的,用于考勤的
                {
                   date:'2022-10-10',   //!! YYYY-MM-DD
                   text:'世界很美好感谢有你'
                }
            ],
            startWeek:1,
            detailkey:'date',      //!! YYYY-MM-DD
            date:new Date('2022-10-01'),
        }
    },
    methods:{
        handleClickWeek(item){
            // {dateStr,day,month,week,year,detail}
        },
    }
}
</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>
export default{
    data(){
        return {
            data:[      //这个数据是封装时使用的,用于考勤的
                {
                   date:'2022-10-10',   //!! YYYY-MM-DD
                   text:'世界很美好感谢有你'
                }
            ],
            startWeek:1,
            detailkey:'date',      //!! YYYY-MM-DD
            date:new Date('2022-10-01'),
        }
    },
    methods:{
        handleClickWeek(item){
            // {dateStr,day,month,week,year,detail}
        },
    }
}
</script>