npm package: @stsdti/funky-calendar
Description: A library for Vue3 used for Vacation planing. It shows a full year of months and allows creating events
Author: STS - DTI
Latest version: 0.0.4

## 💡About 
This is a Vue3 component library that allows managing events on a calendar monthly view.


## 🚀 Features 
- ✅ Blazing fast performance
- ✅ Beautiful minimalist UI
- ✅ Create, delete, resize and move events, all via smooth mouse events
- ✅ Highly extenisble and user customizable
- ✅ White and dark-theme support

## 🔧Usage 
1. Install `npm i --save @sts/funky-calendar`
2. Register the plugin. Inside your app entry point `app.js`
```
import '@sts/funky-calendar/dist/funky-calendar.css'
import funkyCalendar from '@sts/funky-calendar'

...

const app = createApp(App)
app.use(funkyCalendar)

```
3. Use the component:
```
    <funky-calendar
      v-model="eventList"
    />
```

## API
### Props

| Prop            | Description                                                                                                                                                                                                                                                                          |
|-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| v-model         | Array of `events`. `Event` structure explained below. Offers 2 way data binding                                                                                                                                                                                                      |
| months          | Number of month-view grids to show                                                                                                                                                                                                                                                   |
| startDate       | Date instance of the first month grid                                                                                                                                                                                                                                                |
| isChangeAllowed | Function called after each event change. Has one param containing information about the change <br/>``` { eventAfter, eventBefore, eventList, eventType = 'create/delete/drag/resize' }  ```  <br/>Return `true` if change is allowed, and `false` if you want this change reverted. |
| getEmptyEvent   | Function called when creating a new event. Received one param `{ eventList }` and return an object with any desired data (`{ background: red, type: 3, etc }`).                                                                                                                  |

### V-Model `Event` structure:
- Every object in the v-model array can have these keys:

| Key        | Description                                                                                                                                                                                                                                                                                                                                              |                                          |
|------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------|
| start      | Start date of the event                                                                                                                                                                                                                                                                                                                                  | Required. Date                           |
| end        | End date of the event                                                                                                                                                                                                                                                                                                                                    | Required. Date                           |
| background | Background color of the event                                                                                                                                                                                                                                                                                                                            | Optional. Hex String. Default = `#3788d8` |
| color      | Text color of the event                                                                                                                                                                                                                                                                                                                                  | Optional. Hex String. Default = `#FFFFFF` |
| text       | If slot not provided, use this to easily draw text on events                                                                                                                                                                                                                                                                                             | Optional. String                         |
| tooltip    | Text that should be displayed in a popup tooltip when hovering over events                                                                                                                                                                                                                                                                               | Optional. String                         |
| disabled    | Make the event non interactive. Helpful for locked events.                                                                                                                                                                                                                                                                                               | Optional. Boolean. Default = `false`     |
| swimlane    | Attempt to place this event in a given swimlane. Swimlane 0 is on top, 1 is below it etc. <br/>Without it, events get rendered from oldest to newest. When 2 events start in the same day the longer one is one top. All other events try to go in the first topmost space they fit.<br/>  You can use this to place a certain event-type always on top. | Optional. Integer.            |



### Emits

| Emit   | Description                                                             |
|--------|-------------------------------------------------------------------------|
| @event | Fired on event double click. Returns the event touched as the 1st param |



### Slots
| Slot      | Description                                                                                 |
|------------------|---------------------------------------------------------------------------------------------|
| #event="{event}" | Scoped slot providing the `event` data. Use it to draw text / images over the length of an  |