@stsdti/funky-calendar 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +72 -0
- package/dist/funky-calendar.css +13577 -0
- package/dist/funky-calendar.es.js +13209 -0
- package/dist/funky-calendar.es.js.map +1 -0
- package/package.json +46 -0
package/README.md
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
## 💡About
|
|
2
|
+
This is a Vue3 component library that allows managing events on a calendar monthly view.
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
## 🚀 Features
|
|
6
|
+
- ✅ Blazing fast performance
|
|
7
|
+
- ✅ Beautiful minimalist UI
|
|
8
|
+
- ✅ Create, delete, resize and move events, all via smooth mouse events
|
|
9
|
+
- ✅ Highly extenisble and user customizable
|
|
10
|
+
- ✅ White and dark-theme support
|
|
11
|
+
|
|
12
|
+
## 🔧Usage
|
|
13
|
+
1. Install `npm i --save @sts/funky-calendar`
|
|
14
|
+
2. Register the plugin. Inside your app entry point `app.js`
|
|
15
|
+
```
|
|
16
|
+
import '@sts/funky-calendar/dist/funky-calendar.css'
|
|
17
|
+
import funkyCalendar from '@sts/funky-calendar'
|
|
18
|
+
|
|
19
|
+
...
|
|
20
|
+
|
|
21
|
+
const app = createApp(App)
|
|
22
|
+
app.use(funkyCalendar)
|
|
23
|
+
|
|
24
|
+
```
|
|
25
|
+
3. Use the component:
|
|
26
|
+
```
|
|
27
|
+
<funky-calendar
|
|
28
|
+
v-model="eventList"
|
|
29
|
+
/>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## API
|
|
33
|
+
### Props
|
|
34
|
+
|
|
35
|
+
| Prop | Description |
|
|
36
|
+
|-----------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
37
|
+
| v-model | Array of `events`. `Event` structure explained below. Offers 2 way data binding |
|
|
38
|
+
| months | Number of month-view grids to show |
|
|
39
|
+
| startDate | Date instance of the first month grid |
|
|
40
|
+
| 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. |
|
|
41
|
+
| 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 }`). |
|
|
42
|
+
|
|
43
|
+
### V-Model `Event` structure:
|
|
44
|
+
- Every object in the v-model array can have these keys:
|
|
45
|
+
|
|
46
|
+
| Key | Description | |
|
|
47
|
+
|------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------|
|
|
48
|
+
| start | Start date of the event | Required. Date |
|
|
49
|
+
| end | End date of the event | Required. Date |
|
|
50
|
+
| background | Background color of the event | Optional. Hex String. Default = `#3788d8` |
|
|
51
|
+
| color | Text color of the event | Optional. Hex String. Default = `#FFFFFF` |
|
|
52
|
+
| text | If slot not provided, use this to easily draw text on events | Optional. String |
|
|
53
|
+
| tooltip | Text that should be displayed in a popup tooltip when hovering over events | Optional. String |
|
|
54
|
+
| disabled | Make the event non interactive. Helpful for locked events. | Optional. Boolean. Default = `false` |
|
|
55
|
+
| 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. |
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
### Emits
|
|
60
|
+
|
|
61
|
+
| Emit | Description |
|
|
62
|
+
|--------|-------------------------------------------------------------------------|
|
|
63
|
+
| @event | Fired on event double click. Returns the event touched as the 1st param |
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
### Slots
|
|
68
|
+
| Slot | Description |
|
|
69
|
+
|------------------|---------------------------------------------------------------------------------------------|
|
|
70
|
+
| #event="{event}" | Scoped slot providing the `event` data. Use it to draw text / images over the length of an |
|
|
71
|
+
|
|
72
|
+
|