An NPM component of vue Calendar

Description:

1. Vue calendar component based on Element-UI development. address

Usage:

1. Download NPM package:

Run under the root of your VUE project:

    npm install ele-calendar
Copy the code

2. Components that import this NPM package and register as VUE:

For example: In the vUE page to be used:

	<template>
    	
    	<! -- Inside write eleCalendar component -->
            <ele-calendar
                  :render-content="renderContent"
                  :data="datedef"
                  :prop="prop"
            ></ele-calendar>
	</template>
	
	<script>
    import eleCalendar from 'ele-calendar'
    export default {
        data(){
        	return{
        		datedef:[
                    {"date":"2018-06-30"."content":null."cid":null},
                    {"date":"2018-06-26"."content":null."cid":null},].prop:'date' // The corresponding date field name}},components: {
            eleCalendar
        },
        methods: {
          renderContent(h,parmas) {
            const loop = data= >{
              return (
                data.defvalue.value ? (<div><div>{data.defvalue.text}</div> 
                <span  >Alternatives to the</span>
                </div>) : <div>{data.defvalue.text}</div>)}return (
            <div  style="min-height:60px;">
             {loop(parmas)}
            </div>); }}},</script>
Copy the code

3. Customize calendar display content via render-content render Function

Such as:

    renderContent(h,parmas) {
                const loop = data =>{
                  return (
                    data.defvalue.value ? (<div><div>{data.defvalue.text}</div> 
                    <span  >Alternatives to the</span>
                    </div>) : <div>{data.defvalue.text}</div>
                  )
               }
               return (
                <div  style="min-height:60px;">
                 {loop(parmas)}
                </div>); }, parmas returns the current date and the corresponding content of the passed dataCopy the code

Calendar Attributes

parameter instructions type An optional value The default value
data Displayed data array – –
prop Name of the corresponding date field string – –
highlight Whether to highlight the corresponding date boolean – false
currentmonth Highlight the selected date boolean – false
disabledDate Sets the disabled status with the current date and requires a Boolean return Function – –
border With or without borders boolean – false
render-content Content area render Function Function(h, parmas) – –

Calendar Events

The event name instructions parameter
pick Switch calendar year, month data
date-change Click on the calendar Returns the current click time data, Event, Row, dome