vue展示日历 考勤展示_一个vue的日历组件

一个vue calendar的npm组件

说明：稳定版: 1.2.0 ; Beta版: 2.0.01.基于element-ui开发的vue日历组件。

更新:

1.增加value-format指定返回值的格式

2.增加头部插槽自定义头部

{{ slotProps.todo}}

todo="{'yearLabel':'年','month':'月','event':[prevYear,prevMonth,nextYear,nextMonth]}"

event为切换年月是调用事件

3.增加日期多选 :selectionMode="'dates'"，事件select返回选择日期及节点

4.增加语言切换 :lang="'en'"

5.抽离css方便自定义样式 import 'ele-calendar/dist/vue-calendar.css' //引入css

使用方法：1.下载npm包:你的VUE项目的根目录底下运行：npm install ele-calendar2.引入本npm包并注册为vue的组件：例如：在需要使用的vue页面中：

:render-content="renderContent"

:data="datedef"

:prop="prop"

>

import eleCalendar from 'ele-calendar'

import 'ele-calendar/dist/vue-calendar.css'

export default {

data(){

return{

datedef:[

{"date":"2018-06-30","content":null,"cid":null},

{"date":"2018-06-26","content":null,"cid":null},

],

prop:'date' //对应日期字段名

}

},

components: {

eleCalendar

},

methods: {

renderContent(h,parmas) {

const loop = data =>{

return (

data.defvalue.value ? (

{data.defvalue.text}

备选项

) :

{data.defvalue.text}

)

}

return (

{loop(parmas)}

);

},

}

}

3.通过render-content的渲染Function 自定义日历显示内容例如：renderContent(h,parmas) { //设置lunarcalendar=true,parmas返回值包含农历

const loop = data =>{

return (

data.defvalue.value ? (

{data.defvalue.text}

备选项

) :

{data.defvalue.text}

)

}

return (

{loop(parmas)}

);

},

parmas返回当前日期和传入data对应内容

Calendar Attributes参数说明类型可选值默认值data显示的数据array——

prop对应日期字段名string——

lang语言切换stringenzh-CN

value-format绑定值的格式。不指定则绑定值为 Date 对象stringyyyy-MM-dd—

selectionMode日历模式stringdatesday

highlight是否要高亮对应日期boolean—false

currentmonth高亮选中日期boolean—false

disabledDate设置禁用状态，参数为当前日期，要求返回 BooleanFunction——

border是否带有边框boolean—false

lunarcalendar是否需要农历boolean—false

defaultValue默认展示某月Date——

render-content内容区的渲染 FunctionFunction(h, parmas)——

Calendar Events事件名说明参数date-change切换日历年、月data

select选择日期的数组及节点val,selectDom

pick点击日历返回当前点击时间data、event、row、dome

Scoped Slotname说明—自定义头的内容，参数为 {'yearLabel':'年','month':'月','event':[prevYear,prevMonth,nextYear,nextMonth]}