在大家的催更下，鸽了一天又一天，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.js
css 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>

// 设置为 true
this.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。