Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/GeoffZhu/vue-event-calendar
A simple events calendar for Vue2, no dependencies except Vue2.
https://github.com/GeoffZhu/vue-event-calendar
event-calendar vue vue-calendar
Last synced: 6 days ago
JSON representation
A simple events calendar for Vue2, no dependencies except Vue2.
- Host: GitHub
- URL: https://github.com/GeoffZhu/vue-event-calendar
- Owner: GeoffZhu
- Created: 2016-12-06T05:51:19.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T19:03:14.000Z (over 1 year ago)
- Last Synced: 2024-10-28T16:25:27.148Z (11 days ago)
- Topics: event-calendar, vue, vue-calendar
- Language: Vue
- Homepage: http://geoffzhu.cn/vue-event-calendar/
- Size: 1.59 MB
- Stars: 635
- Watchers: 28
- Forks: 228
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-github-vue - vue-event-calendar - 简单小巧的事件日历组件 (UI组件)
- awesome-github-vue - vue-event-calendar - 简单小巧的事件日历组件 (UI组件)
- awesome - vue-event-calendar - 简单小巧的事件日历组件 (UI组件)
- awesome-vue - vue-event-calendar - event-calendar?style=social) - 简单小巧的事件日历组件 (UI组件)
README
# vue-event-calendar
> A simple events calendar for Vue2, no dependencies except Vue2. responsive & mobile first.
> [Live Demo Here](http://geoffzhu.cn/vue-event-calendar/)
[](https://www.npmjs.com/package/vue-event-calendar)
[中文文档](https://github.com/GeoffZhu/vue-event-calendar/blob/master/README.zh.md)
## Requirements
- vue: ^2.0.0
## Usage
#### install
``` sh
npm install vue-event-calendar --save
```
#### main.js
```javascript
import 'vue-event-calendar/dist/style.css' //^1.1.10, CSS has been extracted as one file, so you can easily update it.
import vueEventCalendar from 'vue-event-calendar'
// locale can be 'zh' , 'en' , 'es', 'pt-br', 'ja', 'ko', 'fr', 'it', 'ru', 'de', 'vi', 'ua', 'no, 'no-nn'
Vue.use(vueEventCalendar, {locale: 'en'})
```
#### file.vue
```vue
export default {
data () {
return {
demoEvents: [{
date: '2016/11/12', // Required
title: 'Foo' // Required
}, {
date: '2016/12/15',
title: 'Bar',
desc: 'description',
customClass: 'disabled highlight' // Custom classes to an calendar cell
}]
}
}
}
```
## Custom date title
```vue
```
In most cases, the default date string is enough，but when you want a custom date title, you can give a prop ```title```.
It is important to noticed that the title will be replaced with a static String you passed in. You need to monitor the dayChanged event and change the title by youself.
## Customization event template
If you want customization event template. required Vue: ^2.1.0. Because I use new feature(Scoped Slots) of ^2.1.0
```vue
{{event}}
export default {
data () {
return {
demoEvents: [{
date: '2016/12/15',
title: 'eat',
desc: 'longlonglong description'
},{
date: '2016/11/12',
title: 'this is a title'
}]
}
}
}
```
## Component Events
Can handle two Events, @day-changed and @month-changed, callback params like ``` {date: '2017/06/23', events: []} ```.
```javascript
```
## Options
```
// When Vue.use, options
{
locale: 'en',
color: 'black', //Set main color
className: 'Custom className for current clicked date', // (default: 'selected-day')
weekStartOn: 'week Start on which day' // Can be: 1, 2, 3, 4, 5, 6, 0 (default: 0)
}
```
## API
```javascript
// NextMonth
this.$EventCalendar.nextMonth()
```
```javascript
// PreMonth
this.$EventCalendar.preMonth()
```
```javascript
//ToDate
this.$EventCalendar.toDate('2016/11/12')
```
More in [Demo Folder](https://github.com/GeoffZhu/vue-event-calendar/tree/master/demo)
## Develop
```
npm run dev //develop
npm run build //production
```
## Change log
##### 1.3.6 -> 1.4.0
- Remove today background, use a small dot below the date
- Increase the selected date style
##### 1.4.0 -> 1.4.8
- Add week start on
## License
[MIT](https://opensource.org/licenses/MIT)