适用于Vue和moment.js的简单且可自定义的日历组件。

安装和下载：

# Yarn
$ yarn add days-calendar

# NPM
$ npm install days-calendar --save

用法

从days-calendar导入模块，然后将其注册到Vue：

基础

import DaysCalendar from 'days-calendar';

new Vue({
  el: '#your-dom-element',
   components: {
      Calendar: DaysCalendar
   }
})

定制模态

默认情况下，“天数日历”将显示包含事件内容的模式。如果要自定义模式模板，则可以这样调用日历：

   <Calendar>
     <div slot="modal-content">
       <h1>Hello World!</h1>
     </div>
   </Calendar>

如果要在自定义模式中使用日对象，则应将renderDay函数传递给日历，如下所示：

<Calendar :renderDay="getDate">
 <div slot="modal-content">
   {{day.content}}
 </div>
</Calendar>

getDate: function(day){
  this.day = day;
  return day;
}

否则将不允许您访问当天的信息。

禁用日

如果您不希望用户在某一天单击，则可以将renderDays函数传递给日历，如下所示：

<Calendar :renderDays="renderDays"></Calendar>

renderDays: function(days){
  return new Promise((resolve, reject) => {
    for(let i = 0; i < days.length; i++){
      const weekday = days[i].date.weekday();
      //If it is Tuesday, disable it
      if(weekday == 2){
        days[i].disabled = true;
      }
    }
     resolve(days);
  });
},

---

官网：https://github.com/dollars0427/days-calendar

演示：https://www.vue365.cn/code_demo.php?id=3569

GitHub下载：https://github.com/dollars0427/days-calendar/archive/master.zip