Under everyone’s urging, day after day, vuE3 – Hash – Calendar was finally born today.

As usual, renderings first

Demo

Please view it in mobile mode in your browser: www.hxkj.vip/demo/calend…

• 🎉 feel good can give a star oh ~~ 🎉

The warehouse address

• Github:github.com/TangSY/vue3…
• Gitee: gitee.com/HashTang/vu…

Other versions

• Vue 2.x version: github.com/TangSY/vue-…
• React version: github.com/TangSY/reac…

vue3-hash-calendar

• Calendar component developed based on Vue 3.X
• Support gesture sliding operation
• Native JS development, no third party library introduced
• Supports fast switching between year and month
• Swipe up and down to switch to weekly/monthly mode
  

  [Week mode] Slide left and right to switch to last week/next week [Month mode] Slide left and right to switch to last month/next month

Installation instructions

npm i -S vue3-hash-calendar

// In the import file (main.js), import the component library
import vueHashCalendar from 'vue3-hash-calendar'
// Introduce component CSS styles
import 'vue3-hash-calendar/lib/style.css'
const app = createApp(App);
// Register the component library
app.use(vueHashCalendar);
Copy the code

// Import components in VUE files
<vue-hash-calendar />
Copy the code

CDN import

// Add the following two CDN links to index.html: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

// Then in the WebPack configuration, add the following configuration.
externals: {
'vue-hash-calendar': 'VueHashCalendar'
},
Copy the code

API

The event

Slot Slot.

Method

Other

• How do I display the calendar component in Dialog mode? Pay attention to usev-model:visible

<vue-hash-calendar v-model:visible="isShowCalendar"></vue-hash-calendar>

// Set to true
this.isShowCalendar = true;
Copy the code

• CDN introduced components, why some attributes do not work?

In non-Webpack development mode, attribute names cannot be humped. For example, write isShowAction as is-show-action.Copy the code

• If you want to return a standard English format date, how should you write the format attribute?MM DD,YY at hh:mm F

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

• If you want to return a 12-hour date, how should you write the format attribute? Uppercase the formatting stringF

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

• Basic usage of day slot

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

Copy the code

• Can be triggered by an external button to expand and close the calendar

You can control the collapse and expansion of the calendar externally by changing the value of isShowWeekViewCopy the code

• How do I set the disable date? Refer to the source codeApp.vuefile

For example, disable all dates before today

/** Vue template file **/
<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
}
Copy the code

• How do I set the disable date? Refer to the source codeApp.vuefile

// For example, disable the time before now

/** Vue template file **/
<vue-hash-calendar :disabled-time="disabledTime"></vue-hash-calendar>

/** Vue methods **/
disabledTime(date) { // Disable time
  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
}
Copy the code

conclusion

Author: HashTang

Personal Space: HXKJ.VIP

Friends passing by, in the nuggets massive article library, can have the honor to come in and see here, thank you very much!

Don’t forget to like, follow, comment and support

If there are other problems, or functional incompatibilities. You can email [email protected] or submit an issue on Github.