ele-calendar v2.0.0

一个vue calendar的npm组件

说明：

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

#####更新: 1.增加日期多选 :selectionMode="'dates'"，事件select返回选择日期及节点 2.增加语言切换 :lang="'en'" 3.抽离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' //引入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 自定义日历显示内容
> 例如：
``` html
    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