zwhGithub / Vue Calendar
🏆 基于 vue 2.0 开发的轻量,高性能日历组件
Stars: ✭ 828
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Calendar
Vue Functional Calendar
Vue.js Functional Calendar | Component/Package
Stars: ✭ 314 (-62.08%)
Mutual labels: calendar, datepicker, calendar-component
Calendarview
An Easy to Use Calendar for iOS (Swift 5.0)
Stars: ✭ 429 (-48.19%)
Mutual labels: calendar, datepicker, calendar-component
Primedatepicker
PrimeDatePicker is a tool that provides picking a single day, multiple days, and a range of days.
Stars: ✭ 292 (-64.73%)
Mutual labels: calendar, datepicker, calendar-component
Svelte Calendar
A lightweight datepicker with neat animations and a unique UX.
Stars: ✭ 279 (-66.3%)
Mutual labels: datepicker, calendar-component
ionic4-datepicker
Ionic 4 Datepicker component
Stars: ✭ 78 (-90.58%)
Mutual labels: calendar, datepicker
Calendar
A calendar picker component, based on jQuery.
Stars: ✭ 49 (-94.08%)
Mutual labels: calendar, datepicker
Cvcalendar
A custom visual calendar for iOS 8+ written in Swift (>= 4.0).
Stars: ✭ 3,435 (+314.86%)
Mutual labels: calendar, calendar-component
React Timeline Gantt
A react Timeline component with virtual rendering
Stars: ✭ 347 (-58.09%)
Mutual labels: calendar, calendar-component
Vue Ctk Date Time Picker
VueJS component to select dates & time, including a range mode
Stars: ✭ 707 (-14.61%)
Mutual labels: calendar, datepicker
Zebra datepicker
A super-lightweight, highly configurable, cross-browser date / time picker jQuery plugin
Stars: ✭ 367 (-55.68%)
Mutual labels: calendar, datepicker
React Infinite Calendar
✨ Infinite scrolling date-picker built with React, with localization, range selection, themes, keyboard support, and more.
Stars: ✭ 3,828 (+362.32%)
Mutual labels: calendar, datepicker
Vue Hotel Datepicker
Vue date range picker component
Stars: ✭ 665 (-19.69%)
Mutual labels: calendar, datepicker
react-native-infinite-calendar
WIP: React native port of react-infinite-calendar
Stars: ✭ 43 (-94.81%)
Mutual labels: calendar, datepicker
vuejs3-datepicker
vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.
Stars: ✭ 23 (-97.22%)
Mutual labels: calendar, datepicker
Ion2 Calendar
📅 A date picker components for ionic2 /ionic3 / ionic4
Stars: ✭ 537 (-35.14%)
Mutual labels: calendar, datepicker
nepali date picker
Material Style Date Picker with Bikram Sambat(Nepali) Calendar Support. Supports both Android and ios.
Stars: ✭ 30 (-96.38%)
Mutual labels: calendar, datepicker
react-native-daterange-picker
A React Native component for picking date ranges or single dates.
Stars: ✭ 86 (-89.61%)
Mutual labels: calendar, datepicker
ionic4-date-picker
Calendar date picker for Ionic4 apps
Stars: ✭ 24 (-97.1%)
Mutual labels: calendar, datepicker
Rkcalendar
SwiftUI Simple Calendar / Date Picker for iOS
Stars: ✭ 349 (-57.85%)
Mutual labels: calendar, datepicker
Angular Moment Picker
Angular Moment Picker is an AngularJS directive for date and time picker using Moment.js.
Stars: ✭ 536 (-35.27%)
Mutual labels: calendar, datepicker
vue-calendar-component
- 基于 vue 2.0 开发的轻量,高性能日历组件
- 占用内存小,性能好,样式好看,可扩展性强
- 原生 js 开发,没引入第三方库
Why
- Github 上很多点击弹出日历选择某个时间的组件,却没有找到单纯展示日历并且能点击获取时间的组件
- 少部分日历组件的占用内存过于大,对于日历这样简单的功能来说显然不够合理
Demo
效果
- 🎉 觉得好用给一个 star 哦~~ 🎉
Install
npm i vue-calendar-component --save
cnpm i vue-calendar-component --save //国内镜像
github地址 详细文档
Usage
//vue文件中引入
import Calendar from 'vue-calendar-component';
components: {
Calendar
}
<Calendar
v-on:choseDay="clickDay"
v-on:changeMonth="changeDate"
// v-on:isToday="clickToday"
// :markDate=arr // arr=['2018/4/1','2018/4/3'] 标记4月1日和4月3日 简单标记
//:markDateMore=arr // 多种不同的标记
// 第一个标记和第二个标记不能同时使用
// :agoDayHide='1514937600' //某个日期以前的不允许点击 时间戳10位
// :futureDayHide='1525104000' //某个日期以后的不允许点击 时间戳10位
// :sundayStart="true" //默认是周一开始 当是true的时候 是周日开始
></Calendar>
clickDay(data) {
console.log(data); //选中某天
},
changeDate(data) {
console.log(data); //左右点击切换月份
},
clickToday(data) {
console.log(data); // 跳到了本月
}
// 多个标记示例
arr=[{date:'2018/4/1',className:"mark1"}, {date:'2018/4/13',className:"mark2"}];
//4月1 标记的className是mark1 根据class做出一些标记样式
API
属性 | 说明 | 默认 | 是否必传 |
---|---|---|---|
choseDay | 选中某天调用的方法,返回选中的日期 YY-MM-DD | 无 | 否 |
changeMonth | 切换月份调用的方法,返回切换到某月的日期 YY-MM-DD | 无 | 否 |
isToday | 切换月份的时候,如果切到当前月份,调用这个方法,返回当前月今天 | 无 | 否 |
markDate | 如果需要某月的几天被标注,传当月的日期数组。如["2018/2/2","2018/2/6"]被会标注(相同的标记) | 空数组 | 否 |
markDateMore | 需要不同的标记如上Usage 最后一行示例代码 | 空数组 | 否 |
agoDayHide | 某个日期以前的不允许点击 时间戳长度是 10 位 | 0 | 否 |
futureDayHide | 某个日期以后的不允许点击 时间戳长度是 10 位 | 很大 | 否 |
sundayStart | 默认是周一开始 当是true的时候 是周日开始 | false | 否 |
textTop | 日历头部的文字,默认是 [ '日','一', '二', '三', '四', '五', '六'] ,可以根据自己的需求进行不同的修改。 | --- | 否 |
✅ 在 Calendar标签上添加 ref 属性, 暴露出三个方法可以 直接切换月份
例如: <Calendar ref="Calendar"></Calendar>
✅ this.$refs.Calendar.PreMonth(); //调用方法实现转到上个月
✅ this.$refs.Calendar.NextMonth(); //调用方法实现转到下个月
✅ this.$refs.Calendar.ChoseMonth('2018-12-12'); //调用方法实现转到某个月
✅ this.$refs.Calendar.ChoseMonth('2018-12-12',false); //跳转到18年12月12日 但是不选中当天
//第二个参数 false表示不选中日期 。
遇到错误---
- 遇到提示UglifyJs打包编译错误。 因为当前版本UglifyJs不知道编译es6
解决方法
npm install --save-dev babel-preset-env
然后在根目录创建一个 .babelrc 文件
在输入,
{
"presets": ["env"]
}
保存 重新build就OK了
Other
- src 下面的 App.vue 有 demo 可以参考
- 如果有其他问题或者版本上, 功能上不兼容的 邮件沟通 [email protected],请具体 标明问题。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].