# sa-calendar-vue2 **Repository Path**: yin-chunyang/sa-calendar-vue2 ## Basic Information - **Project Name**: sa-calendar-vue2 - **Description**: vue2日历;考勤日历;一周的日历 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-11-30 - **Last Updated**: 2023-08-04 ## Categories & Tags **Categories**: Uncategorized **Tags**: calendar-vue2 ## README  ## 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对象 | >**例子 基本的使用** ``` ``` >**例子 自定义样式** ``` {{ date }} 点击我切换日期 {{ item.day }} {{ item.dateStr }} {{ (item.detail && item.detail.text) }} ``` ## 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数据的** ``` ``` > **例子 自定义样式** ``` {{item.detail && item.detail.text}} {{ item.day }}日 星期{{ item.week }} ```
{{item.detail && item.detail.text}}