插件名称 | 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);
});
},