Press "Enter" to skip to content

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

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


See Demo And Download

Official Website(boussadjra): Click Here

This superior jQuery/javascript plugin is developed by boussadjra. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *