建议收藏！整理了五款Vue日历开源组件~

程序员老鱼

发布于 2023-09-07 08:56:18

10.3K0

发布于 2023-09-07 08:56:18

文章被收录于专栏：前端实验室前端实验室

今天整理了五款Vue日历组件，先收藏，万一用得上呢~

Vue Heatmap

Vue Heatmap是一个基于Vue.js的Github样式的日历热图，可使用d3.js 库动态呈现类似Github贡献图的日历热图。

安装使用

# 安装
npm i vuejs-heatmap

yarn add vuejs-heatmap

# 使用
<vuejs-heatmap></vuejs-heatmap>

Github地址

https://github.com/DominikAngerer/vue-heatmap

Vue Functional Calendar

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']
});

Github地址

https://github.com/ManukMinasyan/vue-functional-calendar

Dayspan Vuetify

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
  }
});

Github地址

https://github.com/ClickerMonkey/dayspan-vuetify

VCalendar

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
  }
  ...
}

Github地址

https://github.com/nathanreyes/v-calendar

Kalendar

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,
    ...
},