一個vue的日曆組件

一個vue calendar的npm組件

說明：

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]}