# louloue-calendar
> Fork of vue-fullcalendar.
Latest version **1.1.10** (published 2017-05-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install louloue-calendar
pnpm add louloue-calendar
yarn add louloue-calendar
bun add louloue-calendar
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.10 |
| Published | 2017-05-08 |
| First published | 2017-05-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1502 |
| Author | Michaël Gungaram |
| Maintainers | michat |
| Keywords | vue, fullcalendar |
## Links
- npm: https://www.npmjs.com/package/louloue-calendar
- Repository: https://github.com/Wanderxx/vue-fullcalendar
- Homepage: https://github.com/Wanderxx/vue-fullcalendar#readme
- Issues: https://github.com/Wanderxx/vue-fullcalendar/issues
- npm.io page: https://npm.io/package/louloue-calendar
## Dependencies (3)
- [vue](https://npm.io/package/vue.md) ^2.1.8
- [es6-promise](https://npm.io/package/es6-promise.md) ^4.0.5
- [vue-fullcalendar](https://npm.io/package/vue-fullcalendar.md) ^1.0.5
## Recent versions
- 1.1.10 (latest) — 2017-05-08
- 1.1.9 — 2017-05-08
## README
##Louloue-calendar
[]()
[]()
Louloue-Calendar is a fork of the very useful vue-fullcalendar (https://github.com/Wanderxx/vue-fullcalendar). Don't hesitate to star their project!
### install
npm i louloue-calendar
### Usage
Register component globally
```javascript
// Your entry index.js
import Vue from 'vue'
import App from './App'
import fullCalendar from 'louloue-calendar';
Vue.component('full-calendar', fullCalendar)
// Vue2
new Vue({
el : '#app',
render: h => h(App),
template : '',
components : {
App
}
})
//Vue1
new Vue({
el : 'body',
components : {
App
}
})
```
or register locally in your `.vue` file
### Example
```html
```
```javascript
var demoEvents = [
{
title : 'Sunny Out of Office',
start : '2016-08-25',
end : '2017-07-27'
}
]
export default {
data () {
return {
fcEvents : demoEvents
}
},
components : {
'full-calendar': require('vue-fullcalendar')
}
}
```
A sample screenshot is here,
### Docs
#### props
1. **events** : Events will be displayed on the calendar
```javascript
events = [
{
title : 'event1',
start : '2016-07-01'，
cssClass : 'family',
YOUR_DATA : {}
},
{
title : 'event2',
start : '2016-07-02',
end : '2016-07-03',
cssClass : ['family', 'career']
YOUR_DATA : {}
}
]
```
- `title` is the title of this event, will be displayed on calendar
- `start` is the start day of this event
- `end` is the end day of this event
- `cssClass` is css class of each event label, such that, you will be able to set different colors, style ..
- `YOUR_DATA` You can define as many data you want as possible
2. **locale** : langague of things like monthNames weekNames and titleFormat. Support same locales than [moment.js](http://momentjs.com/docs/#/i18n/)
- `default` : `en`
3. **firstDay** : first day of the week, `Number`, default: 0 (Sunday)
Sunday=0, Monday=1, Tuesday=2, etc.
Any number smaller than 0 or larger than 6 will be set to 0.
- `default` : 0
#### events
fc will dispatch some events out.
1. **changeMonth** : Every time you click arrow to next/last month, fc will dispatch **changeMonth**
```javascript
this.$dispatch('changeMonth', start, end, current)
```
- `start` is the first day of current monthView (`moment` object)
- `end` is the last day of current monthView (`moment` object)
- `current` is the first day of current month (`moment` object)
2. **eventClick** : Every time you click a event, fc will dispatch **eventClick**
```javascript
this.$dispatch('eventClick', event, jsEvent, pos)
```
- `event` is an Event object hold the event's information
- `jsEvent` holds the native javascript event
- `pos` is the relative coordinates of fc
3. **dayClick** : fc dispatch it when you click a day slot.
```javascript
this.$dispatch('eventClick', day, jsEvent)
```
- `date` is a Date Object of the day you click (`moment` object)
- `jsEvent` holds the native javascript event
4. **moreClick** : fc dispatch it when you click a `more` button
- `date` is the date corresponding to the "more" clicked (`moment` object)
- `events` is the list of events that will be in the box
- `jsEvent` holds the native javascript event
#### slots
You will be able to register your own stuff by using slots
1. **fc-header-left** : top left area
2. **fc-header-right** : top right area. In my case, I added a filter menu there
3. **fc-body-card** : inside the body area, usually working with `EventClick`, to display a event detail
###END
---
_Source: https://npm.io/package/louloue-calendar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._