在大家的催更下，鸽了一天又一天，vue3-hash-calendar 终于在明天诞生了。

依照常规，先上效果图

Demo

扫描上方二维码或者请用浏览器的手机模式查看：https://www.hxkj.vip/demo/calendar/

• 感觉好用能够给一个 star 哦~~

仓库地址

• github：https://github.com/TangSY/vue3-hash-calendar
• 码云 gitee：https://gitee.com/HashTang/vue3-hash-calendar

其余版本

• vue 2.x 版本：https://github.com/TangSY/vue-hash-calendar
• react 版本：https://github.com/TangSY/react-hash-calendar

vue3-hash-calendar

• 基于 vue 3.X 开发的日历组件
• 反对手势滑动操作
• 原生 js 开发，没引入第三方库
• 反对疾速切换年份和月份

• 高低滑动 切换 周/月 模式

  【周模式中】 左右滑动可切换 上一周/下一周
  【月模式中】 左右滑动可切换 上一月/下一月

装置应用阐明

npm i -S vue3-hash-calendar// 在入口文件中（main.js），导入组件库import vueHashCalendar from 'vue3-hash-calendar'// 引入组件CSS款式import 'vue3-hash-calendar/lib/style.css'const app = createApp(App);// 注册组件库app.use(vueHashCalendar);

// 在VUE文件中引入组件<vue-hash-calendar />

CDN 形式引入

//在 index.html 退出以下两个 CDN 链接：js CDN：https://cdn.jsdelivr.net/npm/vue3-hash-calendar@{version}/lib/vue-hash-calendar.umd.jscss CDN: https://cdn.jsdelivr.net/npm/vue3-hash-calendar@{version}/lib/style.css//而后在 webpack 配置中，退出以下配置。externals: {'vue-hash-calendar': 'VueHashCalendar'},

API

事件

插槽 Slot

办法 Method

Other

• 在 dialog 模式中，如何显示日历组件？留神应用 v-model:visible

<vue-hash-calendar v-model:visible="isShowCalendar"></vue-hash-calendar>//设置为truethis.isShowCalendar = true;

• cdn 形式引入的组件，为什么有些属性不起作用？

在非 webpack 开发模式下，属性名称不能应用驼峰命名。例如：isShowAction 须要写成 is-show-action.

• 想要返回规范的英文格局日期，format 属性应该怎么写？ MM DD,YY at hh:mm F

<vue3-hash-calendar format="MM DD,YY at hh:mm F" />

• 想要返回 12 小时制的日期，format 属性应该怎么写？ 在格式化字符串前面加上大写 F

<vue3-hash-calendar format="YY/MM/DD hh:mm F" />

• day slot 的根本用法

https://github.com/TangSY/vue3-hash-calendar/blob/dev/examples/FirstDayDemo.vue

• 是否通过内部的某个按钮来触发日历的开展和收起

能够在内部通过批改 isShowWeekView 的值来管制日历的收起与开展

• 如何设置禁用日期？ 可参考源码中 App.vue 文件

// 例如禁用今日之前的所有日期/** vue模板文件 **/<vue-hash-calendar :disabled-date="disabledDate"></vue-hash-calendar>/** vue methods 中的办法 **/disabledDate(date) {    let timestamp = date.getTime();    if (timestamp > new Date().getTime()) {        return true    }    return false}

• 如何设置禁用日期？ 可参考源码中 App.vue 文件

// 例如禁用当初之前的工夫/** vue模板文件 **/<vue-hash-calendar :disabled-time="disabledTime"></vue-hash-calendar>/** vue methods 中的办法 **/disabledTime(date) { // 禁用的工夫  let hours = date.getHours()  let minute = date.getMinutes()  let hoursNow = new Date().getHours()  let minuteNow = new Date().getMinutes()  if (hours < hoursNow || (hours === hoursNow && minute < minuteNow)) {    return true  }  return false}

结语

作者：HashTang

个人空间：hxkj.vip

转载请注明出处：https://juejin.cn/post/7069756348971352078

别忘了点赞、关注、评论，反对一下哦~

如果有其余问题， 或者性能上不兼容的。能够邮件沟通 t@tsy6.com，或者 github 提交 issue。