@bryntum/scheduler-vue 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 CHANGED
@@ -1,51 +1,229 @@
1
- # Vue wrapper for Bryntum Scheduler
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>
2
7
 
3
- This package contains a wrapper that encapsulates Bryntum Scheduler and turns it into a Vue component, exposing
4
- configuration options, properties, features, and events.
8
+ # Vue 2 wrapper for Bryntum Scheduler
5
9
 
6
- # Bryntum repository access setup
10
+ This package provides a wrapper that turns Bryntum Scheduler into a Vue 2 component, exposing configuration options,
11
+ properties, features, and events.
7
12
 
8
- This npm package requires access to the private Bryntum npm repository.
9
- You must be logged in to this repository as a licensed or trial user to access it.
10
- Please check the [Online npm repository guide](https://bryntum.com/products/scheduler/docs/guide/Scheduler/npm-repository) for detailed information on the sign-up/login
11
- process.
13
+ ## Version Requirement
12
14
 
13
- # Installation
15
+ * Vue: `2.6` or higher
16
+ * TypeScript: `4.2` or higher (optional)
14
17
 
15
- The installation is performed by issuing the installation command in the root of the application folder. The specific
16
- command depends on the package manager used by the application.
18
+ ### Vue 3 version compatibility
17
19
 
18
- The following are most frequently used:
20
+ For Vue 3+, use [`@bryntum/scheduler-vue-3`](https://www.npmjs.com/package/@bryntum/scheduler-vue-3) instead.
19
21
 
20
- Install using `npm`:
22
+ ## Package Contents
21
23
 
22
- ```shell
23
- npm install @bryntum/scheduler-vue@7.1.1
24
+ | Path | Description |
25
+ |----------|---------------------------------------------------|
26
+ | `src/` | Original Vue source files (BryntumScheduler etc.) |
27
+ | `*.d.ts` | TypeScript type definitions |
28
+
29
+ **Note:** This is a wrapper package. The core `@bryntum/scheduler` package must be installed separately.
30
+
31
+ ## Installation
32
+
33
+ ### Vue 2 Wrapper
34
+
35
+ ```bash
36
+ npm install @bryntum/scheduler-vue@latest
37
+ ```
38
+
39
+ ### Component Package (Required)
40
+
41
+ ```bash
42
+ npm install @bryntum/scheduler@latest
24
43
  ```
25
44
 
26
- Install using `yarn`:
45
+ ## Try Bryntum Online Demos
46
+
47
+ * [View Online Vue Demos](https://bryntum.com/products/scheduler/examples/?framework=vue)
48
+
49
+ ## Quick Start
50
+
51
+ Edit the `src/App.vue` file and replace the content with the following:
52
+
53
+ ```javascript
54
+ <template>
55
+ <bryntum-scheduler
56
+ :start-date="startDate"
57
+ :end-date="endDate"
58
+ :columns="columns"
59
+ :resources="resources"
60
+ :events="events"
61
+ />
62
+ </template>
63
+
64
+ <script>
65
+ import { BryntumScheduler } from '@bryntum/scheduler-vue';
66
+ import '@bryntum/scheduler/scheduler.stockholm.css';
67
+ export default {
68
+ components : {
69
+ BryntumScheduler
70
+ },
71
+ data() {
72
+ return {
73
+ startDate : new Date(2026, 0, 1),
74
+ endDate : new Date(2026, 0, 31),
75
+ columns : [{ field : 'name', text : 'Resource', width : 150 }],
76
+ resources : [
77
+ { id : 1, name : 'Resource 1' },
78
+ { id : 2, name : 'Resource 2' }
79
+ ],
80
+ events : [
81
+ { id : 1, resourceId : 1, name : 'Event 1', startDate : '2026-01-05', endDate : '2026-01-10' }
82
+ ]
83
+ };
84
+ }
85
+ };
86
+ </script>
87
+
88
+ <template>
89
+ <bryntum-scheduler
90
+ :start-date="startDate"
91
+ :end-date="endDate"
92
+ :columns="columns"
93
+ :project="project"
94
+ />
95
+ </template>
96
+ ```
97
+
98
+ <details>
99
+ <summary>Create sample data (click to expand)</summary>
100
+
101
+ Create a `public/data/data.json` file for example data and add the following JSON data to it:
102
+
103
+ ```json
104
+ {
105
+ "success": true,
106
+ "resources": {
107
+ "rows": [
108
+ { "id": 1, "name": "Dan Stevenson" },
109
+ { "id": 2, "name": "Talisha Babin" },
110
+ { "id": 3, "name": "Ravi Kumar" },
111
+ { "id": 4, "name": "Aisha Khan" },
112
+ { "id": 5, "name": "Michael Chen" },
113
+ { "id": 6, "name": "Sofia Lopez" },
114
+ { "id": 7, "name": "James Anderson" },
115
+ { "id": 8, "name": "Eddie Johnson" },
116
+ { "id": 9, "name": "Ethan Wright" },
117
+ { "id": 10, "name": "Liu Wei" }
118
+ ]
119
+ },
120
+ "events": {
121
+ "rows": [
122
+ { "resourceId": 1, "startDate": "2026-01-01", "endDate": "2026-01-05", "name": "Kickoff Meeting" },
123
+ { "resourceId": 1, "startDate": "2026-01-06", "endDate": "2026-01-10", "name": "Scope Definition" },
124
+ { "resourceId": 1, "startDate": "2026-01-12", "endDate": "2026-01-29", "name": "Project Plan Review" },
125
+ { "resourceId": 2, "startDate": "2026-01-02", "endDate": "2026-01-06", "name": "Requirement Gathering" },
126
+ { "resourceId": 2, "startDate": "2026-01-07", "endDate": "2026-01-21", "name": "Stakeholder Interviews" },
127
+ { "resourceId": 2, "startDate": "2026-01-22", "endDate": "2026-01-27", "name": "Requirement Signoff" },
128
+ { "resourceId": 3, "startDate": "2026-01-05", "endDate": "2026-01-14", "name": "System Design" },
129
+ { "resourceId": 3, "startDate": "2026-01-10", "endDate": "2026-01-20", "name": "Database Modeling" },
130
+ { "resourceId": 3, "startDate": "2026-01-23", "endDate": "2026-01-28", "name": "API Design" },
131
+ { "resourceId": 4, "startDate": "2026-01-08", "endDate": "2026-01-15", "name": "Backend Setup" },
132
+ { "resourceId": 4, "startDate": "2026-01-15", "endDate": "2026-01-22", "name": "Authentication Module" },
133
+ { "resourceId": 4, "startDate": "2026-01-21", "endDate": "2026-01-27", "name": "Data Services" },
134
+ { "resourceId": 5, "startDate": "2026-01-02", "endDate": "2026-01-14", "name": "UI Wireframes" },
135
+ { "resourceId": 5, "startDate": "2026-01-15", "endDate": "2026-01-19", "name": "Frontend Components" },
136
+ { "resourceId": 5, "startDate": "2026-01-20", "endDate": "2026-01-27", "name": "Styling & Theme" },
137
+ { "resourceId": 6, "startDate": "2026-01-12", "endDate": "2026-01-16", "name": "API Integration" },
138
+ { "resourceId": 6, "startDate": "2026-01-17", "endDate": "2026-01-21", "name": "GraphQL Setup" },
139
+ { "resourceId": 6, "startDate": "2026-01-22", "endDate": "2026-01-25", "name": "Integration Testing" },
140
+ { "resourceId": 7, "startDate": "2026-01-05", "endDate": "2026-01-10", "name": "Unit Testing" },
141
+ { "resourceId": 7, "startDate": "2026-01-12", "endDate": "2026-01-19", "name": "Automation Scripts" },
142
+ { "resourceId": 7, "startDate": "2026-01-18", "endDate": "2026-01-27", "name": "Performance Testing" },
143
+ { "resourceId": 8, "startDate": "2026-01-10", "endDate": "2026-01-22", "name": "Bug Fix Round 1" },
144
+ { "resourceId": 8, "startDate": "2026-01-23", "endDate": "2026-01-26", "name": "UI Fixes" },
145
+ { "resourceId": 8, "startDate": "2026-01-27", "endDate": "2026-01-30", "name": "Regression Testing" },
146
+ { "resourceId": 9, "startDate": "2026-01-03", "endDate": "2026-01-14", "name": "Client Demo Prep" },
147
+ { "resourceId": 9, "startDate": "2026-01-15", "endDate": "2026-01-19", "name": "Client Review" },
148
+ { "resourceId": 9, "startDate": "2026-01-20", "endDate": "2026-01-24", "name": "Feedback Implementation" },
149
+ { "resourceId": 10, "startDate": "2026-01-02", "endDate": "2026-01-16", "name": "Deployment Setup" },
150
+ { "resourceId": 10, "startDate": "2026-01-19", "endDate": "2026-01-22", "name": "Go-Live" },
151
+ { "resourceId": 10, "startDate": "2026-01-23", "endDate": "2026-01-27", "name": "Post-Deployment Support" }
152
+ ]
153
+ }
154
+ }
155
+ ```
156
+
157
+ This is the data the Bryntum Scheduler will use.
158
+
159
+ </details>
160
+
161
+ Lastly, add some styling to your `src/main.js` or CSS file:
27
162
 
28
- ```shell
29
- yarn add @bryntum/scheduler-vue@7.1.1
163
+ ```css
164
+ /* FontAwesome is used for icons */
165
+ @import '@bryntum/scheduler/fontawesome/css/fontawesome.css';
166
+ @import '@bryntum/scheduler/fontawesome/css/solid.css';
167
+ /* Structural CSS */
168
+ @import "@bryntum/scheduler/scheduler.css";
169
+ /* Bryntum theme of your choice */
170
+ @import "@bryntum/scheduler/svalbard-light.css";
30
171
  ```
31
172
 
32
- # Integration guide
173
+ ## Integration Guide
33
174
 
34
175
  For details on installing and using this package, see the
35
176
  [Vue Integration Guide](https://bryntum.com/products/scheduler/docs/guide/Scheduler/integration/vue/guide).
36
177
 
37
- # Online references
178
+ ## Wrappers
179
+
180
+ Vue wrappers encapsulate Bryntum components as native Vue components, exposing all configuration options,
181
+ properties, features, and events through Vue-familiar patterns like props, events, and slots.
182
+
183
+ Visit [Wrappers documentation](https://bryntum.com/products/scheduler/docs/guide/Scheduler/integration/vue/guide#wrappers) for the complete list of available
184
+ wrapper components.
185
+
186
+ ## Features
187
+
188
+ Features are optional modules that extend Bryntum Scheduler functionality. Each feature is suffixed with `Feature` and
189
+ can be enabled and configured through standard Vue props.
190
+
191
+ Visit [Features documentation](https://bryntum.com/products/scheduler/docs/guide/Scheduler/integration/vue/guide#features) for the complete list of available
192
+ features and their configuration options.
193
+
194
+ ## Explore All Bryntum Products
195
+
196
+ * [Bryntum Grid](https://bryntum.com/products/grid/) - High-performance data grid
197
+ * [Bryntum Scheduler](https://bryntum.com/products/scheduler/) - Resource scheduling component
198
+ * [Bryntum Scheduler Pro](https://bryntum.com/products/schedulerpro/) - Advanced scheduling with dependencies
199
+ * [Bryntum Gantt](https://bryntum.com/products/gantt/) - Project planning and management
200
+ * [Bryntum Calendar](https://bryntum.com/products/calendar/) - Full-featured calendar component
201
+ * [Bryntum TaskBoard](https://bryntum.com/products/taskboard/) - Kanban-style task management
202
+
203
+ Explore our comprehensive collection of demos:
204
+
205
+ | 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 |
206
+ |-------------------|:------------------------------------------------------------------------------------:|:--------------------------------------------------------------------------:|:----------------------------------------------------------------------:|:------------------------------------------------------------------------------:|
207
+ | **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) |
208
+ | **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) |
209
+ | **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) |
210
+ | **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) |
211
+ | **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) |
212
+ | **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) |
213
+
214
+ ## Online references
38
215
 
39
- * [Bryntum npm repository guide](https://bryntum.com/products/scheduler/docs/guide/Scheduler/npm-repository)
40
216
  * [Bryntum Scheduler documentation](https://bryntum.com/products/scheduler/docs/)
41
217
  * [Bryntum Scheduler examples](https://bryntum.com/products/scheduler/examples/)
218
+
42
219
  * [Bryntum Support Forum](https://forum.bryntum.com/)
43
220
  * [Contact us](https://bryntum.com/contact/)
44
221
 
45
- # License and copyright
222
+ ## License and copyright
46
223
 
47
224
  This wrapper depends on Bryntum Scheduler, which is commercial software and requires a paid license.
48
225
  Please visit the [Bryntum Scheduler End User License](https://bryntum.com/products/scheduler/license/) for the full text of the license.
49
226
 
50
227
  Copyright © 2009-2026, Bryntum
51
228
  All rights reserved.
229
+
package/Version.md ADDED
@@ -0,0 +1,8 @@
1
+ ## Version Requirement
2
+
3
+ * Vue: `2.6` or higher
4
+ * TypeScript: `4.2` or higher (optional)
5
+
6
+ ### Vue 3 version compatibility
7
+
8
+ For Vue 3+, use [`@bryntum/scheduler-vue-3`](https://www.npmjs.com/package/@bryntum/scheduler-vue-3) instead.
package/package.json CHANGED
@@ -14,7 +14,7 @@
14
14
  "wrapper"
15
15
  ],
16
16
  "license": "Commercial",
17
- "version": "7.1.1",
17
+ "version": "7.1.2",
18
18
  "bugs": "https://github.com/bryntum/support/issues",
19
19
  "main": "index.js",
20
20
  "dependencies": {},
@@ -106,9 +106,7 @@ export default {
106
106
  managedEventSizing : { type : Boolean, default : undefined },
107
107
  maskDefaults : { type : Object, default : undefined },
108
108
  masked : { type : [Boolean, String, Object], default : undefined },
109
- maxDate : { type : [Date, String], default : undefined },
110
109
  maxTimeAxisUnit : { type : String, default : undefined },
111
- minDate : { type : [Date, String], default : undefined },
112
110
  mode : { type : String, default : undefined },
113
111
  monitorResize : { type : Boolean, default : undefined },
114
112
  multiEventSelect : { type : [Boolean, Object], default : undefined },
@@ -228,6 +226,7 @@ export default {
228
226
  lazyLoadingIndicator : { type : Boolean, default : undefined },
229
227
  longPressTime : { type : Number, default : undefined },
230
228
  margin : { type : [Number, String], default : undefined },
229
+ maxDate : { type : [Date, String], default : undefined },
231
230
  maxHeight : { type : [String, Number], default : undefined },
232
231
  maxWidth : { type : [String, Number], default : undefined },
233
232
  maxZoomLevel : { type : Number, default : undefined },
@@ -235,6 +234,7 @@ export default {
235
234
  milestoneCharWidth : { type : Number, default : undefined },
236
235
  milestoneLayoutMode : { type : String, default : undefined },
237
236
  milestoneTextPosition : { type : String, default : undefined },
237
+ minDate : { type : [Date, String], default : undefined },
238
238
  minHeight : { type : [String, Number], default : undefined },
239
239
  minPackSize : { type : Number, default : undefined },
240
240
  minWidth : { type : [String, Number], default : undefined },
@@ -802,9 +802,7 @@ export default {
802
802
  'managedEventSizing',
803
803
  'maskDefaults',
804
804
  'masked',
805
- 'maxDate',
806
805
  'maxTimeAxisUnit',
807
- 'minDate',
808
806
  'mode',
809
807
  'monitorResize',
810
808
  'multiEventSelect',
@@ -925,6 +923,7 @@ export default {
925
923
  'lazyLoadingIndicator',
926
924
  'longPressTime',
927
925
  'margin',
926
+ 'maxDate',
928
927
  'maxHeight',
929
928
  'maxWidth',
930
929
  'maxZoomLevel',
@@ -932,6 +931,7 @@ export default {
932
931
  'milestoneCharWidth',
933
932
  'milestoneLayoutMode',
934
933
  'milestoneTextPosition',
934
+ 'minDate',
935
935
  'minHeight',
936
936
  'minPackSize',
937
937
  'minWidth',
@@ -106,9 +106,7 @@ export default {
106
106
  managedEventSizing : { type : Boolean, default : undefined },
107
107
  maskDefaults : { type : Object, default : undefined },
108
108
  masked : { type : [Boolean, String, Object], default : undefined },
109
- maxDate : { type : [Date, String], default : undefined },
110
109
  maxTimeAxisUnit : { type : String, default : undefined },
111
- minDate : { type : [Date, String], default : undefined },
112
110
  mode : { type : String, default : undefined },
113
111
  monitorResize : { type : Boolean, default : undefined },
114
112
  multiEventSelect : { type : [Boolean, Object], default : undefined },
@@ -227,6 +225,7 @@ export default {
227
225
  lazyLoadingIndicator : { type : Boolean, default : undefined },
228
226
  longPressTime : { type : Number, default : undefined },
229
227
  margin : { type : [Number, String], default : undefined },
228
+ maxDate : { type : [Date, String], default : undefined },
230
229
  maxHeight : { type : [String, Number], default : undefined },
231
230
  maxWidth : { type : [String, Number], default : undefined },
232
231
  maxZoomLevel : { type : Number, default : undefined },
@@ -234,6 +233,7 @@ export default {
234
233
  milestoneCharWidth : { type : Number, default : undefined },
235
234
  milestoneLayoutMode : { type : String, default : undefined },
236
235
  milestoneTextPosition : { type : String, default : undefined },
236
+ minDate : { type : [Date, String], default : undefined },
237
237
  minHeight : { type : [String, Number], default : undefined },
238
238
  minPackSize : { type : Number, default : undefined },
239
239
  minWidth : { type : [String, Number], default : undefined },
@@ -801,9 +801,7 @@ export default {
801
801
  'managedEventSizing',
802
802
  'maskDefaults',
803
803
  'masked',
804
- 'maxDate',
805
804
  'maxTimeAxisUnit',
806
- 'minDate',
807
805
  'mode',
808
806
  'monitorResize',
809
807
  'multiEventSelect',
@@ -923,6 +921,7 @@ export default {
923
921
  'lazyLoadingIndicator',
924
922
  'longPressTime',
925
923
  'margin',
924
+ 'maxDate',
926
925
  'maxHeight',
927
926
  'maxWidth',
928
927
  'maxZoomLevel',
@@ -930,6 +929,7 @@ export default {
930
929
  'milestoneCharWidth',
931
930
  'milestoneLayoutMode',
932
931
  'milestoneTextPosition',
932
+ 'minDate',
933
933
  'minHeight',
934
934
  'minPackSize',
935
935
  'minWidth',
@@ -100,9 +100,7 @@ export default {
100
100
  managedEventSizing : { type : Boolean, default : undefined },
101
101
  maskDefaults : { type : Object, default : undefined },
102
102
  masked : { type : [Boolean, String, Object], default : undefined },
103
- maxDate : { type : [Date, String], default : undefined },
104
103
  maxTimeAxisUnit : { type : String, default : undefined },
105
- minDate : { type : [Date, String], default : undefined },
106
104
  monitorResize : { type : Boolean, default : undefined },
107
105
  owner : { type : [Widget, Object], default : undefined },
108
106
  partner : { type : TimelineBase, default : undefined },
@@ -187,9 +185,11 @@ export default {
187
185
  labelPosition : { type : [String, null], default : undefined },
188
186
  longPressTime : { type : Number, default : undefined },
189
187
  margin : { type : [Number, String], default : undefined },
188
+ maxDate : { type : [Date, String], default : undefined },
190
189
  maxHeight : { type : [String, Number], default : undefined },
191
190
  maxWidth : { type : [String, Number], default : undefined },
192
191
  maxZoomLevel : { type : Number, default : undefined },
192
+ minDate : { type : [Date, String], default : undefined },
193
193
  minHeight : { type : [String, Number], default : undefined },
194
194
  minWidth : { type : [String, Number], default : undefined },
195
195
  minZoomLevel : { type : Number, default : undefined },
@@ -581,9 +581,7 @@ export default {
581
581
  'managedEventSizing',
582
582
  'maskDefaults',
583
583
  'masked',
584
- 'maxDate',
585
584
  'maxTimeAxisUnit',
586
- 'minDate',
587
585
  'monitorResize',
588
586
  'owner',
589
587
  'partner',
@@ -669,9 +667,11 @@ export default {
669
667
  'labelPosition',
670
668
  'longPressTime',
671
669
  'margin',
670
+ 'maxDate',
672
671
  'maxHeight',
673
672
  'maxWidth',
674
673
  'maxZoomLevel',
674
+ 'minDate',
675
675
  'minHeight',
676
676
  'minWidth',
677
677
  'minZoomLevel',