vue2-calendar

npm install sa-vue2-calendar

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

sa-calendar 月日历

例子

<template>
    <sa-calendar 
        @handleClickDate="handleClick01" 
        ref="asC" 
        :data="testData" 
        :date="date">
    </sa-calendar>
</template>

<script>
export default{
    data(){
        return {
            testData:[
                {date:'2022-10-11-30',text:'下面点击事件会返回了'},
                {       //封装时使用的此数据
                    "id": 166455,
                    "staffName": "name",
                    "staffNumber": null,
                    "userId": "021406075729539388",
                    "content": "正常",
                    "attendanceDate": "2022-08-01",
                    "staffId": null,
                    "department": "不动产",
                    "type": null,
                    "departmentId": null,
                    "attendanceGroup": "考勤",
                    "position": null,
                    "isLate": false,
                    "isEarly": false,
                    "isAbsence": false,
                    "isVacation": false,
                    "valid": true,
                    "isHoliday": false
                }
            ],
            date:new Date()
        }
    },
    methods:{
        handleClick01(item){
            console.log(item.detail)        //每一条的内容
        }
    }
}
</script>

自定义样式

<tmeplate>
    <sa-calendar 
        @handleClickDate="handleClick01" 
        ref="asC" 
        :data="testData" 
        :date="date">

        <!--日历头的自定义展示-->
        <template #header="{date}">
            <div class="mdate">
            {{date}}
            </div>
        </template>
        
        <!--每天的自定义展示-->
        <template #dayItem="{item}">
            <div>
            状态1当月的日期,0上月或上月的可以做高亮底亮
            {{item.status}}
            </div>
            {{item.day}}
            <div v-if="((item.day % 5) == 0)">
            展示的详细内容想展示什么 属性 data 随意
            {{item.detail && item.detail.content}}
            </div>
        </template>
        
    </sa-calendar>
</tmeplate>

<script>
export default{
    data(){
        return {
            testData:[
                {date:'2022-10-11-30',text:'下面点击事件会返回了'},
                {       //封装时使用的此数据
                    "id": 166455,
                    "staffName": "name",
                    "staffNumber": null,
                    "userId": "021406075729539388",
                    "content": "正常",
                    "attendanceDate": "2022-08-01",
                    "staffId": null,
                    "department": "不动产",
                    "type": null,
                    "departmentId": null,
                    "attendanceGroup": "考勤",
                    "position": null,
                    "isLate": false,
                    "isEarly": false,
                    "isAbsence": false,
                    "isVacation": false,
                    "valid": true,
                    "isHoliday": false
                }
            ],
            date:new Date()
        }
    },
    methods:{
        handleClick01(item){
            console.log(item.detail)        //每一条的内容
        }
    }
}
</script>

sa-week-calendar 周日历

例子

<template>
    <sa-week-calendar @handleClickWeek="handleClick02" :date="date" >
    </sa-week-calendar>
</template>
<script>
export default{
    data(){
        return {
            date:new Date()
        }
    },
    methods:{
        handleClick02(item){
            console.log(item) 
        }
    }
}
</script>

自定义样子

<template>
   <sa-week-calendar @handleClickWeek="handleClick02" :date="date" >
      <template #weekItem="{item}">
        <div>
          <div>
            星期{{item.date}}
          </div>
          <div>
            {{item.day}}日
          </div>
        </div>
      </template>
    </sa-week-calendar>
</template>
export default{
    data(){
        return {
            date:new Date()
        }
    },
    methods:{
        handleClick02(item){
            console.log(item) 
        }
    }
}
</script>