@daypilot/daypilot-lite-vue 3.30.0 → 3.30.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.
Files changed (4) hide show
  1. package/README.md +86 -47
  2. package/daypilot-vue.min.d.ts +5 -0
  3. package/daypilot-vue.min.js +8 -8
  4. package/package.json +1 -1
package/README.md CHANGED
@@ -1,6 +1,13 @@
1
1
  # DayPilot Lite for Vue
2
2
 
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.
3
+ [DayPilot Lite for JavaScript](https://javascript.daypilot.org/open-source/) is a library of JavaScript/HTML5 scheduling components that can display calendar/scheduler UI:
4
+ * day
5
+ * week
6
+ * month
7
+ * resource calendar (resources as columns)
8
+ * custom number of days as columns
9
+
10
+ This is the DayPilot Lite for Vue package.
4
11
 
5
12
  ## What's New
6
13
 
@@ -25,27 +32,50 @@ Customize the scheduling components using an online [UI Builder](https://builder
25
32
  * Event duration bar with customizable color
26
33
  * Date picker with free/busy days highlighting, free-hand range selection, day cell customization
27
34
  * CSS themes (use theme builder to create your own theme)
28
- * Event customization (text, HTML, colors...)
35
+ * Event customization (text, HTML, icons, colors, Vue components...)
36
+ * Grid cell customization
29
37
  * Built-in XSS protection
30
38
  * Localization support
31
39
  * TypeScript definitions
40
+ * Vue template support
32
41
 
33
42
  ## Tutorials
34
43
 
35
- ### Vue Weekly Calendar Tutorial
44
+ ### Vue Calendar with Day/Week/Month Views
36
45
 
37
- [![Vue Weekly Calendar](https://static.daypilot.org/npm/202207/vue-weekly-calendar-tutorial.png)](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)
46
+ [![Vue Calendar with Day/Week/Month Views](https://static.daypilot.org/npm/202411/vue-calendar-with-day-week-month-views-open-source.png)](https://code.daypilot.org/54002/vue-calendar-day-week-month-open-source)
38
47
 
39
- [Vue.js Weekly Calendar Tutorial (Open-Source)](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)
40
- 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.
48
+ [Vue Calendar with Day/Week/Month Views (Open-Source)](https://code.daypilot.org/54002/vue-calendar-day-week-month-open-source)
49
+ Create a complex calendar UI in Vue.js with multiple views, view-switching buttons and an integrated date picker. Use a shared data source to make it fast and Vue templates to define event appearance.
41
50
 
42
- ### Vue Resource Calendar
51
+ ### Vue Resource Calendar Tutorial
43
52
 
44
53
  [![Vue Resource Calendar](https://static.daypilot.org/npm/202207/vue-resource-calendar-tutorial.png)](https://code.daypilot.org/66224/vue-resource-calendar-open-source)
45
54
 
46
55
  [Vue Resource Calendar (Open-Source)](https://code.daypilot.org/66224/vue-resource-calendar-open-source)
47
56
  Use the Vue calendar component to display an interactive schedule for multiple resources.
48
57
 
58
+ ### Vue Calendar: Using Event Templates
59
+
60
+ [![Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source)](https://static.daypilot.org/npm/202411/vue-calendar-using-templates-to-add-icons-buttons-progress-bars-open-source.png)](https://code.daypilot.org/34309/vue-calendar-templates-open-source)
61
+
62
+ [Vue Calendar: Using Templates to Add Icons, Buttons, or Progress Bars to Events (Open-Source)](https://code.daypilot.org/34309/vue-calendar-templates-open-source)
63
+ Vue templates allow adding dynamic content to Vue Calendar events, including interactive elements and custom Vue components.
64
+
65
+ ### Vue Monthly Calendar/Scheduler Tutorial
66
+
67
+ [![Vue Monthly Calendar/Scheduler (Open-Source)](https://static.daypilot.org/npm/202411/vue-monthly-calendar-scheduler-open-source.png)](https://code.daypilot.org/89705/vue-monthly-calendar-scheduler-open-source)
68
+
69
+ [Vue Monthly Calendar/Scheduler (Open-Source)](https://code.daypilot.org/89705/vue-monthly-calendar-scheduler-open-source)
70
+ How to create a monthly calendar/scheduler view for planning events, tasks, and reminders in Vue. The downloadable Vue project uses the open-source DayPilot Lite library.
71
+
72
+ ### Vue Weekly Calendar Tutorial
73
+
74
+ [![Vue Weekly Calendar](https://static.daypilot.org/npm/202411/vue-js-weekly-calendar-open-source.png)](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)
75
+
76
+ [Vue.js Weekly Calendar Tutorial (Open-Source)](https://code.daypilot.org/10748/vue-js-weekly-calendar-tutorial)
77
+ 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.
78
+
49
79
  ### Vue Date Picker Tutorial
50
80
 
51
81
  [![Vue Date Picker with Free/Busy Highlighting](https://static.daypilot.org/npm/202207/vue-date-picker-free-busy.png)](https://code.daypilot.org/99014/vue-date-picker-with-free-busy-highlighting)
@@ -58,65 +88,74 @@ Use the Vue date picker component (Navigator) to change the current date. The da
58
88
 
59
89
  ```vue
60
90
  <template>
61
- <DayPilotCalendar :config="config" ref="calendarRef" />
91
+ <DayPilotCalendar
92
+ viewType="Week"
93
+ :events="events"
94
+ :durationBarVisible="false"
95
+ :startDate="startDate"
96
+ :eventBorderRadius="5"
97
+ @timeRangeSelected="onTimeRangeSelected"
98
+ @eventMoved="onEventMoved"
99
+ @eventResized="onEventResized"
100
+ ref="calendarRef"
101
+ />
62
102
  </template>
63
103
 
64
104
  <script setup>
65
- import { DayPilot, DayPilotCalendar } from 'daypilot-pro-vue';
66
- import { ref, reactive, onMounted } from 'vue';
67
-
68
- const config = reactive({
69
- viewType: "Week",
70
- durationBarVisible: false,
71
- startDate: "2024-02-28",
72
- onTimeRangeSelected: async (args) => {
73
- const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");
74
- const dp = args.control;
75
- dp.clearSelection();
76
- if (modal.canceled) { return; }
77
- dp.events.add({
78
- start: args.start,
79
- end: args.end,
80
- id: DayPilot.guid(),
81
- text: modal.result
82
- });
83
- },
84
- onEventMoved: () => {
85
- console.log("Event moved");
86
- },
87
- onEventResized: () => {
88
- console.log("Event resized");
89
- },
90
- });
105
+ import { DayPilot, DayPilotCalendar } from '@daypilot/daypilot-lite-vue';
106
+ import { ref, onMounted } from 'vue';
107
+
108
+ const startDate = ref("2025-02-28");
109
+ const events = ref([]);
110
+
91
111
  const calendarRef = ref(null);
92
112
 
113
+ const onTimeRangeSelected = async (args) => {
114
+ const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1")
115
+ const calendar = args.control
116
+ calendar.clearSelection()
117
+ if (modal.canceled) { return }
118
+ calendar.events.add({
119
+ start: args.start,
120
+ end: args.end,
121
+ id: DayPilot.guid(),
122
+ text: modal.result
123
+ })
124
+ }
125
+
126
+ const onEventMoved = () => {
127
+ console.log("Event moved")
128
+ }
129
+
130
+ const onEventResized = () => {
131
+ console.log("Event resized")
132
+ }
133
+
93
134
  const loadEvents = () => {
94
- const events = [
135
+ events.value = [
95
136
  {
96
137
  id: 1,
97
- start: "2024-02-28T10:00:00",
98
- end: "2024-02-28T11:00:00",
138
+ start: "2025-02-28T10:00:00",
139
+ end: "2025-02-28T11:00:00",
99
140
  text: "Event 1",
100
- backColor: "#6aa84f",
141
+ backColor: "#6aa84faa",
101
142
  borderColor: "#38761d",
102
143
  },
103
144
  {
104
145
  id: 2,
105
- start: "2024-02-28T13:00:00",
106
- end: "2024-02-28T16:00:00",
146
+ start: "2025-02-28T13:00:00",
147
+ end: "2025-02-28T16:00:00",
107
148
  text: "Event 2",
108
- backColor: "#f1c232",
149
+ backColor: "#f1c232aa",
109
150
  borderColor: "#bf9000",
110
151
  },
111
- ];
112
- config.events = events;
152
+ ]
113
153
  };
114
154
 
115
-
116
155
  onMounted(() => {
117
- loadEvents();
118
- calendarRef.value?.control.message("Welcome!");
119
- });
156
+ loadEvents()
157
+ })
158
+
120
159
  </script>
121
160
  ```
122
161
 
package/daypilot-vue.min.d.ts CHANGED
@@ -163,13 +163,17 @@ export module DayPilot {
163
163
  readonly start: DayPilot.Date;
164
164
  readonly end: DayPilot.Date;
165
165
  readonly resource: ResourceId;
166
+ readonly x: number;
167
+ readonly y: number;
166
168
  readonly properties: {
167
169
  html: string;
168
170
  business: boolean;
169
171
  backColor: string;
170
172
  backImage: string;
171
173
  backRepeat: string;
174
+ fontColor: string;
172
175
  cssClass: string;
176
+ text: string;
173
177
  };
174
178
  };
175
179
  }
@@ -1040,6 +1044,7 @@ export module DayPilot {
1040
1044
  action?: "Default" | "None" | "ContextMenu" | "ResizeEnd" | "ResizeStart" | "Move";
1041
1045
  backColor?: string;
1042
1046
  background?: string;
1047
+ borderRadius?: number | string;
1043
1048
  bottom?: number | string;
1044
1049
  cssClass?: string;
1045
1050
  fontColor?: string;