Spring Full Calendar To Show Daily Events Based on Vue.js

Spring Calendar is a Vue-based component that provides full calendar functionality that displays daily events.

fullcalendar get current view, fullcalendar show time range, fullcalendar week view, fullcalendar display event time example, fullcalendar custom month view

How to make use of it:

Install and download:

# NPM
$ npm i vue-spring-calendar

1. Import the SpringCalendar component.

import SpringCalendar from "vue-spring-calendar";

2. Add <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 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 props are default.

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

Full Calendar To Show Daily Events, Vue Spring Calendar Plugin/Github, initialize fullcalendar javascript