vue-calendar-list-view

一个日历列表组件。

install

Development

npm install
npm serve

Example

http://localhost:8000/

online example: https://panwenhua.github.io/vue-calendar-list-view/

Usage

import 'vue-calendar-list-view'
import 'vue-calendar-list-view/lib/calendarListView.css'


<template>
    <CalendarList :aroud="calendar.aroud" :on-select="onSelect" :options="calendar.options" :value="currentDate"></CalendarList>
</template>
<script>
export default {
  data() {
    return {
      calendar: {
        aroud: 12, //12个月
        options: [
          {
            //对应日期的  人数
            date: "2018-11-11",
            label: "剩12人",
            value: 12
          },
          {
            date: "2018-11-12",
            label: "剩13人",
            value: 13
          },
          {
            date: "2018-11-13",
            label: "剩14人",
            value: 14
          },
          {
            date: "2018-11-14",
            label: "剩15人",
            value: 15
          },
          {
            date: "2018-11-20",
            label: "剩16人",
            value: 16
          }
        ]
      },
      currentDate: null //当前选择的日期
    };
  },
  methods: {
    onSelect(date, value, recode) {
      //date：当前选择的日期 
      //value：当前选择的数量
      //recode：当前选择的的对象
      console.log(date, value, recode);
      this.currentDate = date;
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

API

Props

name	type	default	description
aroud	Number	12	渲染日历的区间，例如当前为2018年11月，则日历会渲染2018年11月到2019年10月的数据
value	String		当前日历选中的值
options	Object[]		name type default description date String 日期。例如 "2018-11-14" value String|Number 日期对应的数量。比如出行人数"14" label String 对应数量的渲染label。比如"还剩14人"
onSelect	Function(date,value,recode)		选择之后的回调。//date：当前选择的日期 //value：当前选择的数量 //recode：当前选择的的对象

License

vue-calendar-list-view is released under the MIT license.