按照慣例，先上效果圖

image

image

image

react 版本同款日歷：https://github.com/TangSY/react-hash-calendar

vue-hash-calendar

• 基于 vue 2.X 開發(fā)的日歷組件
• 支持手勢滑動操作·1
• 原生 js 開發(fā)，沒引入第三方庫
• 上下滑動 切換 周/月 模式

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

安裝使用說明

npm i vue-hash-calendar

// 在入口文件中（main.js），導(dǎo)入組件庫
import vueHashCalendar from 'vue-hash-calendar'
// 引入組件CSS樣式
import 'vue-hash-calendar/lib/vue-hash-calendar.css'
// 注冊組件庫
Vue.use(vueHashCalendar)

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

CDN 方式引入

//在 index.html 加入以下兩個 CDN 鏈接：
js CDN：https://cdn.jsdelivr.net/npm/vue-hash-calendar@{version}/lib/vue-hash-calendar.umd.min.js
css CDN: https://cdn.jsdelivr.net/npm/vue-hash-calendar@{version}/lib/vue-hash-calendar.css

//然后在 webpack 配置中，加入以下配置。
externals: {
'vue-hash-calendar': 'VueHashCalendar'
},

Demo

qr_code

或者請用瀏覽器的手機模式查看：https://www.hxkj.vip/demo/calendar/

• ?? 覺得好用可以給一個 star 哦~~ ??

github地址：https://github.com/TangSY/vue-hash-calendar

API

事件

插槽 Slot

版本記錄

changelog

Other

• 在 dialog 模式中，如何顯示日歷組件？注意使用 .sync 修飾符

<vue-hash-calendar :visible.sync="isShowCalendar"></vue-hash-calendar>

//設(shè)置為true
this.isShowCalendar = true;

• 想要返回標(biāo)準(zhǔn)的英文格式日期，format 屬性應(yīng)該怎樣寫？ MM DD,YY at hh:mm F

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

• 想要返回 12 小時制的日期，format 屬性應(yīng)該怎樣寫？ 在格式化字符串后面加上大寫 F

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

• day slot 的基本用法

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

• 能否通過外部的某個按鈕來觸發(fā)日歷的展開和收起

可以在外部通過修改 isShowWeekView 的值來控制日歷的收起與展開

• 如何設(shè)置禁用日期？ 可參考源碼中 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
}

• 如果有其他問題， 或者功能上不兼容的?？梢脏]件溝通 t@tsy6.com，或者 github 提交 issue。