Skip to content

maryayi/vue-sweet-calendar

Repository files navigation

vue-sweet-calendar

vue-sweet-calendar

npm version

A simple and sweet vue.js calendar

Features

  • Showing Multiple-Events
  • Fully customizable

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'
        },
        {
          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

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'
  },
  {
    id: 3,
    title: 'National',
    textColor: 'white',
    backgroundColor: 'green'
  }
]

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
  },
  {
    title: 'Event 5',
    start: '2021-06-17',
    end: '2021-06-18',
    repeat: 'weekly',
    categoryId: 3
  }
]

Contributing

Visit CONTRIBUTING Page

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