@event-calendar/core 0.19.0 → 1.1.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 +92 -17
- package/index.css +5 -7
- package/index.js +111 -100
- package/package.json +2 -2
- package/src/Calendar.svelte +17 -21
- package/src/index.scss +7 -7
- package/src/storage/options.js +1 -3
- package/src/storage/state.js +5 -5
- package/src/storage/stores.js +13 -9
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
|
|
|
4
4
|
|
|
5
5
|
Full-sized drag & drop JavaScript event calendar with resource view:
|
|
6
6
|
|
|
7
|
-
* Lightweight (
|
|
7
|
+
* Lightweight (29kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
|
|
8
8
|
* Zero-dependency (pre-built bundle)
|
|
9
9
|
* Used on over 60,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
|
|
10
10
|
|
|
@@ -54,6 +54,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
54
54
|
- [eventResizeStop](#eventresizestop)
|
|
55
55
|
- [eventSources](#eventsources)
|
|
56
56
|
- [eventStartEditable](#eventstarteditable)
|
|
57
|
+
- [eventTextColor](#eventtextcolor)
|
|
57
58
|
- [eventTimeFormat](#eventtimeformat)
|
|
58
59
|
- [filterResourcesWithEvents](#filterresourceswithevents)
|
|
59
60
|
- [firstDay](#firstday)
|
|
@@ -68,12 +69,11 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
68
69
|
- [loading](#loading)
|
|
69
70
|
- [locale](#locale)
|
|
70
71
|
- [longPressDelay](#longpressdelay)
|
|
71
|
-
- [monthMode](#monthmode)
|
|
72
72
|
- [moreLinkContent](#morelinkcontent)
|
|
73
73
|
- [noEventsClick](#noeventsclick)
|
|
74
|
+
- [noEventsContent](#noeventscontent)
|
|
74
75
|
</td><td>
|
|
75
76
|
|
|
76
|
-
- [noEventsContent](#noeventscontent)
|
|
77
77
|
- [nowIndicator](#nowindicator)
|
|
78
78
|
- [pointer](#pointer)
|
|
79
79
|
- [resources](#resources)
|
|
@@ -193,8 +193,8 @@ import '@event-calendar/core/index.css';
|
|
|
193
193
|
### Pre-built browser ready bundle
|
|
194
194
|
Include the following lines of code in the `<head>` section of your page:
|
|
195
195
|
```html
|
|
196
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@
|
|
197
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@
|
|
196
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.1.0/event-calendar.min.css">
|
|
197
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.1.0/event-calendar.min.js"></script>
|
|
198
198
|
```
|
|
199
199
|
|
|
200
200
|
<details>
|
|
@@ -298,6 +298,7 @@ This value can be either a JavaScript Date object, or an ISO8601 date string lik
|
|
|
298
298
|
### dateClick
|
|
299
299
|
- Type `function`
|
|
300
300
|
- Default `undefined`
|
|
301
|
+
- Requires `Interaction` plugin
|
|
301
302
|
|
|
302
303
|
Callback function that is triggered when the user clicks on a date or a time.
|
|
303
304
|
|
|
@@ -327,7 +328,7 @@ function (info) {}
|
|
|
327
328
|
</td>
|
|
328
329
|
<td>
|
|
329
330
|
|
|
330
|
-
`true` or `false`. Determines if the click has occurred in the `all-day` slot.
|
|
331
|
+
`true` or `false`. Determines if the click has occurred in the `all-day` slot. Month and list views are also considered as all-day slots</td>
|
|
331
332
|
</tr>
|
|
332
333
|
<tr>
|
|
333
334
|
<td>
|
|
@@ -1248,6 +1249,14 @@ function (time) {
|
|
|
1248
1249
|
</tr>
|
|
1249
1250
|
</table>
|
|
1250
1251
|
|
|
1252
|
+
### eventTextColor
|
|
1253
|
+
- Type `string`
|
|
1254
|
+
- Default `undefined`
|
|
1255
|
+
|
|
1256
|
+
Sets the default text color for events on the calendar.
|
|
1257
|
+
|
|
1258
|
+
You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.
|
|
1259
|
+
|
|
1251
1260
|
### filterResourcesWithEvents
|
|
1252
1261
|
- Type `boolean`
|
|
1253
1262
|
- Default `false`
|
|
@@ -1425,14 +1434,6 @@ For touch devices, the amount of time (in milliseconds) the user must hold down
|
|
|
1425
1434
|
|
|
1426
1435
|
For a more granular configuration, see [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
|
|
1427
1436
|
|
|
1428
|
-
### monthMode
|
|
1429
|
-
- Type `boolean`
|
|
1430
|
-
- Default `false`
|
|
1431
|
-
> Views override the default value as follows:
|
|
1432
|
-
> - dayGridMonth `true`
|
|
1433
|
-
|
|
1434
|
-
Tells the calendar that visible dates should start from the [firstDay](#firstday) of the week, even if it will display days outside the current range (this is a common case for a month calendar when you can see days from adjacent months).
|
|
1435
|
-
|
|
1436
1437
|
### moreLinkContent
|
|
1437
1438
|
- Type `string`, `object`or `function`
|
|
1438
1439
|
- Default `undefined`
|
|
@@ -1788,7 +1789,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
|
|
|
1788
1789
|
|
|
1789
1790
|
### theme
|
|
1790
1791
|
- Type `object` or `function`
|
|
1791
|
-
- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll',
|
|
1792
|
+
- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', list: 'ec-list', month: 'ec-month', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', week: 'ec-week', withScroll: 'ec-with-scroll'}`
|
|
1792
1793
|
|
|
1793
1794
|
Defines the CSS classes that the Event Calendar uses to generate HTML markup.
|
|
1794
1795
|
|
|
@@ -2019,9 +2020,46 @@ Updates a single event with the matching `event`.`id`.
|
|
|
2019
2020
|
Refetches events from all sources.
|
|
2020
2021
|
|
|
2021
2022
|
### dateFromPoint( x, y )
|
|
2022
|
-
- Return value `
|
|
2023
|
+
- Return value `object` or `null`
|
|
2024
|
+
|
|
2025
|
+
Returns an `info` object with data as if the [dateClick](#dateclick) event had fired for that point.
|
|
2026
|
+
|
|
2027
|
+
`info` object contains the following properties:
|
|
2028
|
+
<table>
|
|
2029
|
+
<tr>
|
|
2030
|
+
<td>
|
|
2031
|
+
|
|
2032
|
+
`date`
|
|
2033
|
+
</td>
|
|
2034
|
+
<td>JavaScript Date object for the date and time</td>
|
|
2035
|
+
</tr>
|
|
2036
|
+
<tr>
|
|
2037
|
+
<td>
|
|
2038
|
+
|
|
2039
|
+
`allDay`
|
|
2040
|
+
</td>
|
|
2041
|
+
<td>
|
|
2042
|
+
|
|
2043
|
+
`true` or `false`. Determines if the point is in the `all-day` slot. Month and list views are also considered as all-day slots</td>
|
|
2044
|
+
</tr>
|
|
2045
|
+
<tr>
|
|
2046
|
+
<td>
|
|
2047
|
+
|
|
2048
|
+
`dayEl`
|
|
2049
|
+
</td>
|
|
2050
|
+
<td>HTML element that represents the whole-day that contains the point</td>
|
|
2051
|
+
</tr>
|
|
2052
|
+
<tr>
|
|
2053
|
+
<td>
|
|
2054
|
+
|
|
2055
|
+
`resource`
|
|
2056
|
+
</td>
|
|
2057
|
+
<td>
|
|
2023
2058
|
|
|
2024
|
-
|
|
2059
|
+
If the current view is a resource view, the [Resource](#resource-object) object that owns this date
|
|
2060
|
+
</td>
|
|
2061
|
+
</tr>
|
|
2062
|
+
</table>
|
|
2025
2063
|
|
|
2026
2064
|
Using this method, you can, for example, find out on which day a click occurred inside a multi-day event. To do this, inside [eventClick](#eventclick), pass the `jsEvent.clientX` and `jsEvent.clientY` coordinates to `dateFromPoint` and get the desired date.
|
|
2027
2065
|
|
|
@@ -2158,6 +2196,16 @@ The [eventBackgroundColor](#eventbackgroundcolor) override for this specific eve
|
|
|
2158
2196
|
<tr>
|
|
2159
2197
|
<td>
|
|
2160
2198
|
|
|
2199
|
+
`textColor`
|
|
2200
|
+
</td>
|
|
2201
|
+
<td>
|
|
2202
|
+
|
|
2203
|
+
The [eventTextColor](#eventtextcolor) override for this specific event
|
|
2204
|
+
</td>
|
|
2205
|
+
</tr>
|
|
2206
|
+
<tr>
|
|
2207
|
+
<td>
|
|
2208
|
+
|
|
2161
2209
|
`extendedProps`
|
|
2162
2210
|
</td>
|
|
2163
2211
|
<td>
|
|
@@ -2295,6 +2343,16 @@ Here are all admissible fields for the event’s input object:
|
|
|
2295
2343
|
<tr>
|
|
2296
2344
|
<td>
|
|
2297
2345
|
|
|
2346
|
+
`textColor`
|
|
2347
|
+
</td>
|
|
2348
|
+
<td>
|
|
2349
|
+
|
|
2350
|
+
`string` Sets the event’s text color just like the calendar-wide [eventTextColor](#eventtextcolor) option. Default `undefined`
|
|
2351
|
+
</td>
|
|
2352
|
+
</tr>
|
|
2353
|
+
<tr>
|
|
2354
|
+
<td>
|
|
2355
|
+
|
|
2298
2356
|
`color`
|
|
2299
2357
|
</td>
|
|
2300
2358
|
<td>
|
|
@@ -2397,6 +2455,13 @@ Here are all properties that exist in Resource object:
|
|
|
2397
2455
|
</td>
|
|
2398
2456
|
<td>Default background color for this resource's events</td>
|
|
2399
2457
|
</tr>
|
|
2458
|
+
<tr>
|
|
2459
|
+
<td>
|
|
2460
|
+
|
|
2461
|
+
`eventTextColor`
|
|
2462
|
+
</td>
|
|
2463
|
+
<td>Default text color for this resource's events</td>
|
|
2464
|
+
</tr>
|
|
2400
2465
|
</table>
|
|
2401
2466
|
|
|
2402
2467
|
### Parsing resource from a plain object
|
|
@@ -2444,6 +2509,16 @@ Here are all admissible fields for the resource’s input object:
|
|
|
2444
2509
|
`string` Sets the default background color for this resource's events just like the calendar-wide [eventBackgroundColor](#eventbackgroundcolor) option. Default `undefined`
|
|
2445
2510
|
</td>
|
|
2446
2511
|
</tr>
|
|
2512
|
+
<tr>
|
|
2513
|
+
<td>
|
|
2514
|
+
|
|
2515
|
+
`eventTextColor`
|
|
2516
|
+
</td>
|
|
2517
|
+
<td>
|
|
2518
|
+
|
|
2519
|
+
`string` Sets the default text color for this resource's events just like the calendar-wide [eventTextColor](#eventtextcolor) option. Default `undefined`
|
|
2520
|
+
</td>
|
|
2521
|
+
</tr>
|
|
2447
2522
|
</table>
|
|
2448
2523
|
|
|
2449
2524
|
## View object
|
package/index.css
CHANGED
|
@@ -142,7 +142,6 @@
|
|
|
142
142
|
|
|
143
143
|
/* All Day */
|
|
144
144
|
.ec-all-day {
|
|
145
|
-
display: flex;
|
|
146
145
|
flex-shrink: 0;
|
|
147
146
|
border-top: none;
|
|
148
147
|
}
|
|
@@ -399,12 +398,6 @@
|
|
|
399
398
|
z-index: 1;
|
|
400
399
|
}
|
|
401
400
|
|
|
402
|
-
.ec-hidden-times {
|
|
403
|
-
visibility: hidden;
|
|
404
|
-
overflow-y: hidden;
|
|
405
|
-
height: 0;
|
|
406
|
-
}
|
|
407
|
-
|
|
408
401
|
.ec-time,
|
|
409
402
|
.ec-line {
|
|
410
403
|
height: 24px;
|
|
@@ -417,6 +410,11 @@
|
|
|
417
410
|
text-align: right;
|
|
418
411
|
white-space: nowrap;
|
|
419
412
|
}
|
|
413
|
+
.ec-header .ec-time, .ec-all-day .ec-time {
|
|
414
|
+
visibility: hidden;
|
|
415
|
+
overflow-y: hidden;
|
|
416
|
+
height: 0;
|
|
417
|
+
}
|
|
420
418
|
|
|
421
419
|
.ec-lines {
|
|
422
420
|
width: 8px;
|
package/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { is_function, noop, identity, tick, SvelteComponent, init, safe_not_equal, empty, insert, destroy_each, detach, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style, get_current_component } from 'svelte/internal';
|
|
2
2
|
import { getContext, setContext, beforeUpdate } from 'svelte';
|
|
3
3
|
import { derived, writable, readable, get } from 'svelte/store';
|
|
4
|
-
import { assign, setMidnight, createDate, createDuration, createEvents, createEventSources, cloneDate, prevClosestDay, nextClosestDay, DAY_IN_SECONDS, addDuration, subtractDay, derived2, addDay, createView, debounce, toISOString, toLocalDate, writable2, intl, intlRange, subtractDuration, toViewWithLocalDates, flushDebounce,
|
|
4
|
+
import { assign, setMidnight, createDate, createDuration, createEvents, createEventSources, cloneDate, prevClosestDay, nextClosestDay, DAY_IN_SECONDS, addDuration, subtractDay, derived2, addDay, createView, debounce, toISOString, toLocalDate, writable2, intl, intlRange, subtractDuration, toViewWithLocalDates, flushDebounce, hasYScroll, toEventWithLocalDates, getElementWithPayload, getPayload } from '@event-calendar/common';
|
|
5
5
|
|
|
6
6
|
function createOptions(plugins) {
|
|
7
7
|
let options = {
|
|
@@ -11,7 +11,6 @@ function createOptions(plugins) {
|
|
|
11
11
|
today: 'today',
|
|
12
12
|
},
|
|
13
13
|
date: new Date(),
|
|
14
|
-
dateClick: undefined,
|
|
15
14
|
datesSet: undefined,
|
|
16
15
|
dayHeaderFormat: {
|
|
17
16
|
weekday: 'short',
|
|
@@ -22,6 +21,7 @@ function createOptions(plugins) {
|
|
|
22
21
|
duration: {weeks: 1},
|
|
23
22
|
events: [],
|
|
24
23
|
eventBackgroundColor: undefined,
|
|
24
|
+
eventTextColor: undefined,
|
|
25
25
|
eventClick: undefined,
|
|
26
26
|
eventColor: undefined,
|
|
27
27
|
eventContent: undefined,
|
|
@@ -46,7 +46,6 @@ function createOptions(plugins) {
|
|
|
46
46
|
lazyFetching: true,
|
|
47
47
|
loading: undefined,
|
|
48
48
|
locale: undefined,
|
|
49
|
-
monthMode: false,
|
|
50
49
|
nowIndicator: false,
|
|
51
50
|
selectable: false,
|
|
52
51
|
scrollTime: '06:00:00',
|
|
@@ -82,7 +81,6 @@ function createOptions(plugins) {
|
|
|
82
81
|
handle: 'ec-handle',
|
|
83
82
|
header: 'ec-header',
|
|
84
83
|
hiddenScroll: 'ec-hidden-scroll',
|
|
85
|
-
hiddenTimes: 'ec-hidden-times',
|
|
86
84
|
highlight: 'ec-highlight',
|
|
87
85
|
icon: 'ec-icon',
|
|
88
86
|
line: 'ec-line',
|
|
@@ -157,14 +155,18 @@ function diff(options) {
|
|
|
157
155
|
return diff;
|
|
158
156
|
}
|
|
159
157
|
|
|
158
|
+
function monthMode(state) {
|
|
159
|
+
return derived(state._viewClass, $_viewClass => $_viewClass === 'month');
|
|
160
|
+
}
|
|
161
|
+
|
|
160
162
|
function activeRange(state) {
|
|
161
163
|
return derived(
|
|
162
|
-
[state._currentRange, state.firstDay, state.
|
|
163
|
-
([$_currentRange, $firstDay, $
|
|
164
|
+
[state._currentRange, state.firstDay, state.slotMaxTime, state._monthMode],
|
|
165
|
+
([$_currentRange, $firstDay, $slotMaxTime, $_monthMode]) => {
|
|
164
166
|
let start = cloneDate($_currentRange.start);
|
|
165
167
|
let end = cloneDate($_currentRange.end);
|
|
166
168
|
|
|
167
|
-
if ($
|
|
169
|
+
if ($_monthMode) {
|
|
168
170
|
// First day of week
|
|
169
171
|
prevClosestDay(start, $firstDay);
|
|
170
172
|
nextClosestDay(end, $firstDay);
|
|
@@ -183,10 +185,10 @@ function activeRange(state) {
|
|
|
183
185
|
|
|
184
186
|
function currentRange(state) {
|
|
185
187
|
return derived(
|
|
186
|
-
[state.date, state.duration, state.
|
|
187
|
-
([$date, $duration, $
|
|
188
|
+
[state.date, state.duration, state.firstDay, state._monthMode],
|
|
189
|
+
([$date, $duration, $firstDay, $_monthMode]) => {
|
|
188
190
|
let start = cloneDate($date), end;
|
|
189
|
-
if ($
|
|
191
|
+
if ($_monthMode) {
|
|
190
192
|
start.setUTCDate(1);
|
|
191
193
|
} else if ($duration.inWeeks) {
|
|
192
194
|
// First day of week
|
|
@@ -227,9 +229,9 @@ function viewDates(state) {
|
|
|
227
229
|
|
|
228
230
|
function viewTitle(state) {
|
|
229
231
|
return derived(
|
|
230
|
-
[state.date, state._activeRange, state._titleIntlRange, state.
|
|
231
|
-
([$date, $_activeRange, $_titleIntlRange, $
|
|
232
|
-
return $
|
|
232
|
+
[state.date, state._activeRange, state._titleIntlRange, state._monthMode],
|
|
233
|
+
([$date, $_activeRange, $_titleIntlRange, $_monthMode]) => {
|
|
234
|
+
return $_monthMode
|
|
233
235
|
? $_titleIntlRange.format($date, $date)
|
|
234
236
|
: $_titleIntlRange.format($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
|
|
235
237
|
}
|
|
@@ -358,33 +360,32 @@ class State {
|
|
|
358
360
|
// Private stores
|
|
359
361
|
this._queue = writable(new Map()); // debounce queue
|
|
360
362
|
this._auxiliary = writable([]); // auxiliary components
|
|
363
|
+
this._viewClass = writable(undefined);
|
|
364
|
+
this._monthMode = monthMode(this);
|
|
361
365
|
this._currentRange = currentRange(this);
|
|
362
366
|
this._activeRange = activeRange(this);
|
|
363
367
|
this._fetchedRange = writable({start: undefined, end: undefined});
|
|
364
368
|
this._events = events(this);
|
|
365
369
|
this._now = now();
|
|
366
370
|
this._today = today(this);
|
|
367
|
-
this._ignoreClick = writable(false);
|
|
368
371
|
this._intlEventTime = intl(this.locale, this.eventTimeFormat);
|
|
369
372
|
this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
|
|
370
373
|
this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
|
|
371
374
|
this._titleIntlRange = intlRange(this.locale, this.titleFormat);
|
|
375
|
+
this._bodyEl = writable(undefined);
|
|
372
376
|
this._scrollable = writable(false);
|
|
373
377
|
this._viewTitle = viewTitle(this);
|
|
374
378
|
this._viewDates = viewDates(this);
|
|
375
379
|
this._view = view(this);
|
|
376
380
|
this._viewComponent = writable(undefined);
|
|
377
|
-
this._viewClass = writable(undefined);
|
|
378
381
|
// Resources
|
|
379
382
|
this._resBgColor = writable(noop);
|
|
383
|
+
this._resTxtColor = writable(noop);
|
|
380
384
|
// Interaction
|
|
381
385
|
this._interaction = writable({});
|
|
382
386
|
this._iEvents = writable([null, null]); // interaction events: [drag/resize, pointer]
|
|
383
|
-
this._draggable = writable(noop);
|
|
384
|
-
this._resizable = writable(noop);
|
|
385
387
|
this._classes = writable(identity);
|
|
386
388
|
this._iClass = writable(undefined);
|
|
387
|
-
this._scroll = writable(undefined);
|
|
388
389
|
|
|
389
390
|
// Let plugins create their private stores
|
|
390
391
|
for (let plugin of plugins) {
|
|
@@ -454,7 +455,7 @@ function parseOpts(opts, state) {
|
|
|
454
455
|
}
|
|
455
456
|
}
|
|
456
457
|
|
|
457
|
-
/* packages/core/src/Buttons.svelte generated by Svelte v3.
|
|
458
|
+
/* packages/core/src/Buttons.svelte generated by Svelte v3.58.0 */
|
|
458
459
|
|
|
459
460
|
function get_each_context$2(ctx, list, i) {
|
|
460
461
|
const child_ctx = ctx.slice();
|
|
@@ -737,7 +738,9 @@ function create_fragment$3(ctx) {
|
|
|
737
738
|
},
|
|
738
739
|
m(target, anchor) {
|
|
739
740
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
740
|
-
each_blocks[i]
|
|
741
|
+
if (each_blocks[i]) {
|
|
742
|
+
each_blocks[i].m(target, anchor);
|
|
743
|
+
}
|
|
741
744
|
}
|
|
742
745
|
|
|
743
746
|
insert(target, each_1_anchor, anchor);
|
|
@@ -857,7 +860,7 @@ class Buttons extends SvelteComponent {
|
|
|
857
860
|
}
|
|
858
861
|
}
|
|
859
862
|
|
|
860
|
-
/* packages/core/src/Toolbar.svelte generated by Svelte v3.
|
|
863
|
+
/* packages/core/src/Toolbar.svelte generated by Svelte v3.58.0 */
|
|
861
864
|
|
|
862
865
|
function get_each_context$1(ctx, list, i) {
|
|
863
866
|
const child_ctx = ctx.slice();
|
|
@@ -1049,7 +1052,9 @@ function create_each_block$1(ctx) {
|
|
|
1049
1052
|
insert(target, div, anchor);
|
|
1050
1053
|
|
|
1051
1054
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
1052
|
-
each_blocks[i]
|
|
1055
|
+
if (each_blocks[i]) {
|
|
1056
|
+
each_blocks[i].m(div, null);
|
|
1057
|
+
}
|
|
1053
1058
|
}
|
|
1054
1059
|
|
|
1055
1060
|
append(div, t);
|
|
@@ -1137,7 +1142,9 @@ function create_fragment$2(ctx) {
|
|
|
1137
1142
|
insert(target, div, anchor);
|
|
1138
1143
|
|
|
1139
1144
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
1140
|
-
each_blocks[i]
|
|
1145
|
+
if (each_blocks[i]) {
|
|
1146
|
+
each_blocks[i].m(div, null);
|
|
1147
|
+
}
|
|
1141
1148
|
}
|
|
1142
1149
|
|
|
1143
1150
|
current = true;
|
|
@@ -1227,7 +1234,7 @@ class Toolbar extends SvelteComponent {
|
|
|
1227
1234
|
}
|
|
1228
1235
|
}
|
|
1229
1236
|
|
|
1230
|
-
/* packages/core/src/Auxiliary.svelte generated by Svelte v3.
|
|
1237
|
+
/* packages/core/src/Auxiliary.svelte generated by Svelte v3.58.0 */
|
|
1231
1238
|
|
|
1232
1239
|
function get_each_context(ctx, list, i) {
|
|
1233
1240
|
const child_ctx = ctx.slice();
|
|
@@ -1261,7 +1268,7 @@ function create_each_block(ctx) {
|
|
|
1261
1268
|
current = true;
|
|
1262
1269
|
},
|
|
1263
1270
|
p(ctx, dirty) {
|
|
1264
|
-
if (switch_value !== (switch_value = /*component*/ ctx[11])) {
|
|
1271
|
+
if (dirty & /*$_auxiliary*/ 1 && switch_value !== (switch_value = /*component*/ ctx[11])) {
|
|
1265
1272
|
if (switch_instance) {
|
|
1266
1273
|
group_outros();
|
|
1267
1274
|
const old_component = switch_instance;
|
|
@@ -1323,7 +1330,9 @@ function create_fragment$1(ctx) {
|
|
|
1323
1330
|
},
|
|
1324
1331
|
m(target, anchor) {
|
|
1325
1332
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
1326
|
-
each_blocks[i]
|
|
1333
|
+
if (each_blocks[i]) {
|
|
1334
|
+
each_blocks[i].m(target, anchor);
|
|
1335
|
+
}
|
|
1327
1336
|
}
|
|
1328
1337
|
|
|
1329
1338
|
insert(target, each_1_anchor, anchor);
|
|
@@ -1427,7 +1436,7 @@ class Auxiliary extends SvelteComponent {
|
|
|
1427
1436
|
}
|
|
1428
1437
|
}
|
|
1429
1438
|
|
|
1430
|
-
/* packages/core/src/Calendar.svelte generated by Svelte v3.
|
|
1439
|
+
/* packages/core/src/Calendar.svelte generated by Svelte v3.58.0 */
|
|
1431
1440
|
|
|
1432
1441
|
function create_fragment(ctx) {
|
|
1433
1442
|
let div;
|
|
@@ -1441,7 +1450,7 @@ function create_fragment(ctx) {
|
|
|
1441
1450
|
let mounted;
|
|
1442
1451
|
let dispose;
|
|
1443
1452
|
toolbar = new Toolbar({});
|
|
1444
|
-
var switch_value = /*$_viewComponent*/ ctx[
|
|
1453
|
+
var switch_value = /*$_viewComponent*/ ctx[5];
|
|
1445
1454
|
|
|
1446
1455
|
function switch_props(ctx) {
|
|
1447
1456
|
return {};
|
|
@@ -1462,13 +1471,15 @@ function create_fragment(ctx) {
|
|
|
1462
1471
|
t1 = space();
|
|
1463
1472
|
create_component(auxiliary.$$.fragment);
|
|
1464
1473
|
|
|
1465
|
-
attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[
|
|
1466
|
-
? ' ' + /*$theme*/ ctx[
|
|
1467
|
-
: '') + (/*$
|
|
1468
|
-
? ' ' + /*$theme*/ ctx[
|
|
1474
|
+
attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[1].calendar + (/*$_viewClass*/ ctx[2]
|
|
1475
|
+
? ' ' + /*$theme*/ ctx[1][/*$_viewClass*/ ctx[2]]
|
|
1476
|
+
: '') + (/*$_scrollable*/ ctx[0]
|
|
1477
|
+
? ' ' + /*$theme*/ ctx[1].withScroll
|
|
1478
|
+
: '') + (/*$_iClass*/ ctx[3]
|
|
1479
|
+
? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[3]]
|
|
1469
1480
|
: '')));
|
|
1470
1481
|
|
|
1471
|
-
set_style(div, "height", /*$height*/ ctx[
|
|
1482
|
+
set_style(div, "height", /*$height*/ ctx[4]);
|
|
1472
1483
|
},
|
|
1473
1484
|
m(target, anchor) {
|
|
1474
1485
|
insert(target, div, anchor);
|
|
@@ -1480,12 +1491,12 @@ function create_fragment(ctx) {
|
|
|
1480
1491
|
current = true;
|
|
1481
1492
|
|
|
1482
1493
|
if (!mounted) {
|
|
1483
|
-
dispose = listen(window, "
|
|
1494
|
+
dispose = listen(window, "resize", /*recheckScrollable*/ ctx[18]);
|
|
1484
1495
|
mounted = true;
|
|
1485
1496
|
}
|
|
1486
1497
|
},
|
|
1487
1498
|
p(ctx, dirty) {
|
|
1488
|
-
if (switch_value !== (switch_value = /*$_viewComponent*/ ctx[
|
|
1499
|
+
if (dirty[0] & /*$_viewComponent*/ 32 && switch_value !== (switch_value = /*$_viewComponent*/ ctx[5])) {
|
|
1489
1500
|
if (switch_instance) {
|
|
1490
1501
|
group_outros();
|
|
1491
1502
|
const old_component = switch_instance;
|
|
@@ -1507,16 +1518,18 @@ function create_fragment(ctx) {
|
|
|
1507
1518
|
}
|
|
1508
1519
|
}
|
|
1509
1520
|
|
|
1510
|
-
if (!current || dirty[0] & /*$theme, $_viewClass, $_iClass*/
|
|
1511
|
-
? ' ' + /*$theme*/ ctx[
|
|
1512
|
-
: '') + (/*$
|
|
1513
|
-
? ' ' + /*$theme*/ ctx[
|
|
1521
|
+
if (!current || dirty[0] & /*$theme, $_viewClass, $_scrollable, $_iClass*/ 15 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[1].calendar + (/*$_viewClass*/ ctx[2]
|
|
1522
|
+
? ' ' + /*$theme*/ ctx[1][/*$_viewClass*/ ctx[2]]
|
|
1523
|
+
: '') + (/*$_scrollable*/ ctx[0]
|
|
1524
|
+
? ' ' + /*$theme*/ ctx[1].withScroll
|
|
1525
|
+
: '') + (/*$_iClass*/ ctx[3]
|
|
1526
|
+
? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[3]]
|
|
1514
1527
|
: '')))) {
|
|
1515
1528
|
attr(div, "class", div_class_value);
|
|
1516
1529
|
}
|
|
1517
1530
|
|
|
1518
|
-
if (!current || dirty[0] & /*$height*/
|
|
1519
|
-
set_style(div, "height", /*$height*/ ctx[
|
|
1531
|
+
if (!current || dirty[0] & /*$height*/ 16) {
|
|
1532
|
+
set_style(div, "height", /*$height*/ ctx[4]);
|
|
1520
1533
|
}
|
|
1521
1534
|
},
|
|
1522
1535
|
i(local) {
|
|
@@ -1545,8 +1558,9 @@ function create_fragment(ctx) {
|
|
|
1545
1558
|
}
|
|
1546
1559
|
|
|
1547
1560
|
function instance($$self, $$props, $$invalidate) {
|
|
1561
|
+
let $_bodyEl;
|
|
1562
|
+
let $_scrollable;
|
|
1548
1563
|
let $_queue;
|
|
1549
|
-
let $_ignoreClick;
|
|
1550
1564
|
let $events;
|
|
1551
1565
|
let $_events;
|
|
1552
1566
|
let $eventSources;
|
|
@@ -1561,18 +1575,19 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1561
1575
|
let component = get_current_component();
|
|
1562
1576
|
let state = new State(plugins, options);
|
|
1563
1577
|
setContext('state', state);
|
|
1564
|
-
let { _viewComponent, _viewClass,
|
|
1565
|
-
component_subscribe($$self, _viewComponent, value => $$invalidate(
|
|
1566
|
-
component_subscribe($$self, _viewClass, value => $$invalidate(
|
|
1567
|
-
component_subscribe($$self,
|
|
1568
|
-
component_subscribe($$self, _interaction, value => $$invalidate(
|
|
1569
|
-
component_subscribe($$self, _iClass, value => $$invalidate(
|
|
1570
|
-
component_subscribe($$self, _events, value => $$invalidate(
|
|
1571
|
-
component_subscribe($$self, _queue, value => $$invalidate(
|
|
1572
|
-
component_subscribe($$self,
|
|
1573
|
-
component_subscribe($$self,
|
|
1574
|
-
component_subscribe($$self,
|
|
1575
|
-
component_subscribe($$self,
|
|
1578
|
+
let { _viewComponent, _viewClass, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable, events, eventSources, height, theme } = state;
|
|
1579
|
+
component_subscribe($$self, _viewComponent, value => $$invalidate(5, $_viewComponent = value));
|
|
1580
|
+
component_subscribe($$self, _viewClass, value => $$invalidate(2, $_viewClass = value));
|
|
1581
|
+
component_subscribe($$self, _bodyEl, value => $$invalidate(33, $_bodyEl = value));
|
|
1582
|
+
component_subscribe($$self, _interaction, value => $$invalidate(38, $_interaction = value));
|
|
1583
|
+
component_subscribe($$self, _iClass, value => $$invalidate(3, $_iClass = value));
|
|
1584
|
+
component_subscribe($$self, _events, value => $$invalidate(36, $_events = value));
|
|
1585
|
+
component_subscribe($$self, _queue, value => $$invalidate(34, $_queue = value));
|
|
1586
|
+
component_subscribe($$self, _scrollable, value => $$invalidate(0, $_scrollable = value));
|
|
1587
|
+
component_subscribe($$self, events, value => $$invalidate(35, $events = value));
|
|
1588
|
+
component_subscribe($$self, eventSources, value => $$invalidate(37, $eventSources = value));
|
|
1589
|
+
component_subscribe($$self, height, value => $$invalidate(4, $height = value));
|
|
1590
|
+
component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
|
|
1576
1591
|
|
|
1577
1592
|
function setOption(name, value) {
|
|
1578
1593
|
if (state.hasOwnProperty(name)) {
|
|
@@ -1651,14 +1666,8 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1651
1666
|
}
|
|
1652
1667
|
|
|
1653
1668
|
function dateFromPoint(x, y) {
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
let date = runFn(el, y);
|
|
1657
|
-
return date ? toLocalDate(date) : null;
|
|
1658
|
-
}
|
|
1659
|
-
}
|
|
1660
|
-
|
|
1661
|
-
return null;
|
|
1669
|
+
let dayEl = getElementWithPayload(x, y);
|
|
1670
|
+
return dayEl ? getPayload(dayEl)(y) : null;
|
|
1662
1671
|
}
|
|
1663
1672
|
|
|
1664
1673
|
function destroy() {
|
|
@@ -1673,24 +1682,24 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1673
1682
|
}
|
|
1674
1683
|
}
|
|
1675
1684
|
|
|
1676
|
-
function handleClick(jsEvent) {
|
|
1677
|
-
if ($_ignoreClick) {
|
|
1678
|
-
ignore(jsEvent);
|
|
1679
|
-
set_store_value(_ignoreClick, $_ignoreClick = false, $_ignoreClick);
|
|
1680
|
-
}
|
|
1681
|
-
}
|
|
1682
|
-
|
|
1683
1685
|
beforeUpdate(() => {
|
|
1684
1686
|
flushDebounce($_queue);
|
|
1687
|
+
setTimeout(recheckScrollable);
|
|
1685
1688
|
});
|
|
1686
1689
|
|
|
1690
|
+
function recheckScrollable() {
|
|
1691
|
+
if ($_bodyEl) {
|
|
1692
|
+
set_store_value(_scrollable, $_scrollable = hasYScroll($_bodyEl), $_scrollable);
|
|
1693
|
+
}
|
|
1694
|
+
}
|
|
1695
|
+
|
|
1687
1696
|
$$self.$$set = $$props => {
|
|
1688
|
-
if ('plugins' in $$props) $$invalidate(
|
|
1689
|
-
if ('options' in $$props) $$invalidate(
|
|
1697
|
+
if ('plugins' in $$props) $$invalidate(19, plugins = $$props.plugins);
|
|
1698
|
+
if ('options' in $$props) $$invalidate(20, options = $$props.options);
|
|
1690
1699
|
};
|
|
1691
1700
|
|
|
1692
1701
|
$$self.$$.update = () => {
|
|
1693
|
-
if ($$self.$$.dirty[0] & /*options*/
|
|
1702
|
+
if ($$self.$$.dirty[0] & /*options*/ 1048576) {
|
|
1694
1703
|
// Reactively update options that did change
|
|
1695
1704
|
for (let [name, value] of diff(options)) {
|
|
1696
1705
|
setOption(name, value);
|
|
@@ -1699,6 +1708,7 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1699
1708
|
};
|
|
1700
1709
|
|
|
1701
1710
|
return [
|
|
1711
|
+
$_scrollable,
|
|
1702
1712
|
$theme,
|
|
1703
1713
|
$_viewClass,
|
|
1704
1714
|
$_iClass,
|
|
@@ -1706,16 +1716,17 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1706
1716
|
$_viewComponent,
|
|
1707
1717
|
_viewComponent,
|
|
1708
1718
|
_viewClass,
|
|
1709
|
-
|
|
1719
|
+
_bodyEl,
|
|
1710
1720
|
_interaction,
|
|
1711
1721
|
_iClass,
|
|
1712
1722
|
_events,
|
|
1713
1723
|
_queue,
|
|
1724
|
+
_scrollable,
|
|
1714
1725
|
events,
|
|
1715
1726
|
eventSources,
|
|
1716
1727
|
height,
|
|
1717
1728
|
theme,
|
|
1718
|
-
|
|
1729
|
+
recheckScrollable,
|
|
1719
1730
|
plugins,
|
|
1720
1731
|
options,
|
|
1721
1732
|
setOption,
|
|
@@ -1744,20 +1755,20 @@ class Calendar extends SvelteComponent {
|
|
|
1744
1755
|
create_fragment,
|
|
1745
1756
|
safe_not_equal,
|
|
1746
1757
|
{
|
|
1747
|
-
plugins:
|
|
1748
|
-
options:
|
|
1749
|
-
setOption:
|
|
1750
|
-
getOption:
|
|
1751
|
-
refetchEvents:
|
|
1752
|
-
getEvents:
|
|
1753
|
-
getEventById:
|
|
1754
|
-
addEvent:
|
|
1755
|
-
updateEvent:
|
|
1756
|
-
removeEventById:
|
|
1757
|
-
getView:
|
|
1758
|
-
unselect:
|
|
1759
|
-
dateFromPoint:
|
|
1760
|
-
destroy:
|
|
1758
|
+
plugins: 19,
|
|
1759
|
+
options: 20,
|
|
1760
|
+
setOption: 21,
|
|
1761
|
+
getOption: 22,
|
|
1762
|
+
refetchEvents: 23,
|
|
1763
|
+
getEvents: 24,
|
|
1764
|
+
getEventById: 25,
|
|
1765
|
+
addEvent: 26,
|
|
1766
|
+
updateEvent: 27,
|
|
1767
|
+
removeEventById: 28,
|
|
1768
|
+
getView: 29,
|
|
1769
|
+
unselect: 30,
|
|
1770
|
+
dateFromPoint: 31,
|
|
1771
|
+
destroy: 32
|
|
1761
1772
|
},
|
|
1762
1773
|
null,
|
|
1763
1774
|
[-1, -1]
|
|
@@ -1765,51 +1776,51 @@ class Calendar extends SvelteComponent {
|
|
|
1765
1776
|
}
|
|
1766
1777
|
|
|
1767
1778
|
get setOption() {
|
|
1768
|
-
return this.$$.ctx[
|
|
1779
|
+
return this.$$.ctx[21];
|
|
1769
1780
|
}
|
|
1770
1781
|
|
|
1771
1782
|
get getOption() {
|
|
1772
|
-
return this.$$.ctx[
|
|
1783
|
+
return this.$$.ctx[22];
|
|
1773
1784
|
}
|
|
1774
1785
|
|
|
1775
1786
|
get refetchEvents() {
|
|
1776
|
-
return this.$$.ctx[
|
|
1787
|
+
return this.$$.ctx[23];
|
|
1777
1788
|
}
|
|
1778
1789
|
|
|
1779
1790
|
get getEvents() {
|
|
1780
|
-
return this.$$.ctx[
|
|
1791
|
+
return this.$$.ctx[24];
|
|
1781
1792
|
}
|
|
1782
1793
|
|
|
1783
1794
|
get getEventById() {
|
|
1784
|
-
return this.$$.ctx[
|
|
1795
|
+
return this.$$.ctx[25];
|
|
1785
1796
|
}
|
|
1786
1797
|
|
|
1787
1798
|
get addEvent() {
|
|
1788
|
-
return this.$$.ctx[
|
|
1799
|
+
return this.$$.ctx[26];
|
|
1789
1800
|
}
|
|
1790
1801
|
|
|
1791
1802
|
get updateEvent() {
|
|
1792
|
-
return this.$$.ctx[
|
|
1803
|
+
return this.$$.ctx[27];
|
|
1793
1804
|
}
|
|
1794
1805
|
|
|
1795
1806
|
get removeEventById() {
|
|
1796
|
-
return this.$$.ctx[
|
|
1807
|
+
return this.$$.ctx[28];
|
|
1797
1808
|
}
|
|
1798
1809
|
|
|
1799
1810
|
get getView() {
|
|
1800
|
-
return this.$$.ctx[
|
|
1811
|
+
return this.$$.ctx[29];
|
|
1801
1812
|
}
|
|
1802
1813
|
|
|
1803
1814
|
get unselect() {
|
|
1804
|
-
return this.$$.ctx[
|
|
1815
|
+
return this.$$.ctx[30];
|
|
1805
1816
|
}
|
|
1806
1817
|
|
|
1807
1818
|
get dateFromPoint() {
|
|
1808
|
-
return this.$$.ctx[
|
|
1819
|
+
return this.$$.ctx[31];
|
|
1809
1820
|
}
|
|
1810
1821
|
|
|
1811
1822
|
get destroy() {
|
|
1812
|
-
return this.$$.ctx[
|
|
1823
|
+
return this.$$.ctx[32];
|
|
1813
1824
|
}
|
|
1814
1825
|
}
|
|
1815
1826
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@event-calendar/core",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"title": "Event Calendar Core package",
|
|
5
5
|
"description": "Full-sized drag & drop event calendar with resource view",
|
|
6
6
|
"keywords": [
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"./package.json": "./package.json"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@event-calendar/common": "~
|
|
40
|
+
"@event-calendar/common": "~1.1.0",
|
|
41
41
|
"svelte": "^3.55.1"
|
|
42
42
|
}
|
|
43
43
|
}
|
package/src/Calendar.svelte
CHANGED
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
toEventWithLocalDates,
|
|
13
13
|
toViewWithLocalDates,
|
|
14
14
|
toLocalDate,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
getElementWithPayload,
|
|
16
|
+
getPayload,
|
|
17
|
+
flushDebounce,
|
|
18
|
+
hasYScroll
|
|
19
19
|
} from '@event-calendar/common';
|
|
20
20
|
|
|
21
21
|
export let plugins = [];
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
let state = new State(plugins, options);
|
|
27
27
|
setContext('state', state);
|
|
28
28
|
|
|
29
|
-
let {_viewComponent, _viewClass,
|
|
29
|
+
let {_viewComponent, _viewClass, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable,
|
|
30
30
|
events, eventSources, height, theme} = state;
|
|
31
31
|
|
|
32
32
|
// Reactively update options that did change
|
|
@@ -102,13 +102,8 @@
|
|
|
102
102
|
}
|
|
103
103
|
|
|
104
104
|
export function dateFromPoint(x, y) {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
let date = runFn(el, y);
|
|
108
|
-
return date ? toLocalDate(date) : null;
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
return null;
|
|
105
|
+
let dayEl = getElementWithPayload(x, y);
|
|
106
|
+
return dayEl ? getPayload(dayEl)(y) : null;
|
|
112
107
|
}
|
|
113
108
|
|
|
114
109
|
export function destroy() {
|
|
@@ -123,24 +118,25 @@
|
|
|
123
118
|
}
|
|
124
119
|
}
|
|
125
120
|
|
|
126
|
-
function handleClick(jsEvent) {
|
|
127
|
-
if ($_ignoreClick) {
|
|
128
|
-
ignore(jsEvent);
|
|
129
|
-
$_ignoreClick = false;
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
|
|
133
121
|
beforeUpdate(() => {
|
|
134
122
|
flushDebounce($_queue);
|
|
123
|
+
setTimeout(recheckScrollable)
|
|
135
124
|
});
|
|
125
|
+
|
|
126
|
+
function recheckScrollable() {
|
|
127
|
+
if ($_bodyEl) {
|
|
128
|
+
$_scrollable = hasYScroll($_bodyEl);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
136
131
|
</script>
|
|
137
132
|
|
|
138
133
|
<div
|
|
139
|
-
class="{$theme.calendar}{$_viewClass ? ' ' + $theme[$_viewClass] : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
|
|
134
|
+
class="{$theme.calendar}{$_viewClass ? ' ' + $theme[$_viewClass] : ''}{$_scrollable ? ' ' + $theme.withScroll : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
|
|
140
135
|
style="height: {$height}"
|
|
141
136
|
>
|
|
142
137
|
<Toolbar/>
|
|
143
138
|
<svelte:component this={$_viewComponent}/>
|
|
144
139
|
</div>
|
|
145
|
-
<svelte:window on:click|capture={handleClick}/>
|
|
146
140
|
<Auxiliary/>
|
|
141
|
+
|
|
142
|
+
<svelte:window on:resize={recheckScrollable}/>
|
package/src/index.scss
CHANGED
|
@@ -162,7 +162,6 @@
|
|
|
162
162
|
|
|
163
163
|
/* All Day */
|
|
164
164
|
.ec-all-day {
|
|
165
|
-
display: flex;
|
|
166
165
|
flex-shrink: 0;
|
|
167
166
|
border-top: none;
|
|
168
167
|
|
|
@@ -462,12 +461,6 @@
|
|
|
462
461
|
z-index: 1;
|
|
463
462
|
}
|
|
464
463
|
|
|
465
|
-
.ec-hidden-times {
|
|
466
|
-
visibility: hidden;
|
|
467
|
-
overflow-y: hidden;
|
|
468
|
-
height: 0;
|
|
469
|
-
}
|
|
470
|
-
|
|
471
464
|
.ec-time,
|
|
472
465
|
.ec-line {
|
|
473
466
|
height: 24px;
|
|
@@ -479,6 +472,13 @@
|
|
|
479
472
|
top: -12px;
|
|
480
473
|
text-align: right;
|
|
481
474
|
white-space: nowrap;
|
|
475
|
+
|
|
476
|
+
.ec-header &,
|
|
477
|
+
.ec-all-day & {
|
|
478
|
+
visibility: hidden;
|
|
479
|
+
overflow-y: hidden;
|
|
480
|
+
height: 0;
|
|
481
|
+
}
|
|
482
482
|
}
|
|
483
483
|
|
|
484
484
|
.ec-lines {
|
package/src/storage/options.js
CHANGED
|
@@ -10,7 +10,6 @@ export function createOptions(plugins) {
|
|
|
10
10
|
today: 'today',
|
|
11
11
|
},
|
|
12
12
|
date: new Date(),
|
|
13
|
-
dateClick: undefined,
|
|
14
13
|
datesSet: undefined,
|
|
15
14
|
dayHeaderFormat: {
|
|
16
15
|
weekday: 'short',
|
|
@@ -21,6 +20,7 @@ export function createOptions(plugins) {
|
|
|
21
20
|
duration: {weeks: 1},
|
|
22
21
|
events: [],
|
|
23
22
|
eventBackgroundColor: undefined,
|
|
23
|
+
eventTextColor: undefined,
|
|
24
24
|
eventClick: undefined,
|
|
25
25
|
eventColor: undefined,
|
|
26
26
|
eventContent: undefined,
|
|
@@ -45,7 +45,6 @@ export function createOptions(plugins) {
|
|
|
45
45
|
lazyFetching: true,
|
|
46
46
|
loading: undefined,
|
|
47
47
|
locale: undefined,
|
|
48
|
-
monthMode: false,
|
|
49
48
|
nowIndicator: false,
|
|
50
49
|
selectable: false,
|
|
51
50
|
scrollTime: '06:00:00',
|
|
@@ -81,7 +80,6 @@ export function createOptions(plugins) {
|
|
|
81
80
|
handle: 'ec-handle',
|
|
82
81
|
header: 'ec-header',
|
|
83
82
|
hiddenScroll: 'ec-hidden-scroll',
|
|
84
|
-
hiddenTimes: 'ec-hidden-times',
|
|
85
83
|
highlight: 'ec-highlight',
|
|
86
84
|
icon: 'ec-icon',
|
|
87
85
|
line: 'ec-line',
|
package/src/storage/state.js
CHANGED
|
@@ -5,6 +5,7 @@ import {
|
|
|
5
5
|
activeRange,
|
|
6
6
|
currentRange,
|
|
7
7
|
events,
|
|
8
|
+
monthMode,
|
|
8
9
|
now,
|
|
9
10
|
today,
|
|
10
11
|
viewDates,
|
|
@@ -30,33 +31,32 @@ export default class {
|
|
|
30
31
|
// Private stores
|
|
31
32
|
this._queue = writable(new Map()); // debounce queue
|
|
32
33
|
this._auxiliary = writable([]); // auxiliary components
|
|
34
|
+
this._viewClass = writable(undefined);
|
|
35
|
+
this._monthMode = monthMode(this);
|
|
33
36
|
this._currentRange = currentRange(this);
|
|
34
37
|
this._activeRange = activeRange(this);
|
|
35
38
|
this._fetchedRange = writable({start: undefined, end: undefined});
|
|
36
39
|
this._events = events(this);
|
|
37
40
|
this._now = now();
|
|
38
41
|
this._today = today(this);
|
|
39
|
-
this._ignoreClick = writable(false);
|
|
40
42
|
this._intlEventTime = intl(this.locale, this.eventTimeFormat);
|
|
41
43
|
this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
|
|
42
44
|
this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
|
|
43
45
|
this._titleIntlRange = intlRange(this.locale, this.titleFormat);
|
|
46
|
+
this._bodyEl = writable(undefined);
|
|
44
47
|
this._scrollable = writable(false);
|
|
45
48
|
this._viewTitle = viewTitle(this);
|
|
46
49
|
this._viewDates = viewDates(this);
|
|
47
50
|
this._view = view2(this);
|
|
48
51
|
this._viewComponent = writable(undefined);
|
|
49
|
-
this._viewClass = writable(undefined);
|
|
50
52
|
// Resources
|
|
51
53
|
this._resBgColor = writable(noop);
|
|
54
|
+
this._resTxtColor = writable(noop);
|
|
52
55
|
// Interaction
|
|
53
56
|
this._interaction = writable({});
|
|
54
57
|
this._iEvents = writable([null, null]); // interaction events: [drag/resize, pointer]
|
|
55
|
-
this._draggable = writable(noop);
|
|
56
|
-
this._resizable = writable(noop);
|
|
57
58
|
this._classes = writable(identity);
|
|
58
59
|
this._iClass = writable(undefined);
|
|
59
|
-
this._scroll = writable(undefined);
|
|
60
60
|
|
|
61
61
|
// Let plugins create their private stores
|
|
62
62
|
for (let plugin of plugins) {
|
package/src/storage/stores.js
CHANGED
|
@@ -19,14 +19,18 @@ import {createEvents} from '@event-calendar/common';
|
|
|
19
19
|
import {createView} from '@event-calendar/common';
|
|
20
20
|
import {assign} from '@event-calendar/common';
|
|
21
21
|
|
|
22
|
+
export function monthMode(state) {
|
|
23
|
+
return derived(state._viewClass, $_viewClass => $_viewClass === 'month');
|
|
24
|
+
}
|
|
25
|
+
|
|
22
26
|
export function activeRange(state) {
|
|
23
27
|
return derived(
|
|
24
|
-
[state._currentRange, state.firstDay, state.
|
|
25
|
-
([$_currentRange, $firstDay, $
|
|
28
|
+
[state._currentRange, state.firstDay, state.slotMaxTime, state._monthMode],
|
|
29
|
+
([$_currentRange, $firstDay, $slotMaxTime, $_monthMode]) => {
|
|
26
30
|
let start = cloneDate($_currentRange.start);
|
|
27
31
|
let end = cloneDate($_currentRange.end);
|
|
28
32
|
|
|
29
|
-
if ($
|
|
33
|
+
if ($_monthMode) {
|
|
30
34
|
// First day of week
|
|
31
35
|
prevClosestDay(start, $firstDay);
|
|
32
36
|
nextClosestDay(end, $firstDay);
|
|
@@ -45,10 +49,10 @@ export function activeRange(state) {
|
|
|
45
49
|
|
|
46
50
|
export function currentRange(state) {
|
|
47
51
|
return derived(
|
|
48
|
-
[state.date, state.duration, state.
|
|
49
|
-
([$date, $duration, $
|
|
52
|
+
[state.date, state.duration, state.firstDay, state._monthMode],
|
|
53
|
+
([$date, $duration, $firstDay, $_monthMode]) => {
|
|
50
54
|
let start = cloneDate($date), end;
|
|
51
|
-
if ($
|
|
55
|
+
if ($_monthMode) {
|
|
52
56
|
start.setUTCDate(1);
|
|
53
57
|
} else if ($duration.inWeeks) {
|
|
54
58
|
// First day of week
|
|
@@ -89,9 +93,9 @@ export function viewDates(state) {
|
|
|
89
93
|
|
|
90
94
|
export function viewTitle(state) {
|
|
91
95
|
return derived(
|
|
92
|
-
[state.date, state._activeRange, state._titleIntlRange, state.
|
|
93
|
-
([$date, $_activeRange, $_titleIntlRange, $
|
|
94
|
-
return $
|
|
96
|
+
[state.date, state._activeRange, state._titleIntlRange, state._monthMode],
|
|
97
|
+
([$date, $_activeRange, $_titleIntlRange, $_monthMode]) => {
|
|
98
|
+
return $_monthMode
|
|
95
99
|
? $_titleIntlRange.format($date, $date)
|
|
96
100
|
: $_titleIntlRange.format($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
|
|
97
101
|
}
|