Full Calendar To Show Daily Events – Spring Calendar

Spring Calendar is a Vue.js component that generates a full calendar (day/week/month/year) to show daily events.

How to use it:

1. Import the SpringCalendar component.

import SpringCalendar from "vue-spring-calendar";

2. Add the <SpringCalendar /> to the template.

<SpringCalendar year="2020" default-type="week" color="#5118ac" show="month" :events="events" locale="en" start-of-week="0" :labels-config="config" />

3. Add your own events to the calendar.

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. All default props.

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",
},

Preview:

Download Details:

Author: boussadjra

Live Demo: https://boussadjra.github.io/vue-spring-calendar/

Download Link: https://github.com/boussadjra/vue-spring-calendar/archive/master.zip

Official Website: https://github.com/boussadjra/vue-spring-calendar

Install & Download:

# NPM
$ npm i vue-spring-calendar