催更.png

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

按照惯例，先上效果图

calendar.gif

week.gif

yearmonth.gif

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 开发，没引入第三方库
• 支持快速切换年份和月份
• 上下滑动 切换 周/月 模式

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

安装使用说明

vue3-hash-calendar

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。