@daypilot/daypilot-lite-vue 3.8.0 → 3.10.1
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 +142 -13
- package/daypilot-vue.min.js +7 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,21 +1,150 @@
|
|
|
1
|
-
DayPilot Lite for Vue
|
|
2
|
-
===================================
|
|
1
|
+
# DayPilot Lite for Vue
|
|
3
2
|
|
|
4
|
-
|
|
3
|
+
[DayPilot Lite for JavaScript](https://javascript.daypilot.org/open-source/) is a library of JavaScript/HTML5 event calendar/scheduler components that can display day/week/month calendar views. It includes a Vue version.
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
--------
|
|
5
|
+
## What's New
|
|
8
6
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
[Release History](https://javascript.daypilot.org/daypilot-lite-history/)
|
|
8
|
+
|
|
9
|
+
## Online Demo
|
|
10
|
+
|
|
11
|
+
[](https://javascript.daypilot.org/demo/lite/)
|
|
12
|
+
|
|
13
|
+
[Online Demo](https://javascript.daypilot.org/demo/lite/)
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
* Calendar/scheduler views: day, week, work week, month, resource calendar
|
|
12
18
|
* Event creation using drag and drop
|
|
19
|
+
* Drag and drop event moving and resizing
|
|
13
20
|
* Integrated delete icon
|
|
21
|
+
* Event duration bar with customizable color
|
|
22
|
+
* Date picker with free/busy days highlighting, free-hand range selection, day cell customization
|
|
23
|
+
* CSS themes (use theme builder to create your own theme)
|
|
24
|
+
* Event customization (text, HTML, colors...)
|
|
25
|
+
* Built-in XSS protection
|
|
26
|
+
* Localization support
|
|
27
|
+
* TypeScript definitions
|
|
28
|
+
|
|
29
|
+
## Tutorials
|
|
30
|
+
|
|
31
|
+
### Vue Weekly Calendar Tutorial
|
|
32
|
+
|
|
33
|
+
[](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)
|
|
34
|
+
|
|
35
|
+
[Vue.js Weekly Calendar Tutorial (Open-Source)](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)
|
|
36
|
+
How to create a weekly calendar web application using a Vue calendar component. The tutorial includes a Vue.js project with JavaScript source code for download.
|
|
37
|
+
|
|
38
|
+
### Vue Resource Calendar
|
|
39
|
+
|
|
40
|
+
[](https://code.daypilot.org/66224/vue-resource-calendar-open-source)
|
|
41
|
+
|
|
42
|
+
[Vue Resource Calendar (Open-Source)](https://code.daypilot.org/66224/vue-resource-calendar-open-source)
|
|
43
|
+
Use the Vue calendar component to display an interactive schedule for multiple resources.
|
|
44
|
+
|
|
45
|
+
### Vue Date Picker Tutorial
|
|
46
|
+
|
|
47
|
+
[](https://code.daypilot.org/99014/vue-date-picker-with-free-busy-highlighting)
|
|
48
|
+
|
|
49
|
+
[Vue Date Picker with Free/Busy Highlighting (Open-Source)](https://code.daypilot.org/99014/vue-date-picker-with-free-busy-highlighting)
|
|
50
|
+
Use the Vue date picker component (Navigator) to change the current date. The date picker can highlight dates that already have events or are not available.
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
## Example
|
|
54
|
+
|
|
55
|
+
```vue
|
|
56
|
+
<template>
|
|
57
|
+
<DayPilotCalendar id="dp" :config="config" ref="calendar" />
|
|
58
|
+
</template>
|
|
59
|
+
|
|
60
|
+
<script>
|
|
61
|
+
import {DayPilot, DayPilotCalendar} from '@daypilot/daypilot-lite-vue'
|
|
62
|
+
|
|
63
|
+
export default {
|
|
64
|
+
name: 'Calendar',
|
|
65
|
+
data: function() {
|
|
66
|
+
return {
|
|
67
|
+
config: {
|
|
68
|
+
viewType: "Week",
|
|
69
|
+
startDate: "2022-02-28",
|
|
70
|
+
durationBarVisible: false,
|
|
71
|
+
onTimeRangeSelected: async (args) => {
|
|
72
|
+
const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
|
|
73
|
+
const dp = args.control;
|
|
74
|
+
dp.clearSelection();
|
|
75
|
+
if (modal.canceled) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
dp.events.add({
|
|
79
|
+
start: args.start,
|
|
80
|
+
end: args.end,
|
|
81
|
+
id: DayPilot.guid(),
|
|
82
|
+
text: modal.result
|
|
83
|
+
});
|
|
84
|
+
},
|
|
85
|
+
onEventMoved: () => {
|
|
86
|
+
console.log("Event moved");
|
|
87
|
+
},
|
|
88
|
+
onEventResized: () => {
|
|
89
|
+
console.log("Event resized");
|
|
90
|
+
},
|
|
91
|
+
},
|
|
92
|
+
}
|
|
93
|
+
},
|
|
94
|
+
props: {
|
|
95
|
+
},
|
|
96
|
+
components: {
|
|
97
|
+
DayPilotCalendar,
|
|
98
|
+
},
|
|
99
|
+
computed: {
|
|
100
|
+
calendar() {
|
|
101
|
+
return this.$refs.calendar.control;
|
|
102
|
+
}
|
|
103
|
+
},
|
|
104
|
+
methods: {
|
|
105
|
+
loadEvents() {
|
|
106
|
+
// placeholder for an HTTP call
|
|
107
|
+
const events = [
|
|
108
|
+
{
|
|
109
|
+
id: 1,
|
|
110
|
+
start: "2022-02-28T10:00:00",
|
|
111
|
+
end: "2022-02-28T11:00:00",
|
|
112
|
+
text: "Event 1",
|
|
113
|
+
backColor: "#6aa84f",
|
|
114
|
+
borderColor: "#38761d",
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
id: 2,
|
|
118
|
+
start: "2022-02-28T13:00:00",
|
|
119
|
+
end: "2022-02-28T16:00:00",
|
|
120
|
+
text: "Event 2",
|
|
121
|
+
backColor: "#f1c232",
|
|
122
|
+
borderColor: "#bf9000",
|
|
123
|
+
},
|
|
124
|
+
];
|
|
125
|
+
this.calendar.update({events});
|
|
126
|
+
},
|
|
127
|
+
},
|
|
128
|
+
mounted() {
|
|
129
|
+
this.loadEvents();
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
</script>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## Documentation
|
|
136
|
+
|
|
137
|
+
* [Vue weekly calendar](https://doc.daypilot.org/calendar/vue-js/)
|
|
138
|
+
* [Vue monthly calendar](https://doc.daypilot.org/month/vue-js/)
|
|
139
|
+
* [Vue date picker](https://doc.daypilot.org/navigator/vue-js/)
|
|
140
|
+
|
|
141
|
+
## CSS Themes
|
|
142
|
+
|
|
143
|
+
The [Theme Designer](https://themes.daypilot.org/) lets you create and download your own CSS theme using an online visual tool.
|
|
144
|
+
|
|
145
|
+
## License
|
|
14
146
|
|
|
15
|
-
License
|
|
16
|
-
-------
|
|
17
147
|
Apache License 2.0
|
|
18
148
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
https://javascript.daypilot.org/
|
|
149
|
+
|
|
150
|
+
|