💡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 { eventAfter, eventBefore, eventList, eventType = 'create/delete/drag/resize' } 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. 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. 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 |