产品中心
今天整理了五款Vue日历组件，先收藏，万一用得上呢~
Vue Heatmap是一个基于Vue.js的Github样式的日历热图，可使用d3.js 库动态呈现类似Github贡献图的日历热图 。
# 安装
npm i vuejs-heatmap
yarn add vuejs-heatmap
# 使用
<vuejs-heatmap></vuejs-heatmap>
https://github.com/DominikAngerer/vue-heatmap
Vue Functional Calendar是一个基于Vue的现代日历和日期选择器。它是基于原生JS开发，无第三方依赖，轻量、高性能、内存使用量少、样式好以及可伸缩性高，还支持日期选择器、日期范围、多个日历、模式日历等。
# 安装
npm i vue-functional-calendar
yarn add vue-functional-calendar
# 使用
// Introduced in vue file
import FunctionalCalendar from 'vue-functional-calendar';
Vue.use(FunctionalCalendar, {
dayNames: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
});
https://github.com/ManukMinasyan/vue-functional-calendar
Dayspan Vuetify是一个使用Vuetify开发的计划和日历组件，是可视化DaySpan日历和时间表的集合，提供在专业日历应用程序中的所有功能。
# 安装
npm i dayspan-vuetify
yarn add dayspan-vuetify
# 使用
import DaySpanVuetify from 'dayspan-vuetify'
Vue.use( DaySpanVuetify, {
// options is vue definition, the resulting reactive component is stored in components as this.$dayspan or Vue.$dayspan
data: {
// data or computed to override
},
computed: {
// data or computed to override
},
methods: {
// methods to override
}
});
https://github.com/ClickerMonkey/dayspan-vuetify
VCalendar是一个轻巧、无依赖性、基于Vue.js的日历及日期选择器组件，可以构建带有突出显示区域、点、条、甚至弹出窗口的日历，带有支持自定义的API。
# 安装
npm i v-calendar
yarn add v-calendar
<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://unpkg.com/v-calendar'></script>
# 全局引入并注册所有组件
import VCalendar from 'v-calendar';
Vue.use(VCalendar, {
componentPrefix: 'vc', //使用<vc-calendar /> in代替 <v-calendar />
..., // 其他设置
});
# 引入独立组件
import Calendar from 'v-calendar/lib/components/calendar.umd'
import DatePicker from 'v-calendar/lib/components/date-picker.umd'
// 全局注册
Vue.component('calendar', Calendar)
Vue.component('date-picker', DatePicker)
//或者在独立组件中注册
export default {
components: {
Calendar,
DatePicker
}
...
}
https://github.com/nathanreyes/v-calendar
Kalendar是一个全功能、可伸缩、轻量级的浏览器日历组件，功能全面，响应迅速。
Kalendar有Vue，React和Angular等多个版本，这是此插件的Vue版本。
# 安装
npm i kalendar-vue portal-vue -S
# 全局引入
import Vue from "vue";
import PortalVue from "portal-vue";
Vue.use(PortalVue);
# 组件中使用
import { Kalendar } from 'kalendar-vue';
...
components: {
Kalendar,
...
},
https://github.com/altinselimi/kalendar
