Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maryayi/vue-sweet-calendar
A simple and sweet vue.js calendar
https://github.com/maryayi/vue-sweet-calendar
calendar calendar-component vue vuejs vuejs2
Last synced: 2 days ago
JSON representation
A simple and sweet vue.js calendar
- Host: GitHub
- URL: https://github.com/maryayi/vue-sweet-calendar
- Owner: maryayi
- License: mit
- Created: 2019-04-07T13:11:30.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-30T20:26:50.000Z (over 1 year ago)
- Last Synced: 2024-10-31T17:58:29.440Z (16 days ago)
- Topics: calendar, calendar-component, vue, vuejs, vuejs2
- Language: Vue
- Homepage:
- Size: 1.98 MB
- Stars: 35
- Watchers: 2
- Forks: 9
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
vue-sweet-calendar
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
```vue
// 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
}
}
```
## 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
```javascript
[
{
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
```javascript
[
{
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](https://github.com/maryayi/vue-sweet-calendar/blob/master/CONTRIBUTING.md)
## 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](https://cli.vuejs.org/config/).
### License
MIT