sa-calendar-vue2 v1.0.6

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

handleClickDate 接收到的对象{active,dateStr,day,month,year,status,detail}

例子 基本的使用

<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

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>

> **例子 自定义样式**