Vue.js的日历组件 - days-calendar

Vue.js的日历组件 - days-calendar
插件名称 days-calendar
发布时间 2020年12月23日
插件作者 dollars0427

适用于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);
  });
},