@bryntum/calendar-vue-3 7.1.1 → 7.1.2
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 +304 -23
- package/lib/chunks/B9IN35xb.js.map +1 -1
- package/lib/chunks/{BzUFQEuh.js → BQe3jzQO.js} +3 -3
- package/lib/chunks/BQe3jzQO.js.map +1 -0
- package/lib/chunks/{H4veMHX5.js → BVIyUskt.js} +3 -3
- package/lib/chunks/{H4veMHX5.js.map → BVIyUskt.js.map} +1 -1
- package/lib/chunks/CrReHJfD.js.map +1 -1
- package/lib/chunks/DSQuUUDN.js.map +1 -1
- package/lib/chunks/{BCapNDrC.js → E5YWkYPg.js} +3 -3
- package/lib/chunks/{BCapNDrC.js.map → E5YWkYPg.js.map} +1 -1
- package/lib/chunks/Jjh0qb7k.js.map +1 -1
- package/lib/chunks/jvLNe3VS.js.map +1 -1
- package/lib/components/BryntumScheduler.js +1 -1
- package/lib/components/BryntumSchedulerBase.js +1 -1
- package/lib/components/BryntumTimelineHistogram.js +1 -1
- package/lib/index.js +3 -3
- package/package.json +1 -1
- package/src/components/BryntumAgendaView.vue +3 -3
- package/src/components/BryntumEventList.vue +3 -3
- package/src/components/BryntumGrid.vue +3 -3
- package/src/components/BryntumGridBase.vue +3 -3
- package/src/components/BryntumScheduler.vue +10 -6
- package/src/components/BryntumSchedulerBase.vue +10 -6
- package/src/components/BryntumTimelineHistogram.vue +5 -5
- package/src/components/BryntumTreeGrid.vue +3 -3
- package/lib/chunks/BzUFQEuh.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,53 +1,334 @@
|
|
|
1
|
+
<div style="display: flex; justify-content: space-between; align-items: center; margin: 0 50px;">
|
|
2
|
+
<a href="https://bryntum.com/" rel="noopener" target="_blank">
|
|
3
|
+
<img width="350" src="https://bryntum.com/resources/bryntum_logo_blue.svg" alt="Bryntum logo">
|
|
4
|
+
</a>
|
|
5
|
+
<img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="100">
|
|
6
|
+
</div>
|
|
7
|
+
|
|
1
8
|
# Vue 3 wrapper for Bryntum Calendar
|
|
2
9
|
|
|
3
|
-
This package
|
|
4
|
-
|
|
10
|
+
This package provides a wrapper that turns Bryntum Calendar into a Vue 3 component, exposing configuration options,
|
|
11
|
+
properties, features, and events.
|
|
12
|
+
|
|
13
|
+
## Version Requirement
|
|
14
|
+
|
|
15
|
+
* Vue: `3.2` or higher
|
|
16
|
+
* TypeScript: `4.2` or higher
|
|
17
|
+
* Vite `5` or higher
|
|
5
18
|
|
|
6
|
-
|
|
19
|
+
## Package Contents
|
|
7
20
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
21
|
+
| Path | Description |
|
|
22
|
+
|--------------|------------------------------------------------|
|
|
23
|
+
| `lib/` | Vue 3 wrapper components (BryntumCalendar etc.) |
|
|
24
|
+
| `src/` | Original Vue source files |
|
|
25
|
+
| `src/*.d.ts` | TypeScript type definitions |
|
|
12
26
|
|
|
13
|
-
|
|
27
|
+
**Note:** This is a wrapper package. The core `@bryntum/calendar` package must be installed separately.
|
|
14
28
|
|
|
15
|
-
|
|
16
|
-
command depends on the package manager used in your application.
|
|
29
|
+
## Installation
|
|
17
30
|
|
|
18
|
-
|
|
31
|
+
### Vue 3 Wrapper
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
npm install @bryntum/calendar-vue-3@latest
|
|
35
|
+
```
|
|
19
36
|
|
|
20
|
-
|
|
37
|
+
### Component Package (Required)
|
|
21
38
|
|
|
22
|
-
```
|
|
23
|
-
npm install @bryntum/calendar
|
|
39
|
+
```bash
|
|
40
|
+
npm install @bryntum/calendar@latest
|
|
24
41
|
```
|
|
25
42
|
|
|
26
|
-
|
|
43
|
+
## Try Bryntum Online Demos
|
|
44
|
+
|
|
45
|
+
* [View Online Vue Demos](https://bryntum.com/products/calendar/examples/?framework=vue)
|
|
46
|
+
|
|
47
|
+
## Quick Start
|
|
48
|
+
|
|
49
|
+
Edit the `src/App.vue` file and replace the content with the following:
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
<script setup>
|
|
53
|
+
import { BryntumCalendar } from '@bryntum/calendar-vue-3';
|
|
54
|
+
import { calendarProps } from './AppConfig.js';
|
|
55
|
+
</script>
|
|
56
|
+
|
|
57
|
+
<template>
|
|
58
|
+
<bryntum-calendar v-bind=calendarProps />
|
|
59
|
+
</template>
|
|
27
60
|
|
|
28
|
-
|
|
29
|
-
|
|
61
|
+
<style lang="scss">
|
|
62
|
+
@import './App.scss';
|
|
63
|
+
</style>
|
|
30
64
|
```
|
|
31
65
|
|
|
32
|
-
|
|
66
|
+
Create a `CalendarConfig.ts` file in the `src/` directory with the following content:
|
|
67
|
+
|
|
68
|
+
```typescript
|
|
69
|
+
import { type BryntumCalendarProps } from '@bryntum/calendar-vue-3';
|
|
70
|
+
|
|
71
|
+
export const calendarProps : BryntumCalendarProps = {
|
|
72
|
+
// Start life looking at this date
|
|
73
|
+
date : new Date(2026, 5, 7),
|
|
74
|
+
|
|
75
|
+
// CrudManager arranges loading and syncing of data in JSON form from/to a web service
|
|
76
|
+
crudManager : {
|
|
77
|
+
loadUrl : 'data/data.json',
|
|
78
|
+
autoLoad : true
|
|
79
|
+
},
|
|
80
|
+
|
|
81
|
+
// Features named by the properties are included.
|
|
82
|
+
// An object is used to configure the feature.
|
|
83
|
+
eventTooltipFeature : {
|
|
84
|
+
// Configuration options are passed on to the tooltip instance
|
|
85
|
+
// We want the tooltip's left edge aligned to the right edge of the event if possible.
|
|
86
|
+
align : 'l-r'
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
<details>
|
|
92
|
+
<summary>Create sample data (click to expand)</summary>
|
|
93
|
+
|
|
94
|
+
Create a `public/data/data.json` file for example data and add the following JSON data to it:
|
|
95
|
+
|
|
96
|
+
```json
|
|
97
|
+
{
|
|
98
|
+
"success": true,
|
|
99
|
+
"resources": {
|
|
100
|
+
"rows": [
|
|
101
|
+
{
|
|
102
|
+
"id": 1,
|
|
103
|
+
"name": "New York Team",
|
|
104
|
+
"eventColor": "blue"
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"id": 2,
|
|
108
|
+
"name": "Tokyo Hub",
|
|
109
|
+
"eventColor": "green"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
"id": 3,
|
|
113
|
+
"name": "Paris Office",
|
|
114
|
+
"eventColor": "orange"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"id": 4,
|
|
118
|
+
"name": "Sydney Crew",
|
|
119
|
+
"eventColor": "red"
|
|
120
|
+
}
|
|
121
|
+
]
|
|
122
|
+
},
|
|
123
|
+
"events": {
|
|
124
|
+
"rows": [
|
|
125
|
+
{
|
|
126
|
+
"id": 1,
|
|
127
|
+
"name": "Kickoff Strategy Meeting",
|
|
128
|
+
"startDate": "2026-06-08T09:00:00",
|
|
129
|
+
"endDate": "2026-06-08T12:30:00",
|
|
130
|
+
"resourceId": 1
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"id": 2,
|
|
134
|
+
"name": "Client Review Call",
|
|
135
|
+
"startDate": "2026-06-09T14:00:00",
|
|
136
|
+
"endDate": "2026-06-09T17:00:00",
|
|
137
|
+
"resourceId": 1
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
"id": 3,
|
|
141
|
+
"name": "Design Workshop",
|
|
142
|
+
"startDate": "2026-06-10T10:00:00",
|
|
143
|
+
"endDate": "2026-06-10T15:00:00",
|
|
144
|
+
"resourceId": 1
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
"id": 4,
|
|
148
|
+
"name": "Project Planning",
|
|
149
|
+
"startDate": "2026-06-08T13:00:00",
|
|
150
|
+
"endDate": "2026-06-08T16:30:00",
|
|
151
|
+
"resourceId": 2
|
|
152
|
+
},
|
|
153
|
+
{
|
|
154
|
+
"id": 5,
|
|
155
|
+
"name": "Sprint Retrospective",
|
|
156
|
+
"startDate": "2026-06-09T15:00:00",
|
|
157
|
+
"endDate": "2026-06-09T19:00:00",
|
|
158
|
+
"resourceId": 2
|
|
159
|
+
},
|
|
160
|
+
{
|
|
161
|
+
"id": 6,
|
|
162
|
+
"name": "Innovation Lab Session",
|
|
163
|
+
"startDate": "2026-06-11T16:00:00",
|
|
164
|
+
"endDate": "2026-06-11T19:30:00",
|
|
165
|
+
"resourceId": 2
|
|
166
|
+
},
|
|
167
|
+
{
|
|
168
|
+
"id": 7,
|
|
169
|
+
"name": "UX/UI Review",
|
|
170
|
+
"startDate": "2026-06-09T08:30:00",
|
|
171
|
+
"endDate": "2026-06-09T11:00:00",
|
|
172
|
+
"resourceId": 3
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"id": 8,
|
|
176
|
+
"name": "Marketing Sync",
|
|
177
|
+
"startDate": "2026-06-10T08:00:00",
|
|
178
|
+
"endDate": "2026-06-10T11:00:00",
|
|
179
|
+
"resourceId": 3
|
|
180
|
+
},
|
|
181
|
+
{
|
|
182
|
+
"id": 9,
|
|
183
|
+
"name": "Team Building Lunch",
|
|
184
|
+
"startDate": "2026-06-12T11:30:00",
|
|
185
|
+
"endDate": "2026-06-12T15:00:00",
|
|
186
|
+
"resourceId": 3
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"id": 10,
|
|
190
|
+
"name": "Daily Standup",
|
|
191
|
+
"startDate": "2026-06-08T09:00:00",
|
|
192
|
+
"endDate": "2026-06-08T12:30:00",
|
|
193
|
+
"resourceId": 4
|
|
194
|
+
},
|
|
195
|
+
{
|
|
196
|
+
"id": 11,
|
|
197
|
+
"name": "Product Demo",
|
|
198
|
+
"startDate": "2026-06-10T16:00:00",
|
|
199
|
+
"endDate": "2026-06-10T20:00:00",
|
|
200
|
+
"resourceId": 4
|
|
201
|
+
},
|
|
202
|
+
{
|
|
203
|
+
"id": 12,
|
|
204
|
+
"name": "Customer Feedback Session",
|
|
205
|
+
"startDate": "2026-06-11T11:00:00",
|
|
206
|
+
"endDate": "2026-06-11T15:30:00",
|
|
207
|
+
"resourceId": 4
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"id": 13,
|
|
211
|
+
"name": "End of Sprint Wrap-up",
|
|
212
|
+
"startDate": "2026-06-12T12:00:00",
|
|
213
|
+
"endDate": "2026-06-12T15:00:00",
|
|
214
|
+
"resourceId": 4
|
|
215
|
+
},
|
|
216
|
+
{
|
|
217
|
+
"id": 100,
|
|
218
|
+
"name": "Hackathon 2026",
|
|
219
|
+
"startDate": "2026-06-08T00:00:00",
|
|
220
|
+
"endDate": "2026-06-15T00:00:00",
|
|
221
|
+
"allDay": true,
|
|
222
|
+
"resourceId": 1,
|
|
223
|
+
"eventColor": "purple"
|
|
224
|
+
},
|
|
225
|
+
{
|
|
226
|
+
"id": 101,
|
|
227
|
+
"name": "Innovation Day",
|
|
228
|
+
"startDate": "2026-06-08T00:00:00",
|
|
229
|
+
"endDate": "2026-06-09T00:00:00",
|
|
230
|
+
"allDay": true,
|
|
231
|
+
"resourceId": 2
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
"id": 102,
|
|
235
|
+
"name": "Wellness Retreat",
|
|
236
|
+
"startDate": "2026-06-10T00:00:00",
|
|
237
|
+
"endDate": "2026-06-11T00:00:00",
|
|
238
|
+
"allDay": true,
|
|
239
|
+
"resourceId": 3
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
"id": 103,
|
|
243
|
+
"name": "Tech Expo Visit",
|
|
244
|
+
"startDate": "2026-06-11T00:00:00",
|
|
245
|
+
"endDate": "2026-06-12T00:00:00",
|
|
246
|
+
"allDay": true,
|
|
247
|
+
"resourceId": 4
|
|
248
|
+
},
|
|
249
|
+
{
|
|
250
|
+
"id": 104,
|
|
251
|
+
"name": "Team Celebration",
|
|
252
|
+
"startDate": "2026-06-13T00:00:00",
|
|
253
|
+
"endDate": "2026-06-14T00:00:00",
|
|
254
|
+
"allDay": true,
|
|
255
|
+
"resourceId": 1
|
|
256
|
+
}
|
|
257
|
+
]
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
This is the data the Bryntum Calendar will use.
|
|
263
|
+
|
|
264
|
+
</details>
|
|
265
|
+
|
|
266
|
+
Lastly, add some styling to your `src/style.css`:
|
|
267
|
+
|
|
268
|
+
```css
|
|
269
|
+
/* FontAwesome is used for icons */
|
|
270
|
+
@import '@bryntum/calendar/fontawesome/css/fontawesome.css';
|
|
271
|
+
@import '@bryntum/calendar/fontawesome/css/solid.css';
|
|
272
|
+
/* Structural CSS */
|
|
273
|
+
@import "@bryntum/calendar/calendar.css";
|
|
274
|
+
/* Bryntum theme of your choice */
|
|
275
|
+
@import "@bryntum/calendar/svalbard-light.css";
|
|
276
|
+
```
|
|
277
|
+
|
|
278
|
+
## Integration Guide
|
|
33
279
|
|
|
34
280
|
For details on installing and using this package, see the
|
|
35
281
|
[Vue Integration Guide](https://bryntum.com/products/calendar/docs/guide/Calendar/integration/vue/guide).
|
|
36
282
|
|
|
37
|
-
|
|
283
|
+
## Wrappers
|
|
284
|
+
|
|
285
|
+
Vue wrappers encapsulate Bryntum components as native Vue components, exposing all configuration options,
|
|
286
|
+
properties, features, and events through Vue-familiar patterns like props, events, and slots.
|
|
287
|
+
|
|
288
|
+
Visit [Wrappers documentation](https://bryntum.com/products/calendar/docs/guide/Calendar/integration/vue/guide#wrappers) for the complete list of available
|
|
289
|
+
wrapper components.
|
|
290
|
+
|
|
291
|
+
## Features
|
|
292
|
+
|
|
293
|
+
Features are optional modules that extend Bryntum Calendar functionality. Each feature is suffixed with `Feature` and
|
|
294
|
+
can be enabled and configured through standard Vue props.
|
|
295
|
+
|
|
296
|
+
Visit [Features documentation](https://bryntum.com/products/calendar/docs/guide/Calendar/integration/vue/guide#features) for the complete list of available
|
|
297
|
+
features and their configuration options.
|
|
298
|
+
|
|
299
|
+
## Explore All Bryntum Products
|
|
300
|
+
|
|
301
|
+
* [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
|
|
302
|
+
* [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
|
|
303
|
+
* [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
|
|
304
|
+
* [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
|
|
305
|
+
* [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
|
|
306
|
+
* [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management
|
|
307
|
+
|
|
308
|
+
Explore our comprehensive collection of demos:
|
|
309
|
+
|
|
310
|
+
| Product | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/js.svg" alt="JavaScript" width="30"><br>JavaScript | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/react.svg" alt="React" width="30"><br>React | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/vue.svg" alt="Vue" width="30"><br>Vue | <img src="https://bryntum.com/products/grid/docs/data/Core/images/logo/angular.svg" alt="Angular" width="30"><br>Angular |
|
|
311
|
+
|-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
|
|
312
|
+
| **Grid** | [Grid JavaScript demos](https://bryntum.com/products/grid/examples/?framework=javascript) | [Grid React demos](https://bryntum.com/products/grid/examples/?framework=react) | [Grid Vue demos](https://bryntum.com/products/grid/examples/?framework=vue) | [Grid Angular demos](https://bryntum.com/products/grid/examples/?framework=angular) |
|
|
313
|
+
| **Scheduler** | [Scheduler JavaScript demos](https://bryntum.com/products/scheduler/examples/?framework=javascript) | [Scheduler React demos](https://bryntum.com/products/scheduler/examples/?framework=react) | [Scheduler Vue demos](https://bryntum.com/products/scheduler/examples/?framework=vue) | [Scheduler Angular demos](https://bryntum.com/products/scheduler/examples/?framework=angular) |
|
|
314
|
+
| **Scheduler Pro** | [Scheduler Pro JavaScript demos](https://bryntum.com/products/schedulerpro/examples/?framework=javascript) | [Scheduler Pro React demos](https://bryntum.com/products/schedulerpro/examples/?framework=react) | [Scheduler Pro Vue demos](https://bryntum.com/products/schedulerpro/examples/?framework=vue) | [Scheduler Pro Angular demos](https://bryntum.com/products/schedulerpro/examples/?framework=angular) |
|
|
315
|
+
| **Gantt** | [Gantt JavaScript demos](https://bryntum.com/products/gantt/examples/?framework=javascript) | [Gantt React demos](https://bryntum.com/products/gantt/examples/?framework=react) | [Gantt Vue demos](https://bryntum.com/products/gantt/examples/?framework=vue) | [Gantt Angular demos](https://bryntum.com/products/gantt/examples/?framework=angular) |
|
|
316
|
+
| **Calendar** | [Calendar JavaScript demos](https://bryntum.com/products/calendar/examples/?framework=javascript) | [Calendar React demos](https://bryntum.com/products/calendar/examples/?framework=react) | [Calendar Vue demos](https://bryntum.com/products/calendar/examples/?framework=vue) | [Calendar Angular demos](https://bryntum.com/products/calendar/examples/?framework=angular) |
|
|
317
|
+
| **TaskBoard** | [TaskBoard JavaScript demos](https://bryntum.com/products/taskboard/examples/?framework=javascript) | [TaskBoard React demos](https://bryntum.com/products/taskboard/examples/?framework=react) | [TaskBoard Vue demos](https://bryntum.com/products/taskboard/examples/?framework=vue) | [TaskBoard Angular demos](https://bryntum.com/products/taskboard/examples/?framework=angular) |
|
|
318
|
+
|
|
319
|
+
## Online references
|
|
38
320
|
|
|
39
|
-
* [Bryntum Vue Quick Start Guide](https://bryntum.com/products/calendar/docs/guide/Calendar/quick-start/vue-3)
|
|
40
|
-
* [Bryntum Vue Integration Guide](https://bryntum.com/products/calendar/docs/guide/Calendar/integration/vue/guide)
|
|
41
|
-
* [Bryntum npm repository guide](https://bryntum.com/products/calendar/docs/guide/Calendar/npm-repository)
|
|
42
321
|
* [Bryntum Calendar documentation](https://bryntum.com/products/calendar/docs/)
|
|
43
322
|
* [Bryntum Calendar examples](https://bryntum.com/products/calendar/examples/)
|
|
323
|
+
|
|
44
324
|
* [Bryntum Support Forum](https://forum.bryntum.com/)
|
|
45
325
|
* [Contact us](https://bryntum.com/contact/)
|
|
46
326
|
|
|
47
|
-
|
|
327
|
+
## License and copyright
|
|
48
328
|
|
|
49
329
|
This wrapper depends on Bryntum Calendar, which is commercial software and requires a paid license.
|
|
50
330
|
Please visit the [Bryntum Calendar End User License](https://bryntum.com/products/calendar/license/) for the full text of the license.
|
|
51
331
|
|
|
52
332
|
Copyright © 2009-2026, Bryntum
|
|
53
333
|
All rights reserved.
|
|
334
|
+
|