一个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

Calendar Events

Scoped Slot

一个vue的日历组件

原文：https://www.cnblogs.com/hellofangfang/p/11486827.html