🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A simple and sweet calendar component for Vue.js.

Date_Time

Documentation

vue-sweet-calendar

vue-sweet-calendar

npm version

A simple and sweet vue.js calendar

How to install

npm install vue-sweet-calendar --save 

How to use

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'         }       ],       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         }       ]     }   },   methods: {     goToday() {       this.$refs.calendar.goToday()     }   },   components: {     Calendar // Registering Component   } } </script>

Component props

prop description default
initialDate First date that is showing on calendar null (showing current month)
firstDayOfWeek First day of week (1: sunday, 2:monday, 3:tuesday, etc) 1 (Sunday)
eventCategories An array of objects showing different categories of events (see an example below) [] (no categories)
events An array of objects showing list of events [] (no events)
offDays An array for determining that which weekdays are off. [1, 7] (saturdays and sundays)

Component methods

prop description arguments
goToday Going to today! (current month) -

Example for eventCategories

[   {     id: 1,     title: 'Personal',     textColor: 'white',     backgroundColor: 'Blue'   },   {     id: 2,     title: 'Company-wide',     textColor: 'white',     backgroundColor: 'red'   } ]

Example for 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   } ]

Project setup

npm install 

Compiles and hot-reloads for development

npm run serve 

Compiles and minifies for production

npm run build 

Run your tests

npm run test 

Lints and fixes files

npm run lint 

Run your unit tests

npm run test:unit 

Customize configuration

See Configuration Reference.

License

MIT


You May Also Like