@event-calendar/build 3.4.0 → 3.6.0
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 +53 -25
- package/event-calendar.min.js +2 -2
- package/event-calendar.min.js.map +1 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -61,6 +61,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
61
61
|
- [eventStartEditable](#eventstarteditable)
|
|
62
62
|
- [eventTextColor](#eventtextcolor)
|
|
63
63
|
- [eventTimeFormat](#eventtimeformat)
|
|
64
|
+
- [filterEventsWithResources](#filtereventswithresources)
|
|
64
65
|
- [filterResourcesWithEvents](#filterresourceswithevents)
|
|
65
66
|
- [firstDay](#firstday)
|
|
66
67
|
- [flexibleSlotTimeLimits](#flexibleslottimelimits)
|
|
@@ -143,7 +144,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
143
144
|
- [Browser support](#browser-support)
|
|
144
145
|
|
|
145
146
|
## Usage
|
|
146
|
-
###
|
|
147
|
+
### Pure JavaScript / Svelte component
|
|
147
148
|
The first step is to install the Event Calendar `core` package:
|
|
148
149
|
```bash
|
|
149
150
|
npm install --save-dev @event-calendar/core
|
|
@@ -161,27 +162,12 @@ You must use at least one plugin that provides a view. The following plugins are
|
|
|
161
162
|
* `@event-calendar/time-grid`
|
|
162
163
|
* `@event-calendar/interaction` (doesn't provide a view)
|
|
163
164
|
|
|
164
|
-
Then, in your
|
|
165
|
-
```html
|
|
166
|
-
<script>
|
|
167
|
-
import Calendar from '@event-calendar/core';
|
|
168
|
-
import TimeGrid from '@event-calendar/time-grid';
|
|
169
|
-
|
|
170
|
-
let plugins = [TimeGrid];
|
|
171
|
-
let options = {
|
|
172
|
-
view: 'timeGridWeek',
|
|
173
|
-
events: [
|
|
174
|
-
// your list of events
|
|
175
|
-
]
|
|
176
|
-
};
|
|
177
|
-
</script>
|
|
178
|
-
|
|
179
|
-
<Calendar {plugins} {options} />
|
|
180
|
-
```
|
|
181
|
-
Or in ES6 module:
|
|
165
|
+
Then, in your JavaScript module:
|
|
182
166
|
```js
|
|
183
167
|
import Calendar from '@event-calendar/core';
|
|
184
168
|
import TimeGrid from '@event-calendar/time-grid';
|
|
169
|
+
// Import CSS if your build tool supports it
|
|
170
|
+
import '@event-calendar/core/index.css';
|
|
185
171
|
|
|
186
172
|
let ec = new Calendar({
|
|
187
173
|
target: document.getElementById('ec'),
|
|
@@ -196,16 +182,29 @@ let ec = new Calendar({
|
|
|
196
182
|
}
|
|
197
183
|
});
|
|
198
184
|
```
|
|
199
|
-
|
|
200
|
-
```
|
|
201
|
-
|
|
185
|
+
Or in your Svelte component, use the calendar like this:
|
|
186
|
+
```html
|
|
187
|
+
<script>
|
|
188
|
+
import Calendar from '@event-calendar/core';
|
|
189
|
+
import TimeGrid from '@event-calendar/time-grid';
|
|
190
|
+
|
|
191
|
+
let plugins = [TimeGrid];
|
|
192
|
+
let options = {
|
|
193
|
+
view: 'timeGridWeek',
|
|
194
|
+
events: [
|
|
195
|
+
// your list of events
|
|
196
|
+
]
|
|
197
|
+
};
|
|
198
|
+
</script>
|
|
199
|
+
|
|
200
|
+
<Calendar {plugins} {options} />
|
|
202
201
|
```
|
|
203
202
|
|
|
204
203
|
### Pre-built browser ready bundle
|
|
205
204
|
Include the following lines of code in the `<head>` section of your page:
|
|
206
205
|
```html
|
|
207
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.
|
|
208
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.
|
|
206
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.6.0/event-calendar.min.css">
|
|
207
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.6.0/event-calendar.min.js"></script>
|
|
209
208
|
```
|
|
210
209
|
|
|
211
210
|
<details>
|
|
@@ -220,7 +219,7 @@ Include the following lines of code in the `<head>` section of your page:
|
|
|
220
219
|
|
|
221
220
|
</details>
|
|
222
221
|
|
|
223
|
-
Then initialize the calendar
|
|
222
|
+
Then initialize the calendar like this:
|
|
224
223
|
```js
|
|
225
224
|
let ec = new EventCalendar(document.getElementById('ec'), {
|
|
226
225
|
view: 'timeGridWeek',
|
|
@@ -1506,6 +1505,12 @@ Sets the default text color for events on the calendar.
|
|
|
1506
1505
|
|
|
1507
1506
|
You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.
|
|
1508
1507
|
|
|
1508
|
+
### filterEventsWithResources
|
|
1509
|
+
- Type `boolean`
|
|
1510
|
+
- Default `false`
|
|
1511
|
+
|
|
1512
|
+
Determines whether events that do not belong to the current array of [resources](#resources) should be hidden in `dayGrid`/`timeGrid`/`list` views.
|
|
1513
|
+
|
|
1509
1514
|
### filterResourcesWithEvents
|
|
1510
1515
|
- Type `boolean`
|
|
1511
1516
|
- Default `false`
|
|
@@ -2387,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
|
|
|
2387
2392
|
|
|
2388
2393
|
### destroy()
|
|
2389
2394
|
- Return value `undefined`
|
|
2395
|
+
- Not available in Svelte
|
|
2390
2396
|
|
|
2391
2397
|
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
|
|
2392
2398
|
|
|
2399
|
+
Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
|
|
2400
|
+
|
|
2393
2401
|
### getView()
|
|
2394
2402
|
- Return value `View`
|
|
2395
2403
|
|
|
@@ -2815,6 +2823,16 @@ The title of the resource. See [Content](#content)
|
|
|
2815
2823
|
</td>
|
|
2816
2824
|
<td>Default text color for this resource's events</td>
|
|
2817
2825
|
</tr>
|
|
2826
|
+
<tr>
|
|
2827
|
+
<td>
|
|
2828
|
+
|
|
2829
|
+
`extendedProps`
|
|
2830
|
+
</td>
|
|
2831
|
+
<td>
|
|
2832
|
+
|
|
2833
|
+
A plain object holding miscellaneous properties specified during parsing in the explicitly given `extendedProps` field
|
|
2834
|
+
</td>
|
|
2835
|
+
</tr>
|
|
2818
2836
|
</table>
|
|
2819
2837
|
|
|
2820
2838
|
### Parsing resource from a plain object
|
|
@@ -2862,6 +2880,16 @@ Here are all admissible fields for the resource’s input object:
|
|
|
2862
2880
|
`string` Sets the default text color for this resource's events just like the calendar-wide [eventTextColor](#eventtextcolor) option. Default `undefined`
|
|
2863
2881
|
</td>
|
|
2864
2882
|
</tr>
|
|
2883
|
+
<tr>
|
|
2884
|
+
<td>
|
|
2885
|
+
|
|
2886
|
+
`extendedProps`
|
|
2887
|
+
</td>
|
|
2888
|
+
<td>
|
|
2889
|
+
|
|
2890
|
+
`object` A plain object with any miscellaneous properties. It will be directly transferred to the `extendedProps` property of the Resource object. Default `{}`
|
|
2891
|
+
</td>
|
|
2892
|
+
</tr>
|
|
2865
2893
|
</table>
|
|
2866
2894
|
|
|
2867
2895
|
## View object
|