A Simple and Sweet Calendar Component For Vue.js

Vue Sweet Calendar is a simple and sweet vue.js calendar component.

Features

  • View multiple events
  • Fully customizable

How to make use of it:

Install & Download:

# NPM
$ npm install vue-sweet-calendar --save

Inside your .vue files

<template>
  <div id="your-component">
    <!-- Using Component -->
    <calendar
      :eventCategories="eventCategories"
      :events="events"
      ref="calendar"
    />
  </div>
</template>
<script>
// Importing Component and style
import { Calendar } from 'vue-sweet-calendar'
import 'vue-sweet-calendar/dist/SweetCalendar.css'

export default {
  name: 'YourComponentName',
  data() {
    return {
      eventCategories: [
        {
          id: 1,
          title: 'Personal',
          textColor: 'white',
          backgroundColor: 'Blue'
        },
        {
          id: 2,
          title: 'Company-wide',
          textColor: 'white',
          backgroundColor: 'red'
        },
        {
          id: 3,
          title: 'National',
          textColor: 'white',
          backgroundColor: 'green'
        }
      ],
      events: [
        {
          title: 'Event 1',
          start: '2019-04-02',
          end: '2019-04-04',
          repeat: 'monthly',
          categoryId: 1
        },
        {
          title: 'Event 2',
          start: '2019-04-08',
          end: '2019-04-09',
          repeat: 'yearly',
          categoryId: 1
        },
        {
          title: 'Event 3',
          start: '2019-04-10',
          end: '2019-04-11',
          repeat: 'never',
          categoryId: 2
        },
        {
          title: 'Event 4',
          start: '2019-04-23',
          end: '2019-04-23',
          repeat: 'monthly',
          categoryId: 2
        },
        {
          title: 'test5',
          start: '2021-06-17',
          end: '2021-06-18',
          repeat: 'weekly',
          categoryId: 3
        },
      ]
    }
  },
  methods: {
    goToday() {
      this.$refs.calendar.goToday()
    }
  },
  components: {
    Calendar // Registering Component
  }
}
</script>

Component props

propdescriptiondefault
initialDateThe first date that is showing on the calendarnull (showing current month)
firstDayOfWeekFirst day of the week (1: Sunday, 2:monday, 3:tuesday, etc)1 (Sunday)
eventCategoriesAn array of objects showing different categories of events (see an example below)[] (no categories)
eventsAn array of objects showing a list of events[] (no events)
offDaysAn array for determining which weekdays are off.[1, 7] (Saturdays and Sundays)

Component methods

propdescriptionarguments
goTodayGoing to today! (current month)

Sweet Calendar Component, vue sweet calendar Plugin/Github, calendar javascript code github


See Demo And Download

Official Website(maryayi): Click Here

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

Share