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