Vue Functional Calendar
made with Vuejs

Vue Functional Calendar是一个基于Vue的现代日历和日期选择器。它是基于原生JS开发，无第三方依赖，轻量、高性能、内存使用量少、样式好以及可伸缩性高，还支持日期选择器、日期范围、多个日历、模式日历等。

安装

Npm

npm i vue-functional-calendar

Yarn

yarn add vue-functional-calendar

使用

Vue.use()

// 在vue文件中引入了
    import FunctionalCalendar from 'vue-functional-calendar';
    Vue.use(FunctionalCalendar, {
        dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
    });

导入组件

// 在VUE文件引入
    import { FunctionalCalendar } from 'vue-functional-calendar';

组件设定

export default {
        components: {
            FunctionalCalendar
        },
        data() {
            return {
                calendarData: {}
            }
        }
    }

模板用法

<FunctionalCalendar
      // v-model="calendarData"

      // v-on:changedMonth="changedMonth"
      // v-on:changedYear="changedYear"

      // :sundayStart="true"
      // :date-format="'dd/mm/yyyy'"
      // :is-date-range="true"
      // :is-date-picker="true"      
       :...:
></FunctionalCalendar>

组件配置

export default {
        components: {
            FunctionalCalendar
        },
        data() {
            return {
                calendarData: {},
                calendarConfigs: {
                    sundayStart: false,
                    dateFormat: 'dd/mm/yyyy',
                    isDatePicker: false,
                    isDateRange: false
                }
            }
        },
    }

模板用法

<FunctionalCalendar
      // v-model="calendarData"
      // :configs="calendarConfigs"
></FunctionalCalendar>

markDates提示

 markedDates 必须为JavaScript日期格式，月份和天数前面不能有0：

✅ 正确: 1/12/2019 ❎错误: 01/12/2019

Props

事件

示例