一个vue的日历组件

说明：

1.基于element-ui开发的vue日历组件。

地址

更新:

1.增加value-format指定返回值的格式
2.增加头部插槽自定义头部

<ele-calendar >
 <template slot-scope="slotProps"> {{ slotProps.todo}} </template> </ele-calendar > 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

注释：需要配置了jsx依赖

使用方法：

1.下载npm包:

你的VUE项目的根目录底下运行：

npm install ele-calendar

2.引入本npm包并注册为vue的组件：

例如：在需要使用的vue页面中：

    <template>
        
        <!-- 里面写eleCalendar组件-->
            <ele-calendar :render-content="renderContent" :data="datedef" :prop="prop" ></ele-calendar> </template> <script> 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 ? (<div><div>{data.defvalue.text}</div> <span >备选项</span> </div>) : <div>{data.defvalue.text}</div> ) } return ( <div style="min-height:60px;"> {loop(parmas)} </div> ); }, } } </script>

3.通过render-content的渲染Function 自定义日历显示内容

例如：

    renderContent(h,parmas) { //设置lunarcalendar=true,parmas返回值包含农历
                const loop = data =>{
                  return (
                    data.defvalue.value ? (<div><div>{data.defvalue.text}</div> <span >备选项</span> </div>) : <div>{data.defvalue.text}</div> ) } return ( <div style="min-height:60px;"> {loop(parmas)} </div> ); }, parmas返回当前日期和传入data对应内容 

Calendar Attributes

参数	说明	类型	可选值	默认值
data	显示的数据	array	—	—
prop	对应日期字段名	string	—	—
lang	语言切换	string	en	zh-CN
value-format	绑定值的格式。不指定则绑定值为 Date 对象	string	yyyy-MM-dd	—
selectionMode	日历模式	string	dates	day
highlight	是否要高亮对应日期	boolean	—	false
currentmonth	高亮选中日期	boolean	—	false
disabledDate	设置禁用状态，参数为当前日期，要求返回 Boolean	Function	—	—
border	是否带有边框	boolean	—	false
lunarcalendar	是否需要农历	boolean	—	false
defaultValue	默认展示某月	Date	—	—
render-content	内容区的渲染 Function	Function(h, parmas)	—	—

Calendar Events

事件名	说明	参数
date-change	切换日历年、月	data
select	选择日期的数组及节点	val,selectDom
pick	点击日历	返回当前点击时间data、event、row、dome

Scoped Slot

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

转载于:https://www.cnblogs.com/hellofangfang/p/11486827.html