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