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>