A Simple and Sweet Calendar Component For Vue.js

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


  • View multiple events
  • Fully customizable

Table of Contents

How to make use of it:

Install & Download:

$ npm install vue-sweet-calendar --save

Inside your .vue files

  <div id="your-component">
    <!-- Using Component -->
// 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() {
  components: {
    Calendar // Registering Component

Component props

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

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.

Related Posts


Create Custom HTML Terminals With Pure JavaScript | shell.js

Custom HTML Terminals is A JavaScript library to create HTML terminals on web pages. The shell js JavaScript library offers a straightforward method to create Ubuntu, OS X,…


An Accessible Touch-enabled Slider Web Component | fg-carousel

fg-carousel Slider – A simple & modern slider web component to create versatile, accessible, touch-enabled picture carousels utilizing CSS scroll snap, Custom Element, and Intersection Observer API….


A Lightweight and Efficient Tags Input Component in Vanilla JS | tagify

tagify transforms an input field or textarea into a tags component, in an easy and customizable way, with great performance and a small code footprint, full of…


A Lightweight Library to Copy Text to Clipboard | CopyJS

CopyJS is a lightweight JavaScript library that allows you to copy plain text or HTML content to the clipboard. Must Read: Tiny Library for Copy Text In…


WYSIWYG Rich Text Editor For Angular Using ProseMirror

NgxEditor WYSIWYG Rich Text Editor for Angular using ProseMirror. Based on the iconic font Ngx-Bootstrap and Font Awesome. ngx-editor is a simple rich text editor for Angular applications…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….