foliday-calendar

Vue Calendar

Installation

npm install --save foliday-calendar

//main.js
import FolidayCalendar from 'foliday-calendar'
Vue.use(FolidayCalendar)

But you can also import the standalone component to add locally or for more complex installations.

// foo.vue
import { FolidayCalendar } from 'foliday-calendar'
export default {
  components: {
    FolidayCalendar,
  },
}

Basic Usage

            <calendar
                ref="calendar1"
                :events="calendar1.events" 
                :lunar="calendar1.lunar" 
                :value="calendar1.value" 
                :begin="calendar1.begin" 
                :end="calendar1.end" 
                :weeks="calendar1.weeks" 
                :months="calendar1.months" 
                showOtherMonth
                canChoice
                @select="calendar1.select"
                @selectMonth="calendar1.selectMonth"
                @selectYear="calendar1.selectYear">  
            </calendar>
...
<script>
...
  data() {
    return {
        calendar1:{
            value:[2017,7,20], //默认日期
            // lunar:true, //显示农历
            weeks:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            months:['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
            events:{
                '2017-7-7':'$408',
                '2017-7-20':'$408',
                '2017-7-21':'$460',
                '2017-7-22':'$500',
            },
            select(value){
                console.log(value.toString());
            },
            selectMonth(month,year){
                console.log(year,month)
            },
            selectYear(year){
                console.log(year)
            },
            timestamp:Date.now()
        },
    }
  }
...
</script>

props