插件名称 | vue-spring-calendar |
---|---|
发布时间 | 2021年3月16日 |
插件作者 | boussadjra |
Spring Calendar是Vue.js组件,可生成完整的日历(日/周/月/年)以显示每日事件。
# NPM
$ npm i vue-spring-calendar
1.导入SpringCalendar组件。
import SpringCalendar from "vue-spring-calendar";
2.将<SpringCalendar />添加到模板。
<S<SpringCalendar year="2020" default-type="week" color="#5118ac" show="month" :events="events" locale="en" start-of-week="0" :labels-config="config" />
3.将您自己的事件添加到日历中。
export default {
name: "App",
components: {
SpringCalendar
}
data: () => ({
// configs here
config: {
title: "name",
startDate: 'start',
endDate: 'end'
},
events: [{
title: "Event 1",
startDate: "2020-12-24 08:00",
endDate: "2020-12-24 12:00"
},
{
title: "Event 2",
startDate: "2020-12-24 09:00",
endDate: "2020-12-24 12:00"
},
{
title: "Event 3",
startDate: "2020-12-24 12:00",
endDate: "2020-12-24 16:00"
},
{
title: "Event 4",
startDate: "2020-12-24 09:00",
endDate: "2020-12-24 10:00"
},
{
title: "Event 5",
startDate: "2020-12-28 09:00",
endDate: "2020-12-28 14:00"
},
{
title: "Event 6",
startDate: "2020-12-28 08:00",
endDate: "2020-12-28 10:00"
},
{
title: "Event 7",
startDate: "2020-12-28 06:00",
endDate: "2020-12-28 10:00"
},
{
title: "Event 8",
startDate: "2020-12-24 18:00",
endDate: "2020-12-24 22:00"
},
{
title: "Event 9",
startDate: "2020-12-24 18:00",
endDate: "2020-12-24 20:00"
},
{
title: "Event 10",
startDate: "2020-12-23 09:00",
endDate: "2020-12-23 20:50"
},
{
title: "Event 11",
startDate: "2020-12-27 09:00",
endDate: "2020-12-27 20:30"
},
{
title: "Event 12",
startDate: "2020-12-24 09:00",
endDate: "2020-12-24 12:30"
}]
}),
};
4.所有默认道具。
year: {
type: String,
default: String(new Date().getFullYear()),
},
locale: {
type: String,
default: "en",
},
color: {
type: String,
default: "#5118ac",
},
events: {
type: Array,
default: () => [],
},
defaultType: {
type: String,
default: "year",
},
官网:https://github.com/boussadjra/vue-spring-calendar
演示:https://www.vue365.cn/code_demo.php?id=4340
GitHub下载:https://github.com/boussadjra/vue-spring-calendar/archive/master.zip