@event-calendar/core 0.19.0 → 1.0.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 +46 -17
- package/index.css +5 -7
- package/index.js +109 -97
- package/package.json +2 -2
- package/src/Calendar.svelte +17 -21
- package/src/index.scss +7 -7
- package/src/storage/options.js +0 -2
- package/src/storage/state.js +4 -3
- 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 (34kb [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
|
|
|
@@ -68,12 +68,11 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
68
68
|
- [loading](#loading)
|
|
69
69
|
- [locale](#locale)
|
|
70
70
|
- [longPressDelay](#longpressdelay)
|
|
71
|
-
- [monthMode](#monthmode)
|
|
72
71
|
- [moreLinkContent](#morelinkcontent)
|
|
73
72
|
- [noEventsClick](#noeventsclick)
|
|
73
|
+
- [noEventsContent](#noeventscontent)
|
|
74
74
|
</td><td>
|
|
75
75
|
|
|
76
|
-
- [noEventsContent](#noeventscontent)
|
|
77
76
|
- [nowIndicator](#nowindicator)
|
|
78
77
|
- [pointer](#pointer)
|
|
79
78
|
- [resources](#resources)
|
|
@@ -193,8 +192,8 @@ import '@event-calendar/core/index.css';
|
|
|
193
192
|
### Pre-built browser ready bundle
|
|
194
193
|
Include the following lines of code in the `<head>` section of your page:
|
|
195
194
|
```html
|
|
196
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.
|
|
197
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.
|
|
195
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.0.0/event-calendar.min.css">
|
|
196
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.0.0/event-calendar.min.js"></script>
|
|
198
197
|
```
|
|
199
198
|
|
|
200
199
|
<details>
|
|
@@ -298,6 +297,7 @@ This value can be either a JavaScript Date object, or an ISO8601 date string lik
|
|
|
298
297
|
### dateClick
|
|
299
298
|
- Type `function`
|
|
300
299
|
- Default `undefined`
|
|
300
|
+
- Requires `Interaction` plugin
|
|
301
301
|
|
|
302
302
|
Callback function that is triggered when the user clicks on a date or a time.
|
|
303
303
|
|
|
@@ -327,7 +327,7 @@ function (info) {}
|
|
|
327
327
|
</td>
|
|
328
328
|
<td>
|
|
329
329
|
|
|
330
|
-
`true` or `false`. Determines if the click has occurred in the `all-day` slot.
|
|
330
|
+
`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
331
|
</tr>
|
|
332
332
|
<tr>
|
|
333
333
|
<td>
|
|
@@ -1425,14 +1425,6 @@ For touch devices, the amount of time (in milliseconds) the user must hold down
|
|
|
1425
1425
|
|
|
1426
1426
|
For a more granular configuration, see [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
|
|
1427
1427
|
|
|
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
1428
|
### moreLinkContent
|
|
1437
1429
|
- Type `string`, `object`or `function`
|
|
1438
1430
|
- Default `undefined`
|
|
@@ -1788,7 +1780,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
|
|
|
1788
1780
|
|
|
1789
1781
|
### theme
|
|
1790
1782
|
- 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',
|
|
1783
|
+
- 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
1784
|
|
|
1793
1785
|
Defines the CSS classes that the Event Calendar uses to generate HTML markup.
|
|
1794
1786
|
|
|
@@ -2019,9 +2011,46 @@ Updates a single event with the matching `event`.`id`.
|
|
|
2019
2011
|
Refetches events from all sources.
|
|
2020
2012
|
|
|
2021
2013
|
### dateFromPoint( x, y )
|
|
2022
|
-
- Return value `
|
|
2014
|
+
- Return value `object` or `null`
|
|
2015
|
+
|
|
2016
|
+
Returns an `info` object with data as if the [dateClick](#dateclick) event had fired for that point.
|
|
2023
2017
|
|
|
2024
|
-
|
|
2018
|
+
`info` object contains the following properties:
|
|
2019
|
+
<table>
|
|
2020
|
+
<tr>
|
|
2021
|
+
<td>
|
|
2022
|
+
|
|
2023
|
+
`date`
|
|
2024
|
+
</td>
|
|
2025
|
+
<td>JavaScript Date object for the date and time</td>
|
|
2026
|
+
</tr>
|
|
2027
|
+
<tr>
|
|
2028
|
+
<td>
|
|
2029
|
+
|
|
2030
|
+
`allDay`
|
|
2031
|
+
</td>
|
|
2032
|
+
<td>
|
|
2033
|
+
|
|
2034
|
+
`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>
|
|
2035
|
+
</tr>
|
|
2036
|
+
<tr>
|
|
2037
|
+
<td>
|
|
2038
|
+
|
|
2039
|
+
`dayEl`
|
|
2040
|
+
</td>
|
|
2041
|
+
<td>HTML element that represents the whole-day that contains the point</td>
|
|
2042
|
+
</tr>
|
|
2043
|
+
<tr>
|
|
2044
|
+
<td>
|
|
2045
|
+
|
|
2046
|
+
`resource`
|
|
2047
|
+
</td>
|
|
2048
|
+
<td>
|
|
2049
|
+
|
|
2050
|
+
If the current view is a resource view, the [Resource](#resource-object) object that owns this date
|
|
2051
|
+
</td>
|
|
2052
|
+
</tr>
|
|
2053
|
+
</table>
|
|
2025
2054
|
|
|
2026
2055
|
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
2056
|
|
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 = {
|
|
@@ -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,23 +360,24 @@ 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);
|
|
380
383
|
// Interaction
|
|
@@ -384,7 +387,6 @@ class State {
|
|
|
384
387
|
this._resizable = writable(noop);
|
|
385
388
|
this._classes = writable(identity);
|
|
386
389
|
this._iClass = writable(undefined);
|
|
387
|
-
this._scroll = writable(undefined);
|
|
388
390
|
|
|
389
391
|
// Let plugins create their private stores
|
|
390
392
|
for (let plugin of plugins) {
|
|
@@ -454,7 +456,7 @@ function parseOpts(opts, state) {
|
|
|
454
456
|
}
|
|
455
457
|
}
|
|
456
458
|
|
|
457
|
-
/* packages/core/src/Buttons.svelte generated by Svelte v3.
|
|
459
|
+
/* packages/core/src/Buttons.svelte generated by Svelte v3.58.0 */
|
|
458
460
|
|
|
459
461
|
function get_each_context$2(ctx, list, i) {
|
|
460
462
|
const child_ctx = ctx.slice();
|
|
@@ -737,7 +739,9 @@ function create_fragment$3(ctx) {
|
|
|
737
739
|
},
|
|
738
740
|
m(target, anchor) {
|
|
739
741
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
740
|
-
each_blocks[i]
|
|
742
|
+
if (each_blocks[i]) {
|
|
743
|
+
each_blocks[i].m(target, anchor);
|
|
744
|
+
}
|
|
741
745
|
}
|
|
742
746
|
|
|
743
747
|
insert(target, each_1_anchor, anchor);
|
|
@@ -857,7 +861,7 @@ class Buttons extends SvelteComponent {
|
|
|
857
861
|
}
|
|
858
862
|
}
|
|
859
863
|
|
|
860
|
-
/* packages/core/src/Toolbar.svelte generated by Svelte v3.
|
|
864
|
+
/* packages/core/src/Toolbar.svelte generated by Svelte v3.58.0 */
|
|
861
865
|
|
|
862
866
|
function get_each_context$1(ctx, list, i) {
|
|
863
867
|
const child_ctx = ctx.slice();
|
|
@@ -1049,7 +1053,9 @@ function create_each_block$1(ctx) {
|
|
|
1049
1053
|
insert(target, div, anchor);
|
|
1050
1054
|
|
|
1051
1055
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
1052
|
-
each_blocks[i]
|
|
1056
|
+
if (each_blocks[i]) {
|
|
1057
|
+
each_blocks[i].m(div, null);
|
|
1058
|
+
}
|
|
1053
1059
|
}
|
|
1054
1060
|
|
|
1055
1061
|
append(div, t);
|
|
@@ -1137,7 +1143,9 @@ function create_fragment$2(ctx) {
|
|
|
1137
1143
|
insert(target, div, anchor);
|
|
1138
1144
|
|
|
1139
1145
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
1140
|
-
each_blocks[i]
|
|
1146
|
+
if (each_blocks[i]) {
|
|
1147
|
+
each_blocks[i].m(div, null);
|
|
1148
|
+
}
|
|
1141
1149
|
}
|
|
1142
1150
|
|
|
1143
1151
|
current = true;
|
|
@@ -1227,7 +1235,7 @@ class Toolbar extends SvelteComponent {
|
|
|
1227
1235
|
}
|
|
1228
1236
|
}
|
|
1229
1237
|
|
|
1230
|
-
/* packages/core/src/Auxiliary.svelte generated by Svelte v3.
|
|
1238
|
+
/* packages/core/src/Auxiliary.svelte generated by Svelte v3.58.0 */
|
|
1231
1239
|
|
|
1232
1240
|
function get_each_context(ctx, list, i) {
|
|
1233
1241
|
const child_ctx = ctx.slice();
|
|
@@ -1261,7 +1269,7 @@ function create_each_block(ctx) {
|
|
|
1261
1269
|
current = true;
|
|
1262
1270
|
},
|
|
1263
1271
|
p(ctx, dirty) {
|
|
1264
|
-
if (switch_value !== (switch_value = /*component*/ ctx[11])) {
|
|
1272
|
+
if (dirty & /*$_auxiliary*/ 1 && switch_value !== (switch_value = /*component*/ ctx[11])) {
|
|
1265
1273
|
if (switch_instance) {
|
|
1266
1274
|
group_outros();
|
|
1267
1275
|
const old_component = switch_instance;
|
|
@@ -1323,7 +1331,9 @@ function create_fragment$1(ctx) {
|
|
|
1323
1331
|
},
|
|
1324
1332
|
m(target, anchor) {
|
|
1325
1333
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
1326
|
-
each_blocks[i]
|
|
1334
|
+
if (each_blocks[i]) {
|
|
1335
|
+
each_blocks[i].m(target, anchor);
|
|
1336
|
+
}
|
|
1327
1337
|
}
|
|
1328
1338
|
|
|
1329
1339
|
insert(target, each_1_anchor, anchor);
|
|
@@ -1427,7 +1437,7 @@ class Auxiliary extends SvelteComponent {
|
|
|
1427
1437
|
}
|
|
1428
1438
|
}
|
|
1429
1439
|
|
|
1430
|
-
/* packages/core/src/Calendar.svelte generated by Svelte v3.
|
|
1440
|
+
/* packages/core/src/Calendar.svelte generated by Svelte v3.58.0 */
|
|
1431
1441
|
|
|
1432
1442
|
function create_fragment(ctx) {
|
|
1433
1443
|
let div;
|
|
@@ -1441,7 +1451,7 @@ function create_fragment(ctx) {
|
|
|
1441
1451
|
let mounted;
|
|
1442
1452
|
let dispose;
|
|
1443
1453
|
toolbar = new Toolbar({});
|
|
1444
|
-
var switch_value = /*$_viewComponent*/ ctx[
|
|
1454
|
+
var switch_value = /*$_viewComponent*/ ctx[5];
|
|
1445
1455
|
|
|
1446
1456
|
function switch_props(ctx) {
|
|
1447
1457
|
return {};
|
|
@@ -1462,13 +1472,15 @@ function create_fragment(ctx) {
|
|
|
1462
1472
|
t1 = space();
|
|
1463
1473
|
create_component(auxiliary.$$.fragment);
|
|
1464
1474
|
|
|
1465
|
-
attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[
|
|
1466
|
-
? ' ' + /*$theme*/ ctx[
|
|
1467
|
-
: '') + (/*$
|
|
1468
|
-
? ' ' + /*$theme*/ ctx[
|
|
1475
|
+
attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[1].calendar + (/*$_viewClass*/ ctx[2]
|
|
1476
|
+
? ' ' + /*$theme*/ ctx[1][/*$_viewClass*/ ctx[2]]
|
|
1477
|
+
: '') + (/*$_scrollable*/ ctx[0]
|
|
1478
|
+
? ' ' + /*$theme*/ ctx[1].withScroll
|
|
1479
|
+
: '') + (/*$_iClass*/ ctx[3]
|
|
1480
|
+
? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[3]]
|
|
1469
1481
|
: '')));
|
|
1470
1482
|
|
|
1471
|
-
set_style(div, "height", /*$height*/ ctx[
|
|
1483
|
+
set_style(div, "height", /*$height*/ ctx[4]);
|
|
1472
1484
|
},
|
|
1473
1485
|
m(target, anchor) {
|
|
1474
1486
|
insert(target, div, anchor);
|
|
@@ -1480,12 +1492,12 @@ function create_fragment(ctx) {
|
|
|
1480
1492
|
current = true;
|
|
1481
1493
|
|
|
1482
1494
|
if (!mounted) {
|
|
1483
|
-
dispose = listen(window, "
|
|
1495
|
+
dispose = listen(window, "resize", /*recheckScrollable*/ ctx[18]);
|
|
1484
1496
|
mounted = true;
|
|
1485
1497
|
}
|
|
1486
1498
|
},
|
|
1487
1499
|
p(ctx, dirty) {
|
|
1488
|
-
if (switch_value !== (switch_value = /*$_viewComponent*/ ctx[
|
|
1500
|
+
if (dirty[0] & /*$_viewComponent*/ 32 && switch_value !== (switch_value = /*$_viewComponent*/ ctx[5])) {
|
|
1489
1501
|
if (switch_instance) {
|
|
1490
1502
|
group_outros();
|
|
1491
1503
|
const old_component = switch_instance;
|
|
@@ -1507,16 +1519,18 @@ function create_fragment(ctx) {
|
|
|
1507
1519
|
}
|
|
1508
1520
|
}
|
|
1509
1521
|
|
|
1510
|
-
if (!current || dirty[0] & /*$theme, $_viewClass, $_iClass*/
|
|
1511
|
-
? ' ' + /*$theme*/ ctx[
|
|
1512
|
-
: '') + (/*$
|
|
1513
|
-
? ' ' + /*$theme*/ ctx[
|
|
1522
|
+
if (!current || dirty[0] & /*$theme, $_viewClass, $_scrollable, $_iClass*/ 15 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[1].calendar + (/*$_viewClass*/ ctx[2]
|
|
1523
|
+
? ' ' + /*$theme*/ ctx[1][/*$_viewClass*/ ctx[2]]
|
|
1524
|
+
: '') + (/*$_scrollable*/ ctx[0]
|
|
1525
|
+
? ' ' + /*$theme*/ ctx[1].withScroll
|
|
1526
|
+
: '') + (/*$_iClass*/ ctx[3]
|
|
1527
|
+
? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[3]]
|
|
1514
1528
|
: '')))) {
|
|
1515
1529
|
attr(div, "class", div_class_value);
|
|
1516
1530
|
}
|
|
1517
1531
|
|
|
1518
|
-
if (!current || dirty[0] & /*$height*/
|
|
1519
|
-
set_style(div, "height", /*$height*/ ctx[
|
|
1532
|
+
if (!current || dirty[0] & /*$height*/ 16) {
|
|
1533
|
+
set_style(div, "height", /*$height*/ ctx[4]);
|
|
1520
1534
|
}
|
|
1521
1535
|
},
|
|
1522
1536
|
i(local) {
|
|
@@ -1545,8 +1559,9 @@ function create_fragment(ctx) {
|
|
|
1545
1559
|
}
|
|
1546
1560
|
|
|
1547
1561
|
function instance($$self, $$props, $$invalidate) {
|
|
1562
|
+
let $_bodyEl;
|
|
1563
|
+
let $_scrollable;
|
|
1548
1564
|
let $_queue;
|
|
1549
|
-
let $_ignoreClick;
|
|
1550
1565
|
let $events;
|
|
1551
1566
|
let $_events;
|
|
1552
1567
|
let $eventSources;
|
|
@@ -1561,18 +1576,19 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1561
1576
|
let component = get_current_component();
|
|
1562
1577
|
let state = new State(plugins, options);
|
|
1563
1578
|
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,
|
|
1579
|
+
let { _viewComponent, _viewClass, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable, events, eventSources, height, theme } = state;
|
|
1580
|
+
component_subscribe($$self, _viewComponent, value => $$invalidate(5, $_viewComponent = value));
|
|
1581
|
+
component_subscribe($$self, _viewClass, value => $$invalidate(2, $_viewClass = value));
|
|
1582
|
+
component_subscribe($$self, _bodyEl, value => $$invalidate(33, $_bodyEl = value));
|
|
1583
|
+
component_subscribe($$self, _interaction, value => $$invalidate(38, $_interaction = value));
|
|
1584
|
+
component_subscribe($$self, _iClass, value => $$invalidate(3, $_iClass = value));
|
|
1585
|
+
component_subscribe($$self, _events, value => $$invalidate(36, $_events = value));
|
|
1586
|
+
component_subscribe($$self, _queue, value => $$invalidate(34, $_queue = value));
|
|
1587
|
+
component_subscribe($$self, _scrollable, value => $$invalidate(0, $_scrollable = value));
|
|
1588
|
+
component_subscribe($$self, events, value => $$invalidate(35, $events = value));
|
|
1589
|
+
component_subscribe($$self, eventSources, value => $$invalidate(37, $eventSources = value));
|
|
1590
|
+
component_subscribe($$self, height, value => $$invalidate(4, $height = value));
|
|
1591
|
+
component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
|
|
1576
1592
|
|
|
1577
1593
|
function setOption(name, value) {
|
|
1578
1594
|
if (state.hasOwnProperty(name)) {
|
|
@@ -1651,14 +1667,8 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1651
1667
|
}
|
|
1652
1668
|
|
|
1653
1669
|
function dateFromPoint(x, y) {
|
|
1654
|
-
|
|
1655
|
-
|
|
1656
|
-
let date = runFn(el, y);
|
|
1657
|
-
return date ? toLocalDate(date) : null;
|
|
1658
|
-
}
|
|
1659
|
-
}
|
|
1660
|
-
|
|
1661
|
-
return null;
|
|
1670
|
+
let dayEl = getElementWithPayload(x, y);
|
|
1671
|
+
return dayEl ? getPayload(dayEl)(y) : null;
|
|
1662
1672
|
}
|
|
1663
1673
|
|
|
1664
1674
|
function destroy() {
|
|
@@ -1673,24 +1683,24 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1673
1683
|
}
|
|
1674
1684
|
}
|
|
1675
1685
|
|
|
1676
|
-
function handleClick(jsEvent) {
|
|
1677
|
-
if ($_ignoreClick) {
|
|
1678
|
-
ignore(jsEvent);
|
|
1679
|
-
set_store_value(_ignoreClick, $_ignoreClick = false, $_ignoreClick);
|
|
1680
|
-
}
|
|
1681
|
-
}
|
|
1682
|
-
|
|
1683
1686
|
beforeUpdate(() => {
|
|
1684
1687
|
flushDebounce($_queue);
|
|
1688
|
+
setTimeout(recheckScrollable);
|
|
1685
1689
|
});
|
|
1686
1690
|
|
|
1691
|
+
function recheckScrollable() {
|
|
1692
|
+
if ($_bodyEl) {
|
|
1693
|
+
set_store_value(_scrollable, $_scrollable = hasYScroll($_bodyEl), $_scrollable);
|
|
1694
|
+
}
|
|
1695
|
+
}
|
|
1696
|
+
|
|
1687
1697
|
$$self.$$set = $$props => {
|
|
1688
|
-
if ('plugins' in $$props) $$invalidate(
|
|
1689
|
-
if ('options' in $$props) $$invalidate(
|
|
1698
|
+
if ('plugins' in $$props) $$invalidate(19, plugins = $$props.plugins);
|
|
1699
|
+
if ('options' in $$props) $$invalidate(20, options = $$props.options);
|
|
1690
1700
|
};
|
|
1691
1701
|
|
|
1692
1702
|
$$self.$$.update = () => {
|
|
1693
|
-
if ($$self.$$.dirty[0] & /*options*/
|
|
1703
|
+
if ($$self.$$.dirty[0] & /*options*/ 1048576) {
|
|
1694
1704
|
// Reactively update options that did change
|
|
1695
1705
|
for (let [name, value] of diff(options)) {
|
|
1696
1706
|
setOption(name, value);
|
|
@@ -1699,6 +1709,7 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1699
1709
|
};
|
|
1700
1710
|
|
|
1701
1711
|
return [
|
|
1712
|
+
$_scrollable,
|
|
1702
1713
|
$theme,
|
|
1703
1714
|
$_viewClass,
|
|
1704
1715
|
$_iClass,
|
|
@@ -1706,16 +1717,17 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1706
1717
|
$_viewComponent,
|
|
1707
1718
|
_viewComponent,
|
|
1708
1719
|
_viewClass,
|
|
1709
|
-
|
|
1720
|
+
_bodyEl,
|
|
1710
1721
|
_interaction,
|
|
1711
1722
|
_iClass,
|
|
1712
1723
|
_events,
|
|
1713
1724
|
_queue,
|
|
1725
|
+
_scrollable,
|
|
1714
1726
|
events,
|
|
1715
1727
|
eventSources,
|
|
1716
1728
|
height,
|
|
1717
1729
|
theme,
|
|
1718
|
-
|
|
1730
|
+
recheckScrollable,
|
|
1719
1731
|
plugins,
|
|
1720
1732
|
options,
|
|
1721
1733
|
setOption,
|
|
@@ -1744,20 +1756,20 @@ class Calendar extends SvelteComponent {
|
|
|
1744
1756
|
create_fragment,
|
|
1745
1757
|
safe_not_equal,
|
|
1746
1758
|
{
|
|
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:
|
|
1759
|
+
plugins: 19,
|
|
1760
|
+
options: 20,
|
|
1761
|
+
setOption: 21,
|
|
1762
|
+
getOption: 22,
|
|
1763
|
+
refetchEvents: 23,
|
|
1764
|
+
getEvents: 24,
|
|
1765
|
+
getEventById: 25,
|
|
1766
|
+
addEvent: 26,
|
|
1767
|
+
updateEvent: 27,
|
|
1768
|
+
removeEventById: 28,
|
|
1769
|
+
getView: 29,
|
|
1770
|
+
unselect: 30,
|
|
1771
|
+
dateFromPoint: 31,
|
|
1772
|
+
destroy: 32
|
|
1761
1773
|
},
|
|
1762
1774
|
null,
|
|
1763
1775
|
[-1, -1]
|
|
@@ -1765,51 +1777,51 @@ class Calendar extends SvelteComponent {
|
|
|
1765
1777
|
}
|
|
1766
1778
|
|
|
1767
1779
|
get setOption() {
|
|
1768
|
-
return this.$$.ctx[
|
|
1780
|
+
return this.$$.ctx[21];
|
|
1769
1781
|
}
|
|
1770
1782
|
|
|
1771
1783
|
get getOption() {
|
|
1772
|
-
return this.$$.ctx[
|
|
1784
|
+
return this.$$.ctx[22];
|
|
1773
1785
|
}
|
|
1774
1786
|
|
|
1775
1787
|
get refetchEvents() {
|
|
1776
|
-
return this.$$.ctx[
|
|
1788
|
+
return this.$$.ctx[23];
|
|
1777
1789
|
}
|
|
1778
1790
|
|
|
1779
1791
|
get getEvents() {
|
|
1780
|
-
return this.$$.ctx[
|
|
1792
|
+
return this.$$.ctx[24];
|
|
1781
1793
|
}
|
|
1782
1794
|
|
|
1783
1795
|
get getEventById() {
|
|
1784
|
-
return this.$$.ctx[
|
|
1796
|
+
return this.$$.ctx[25];
|
|
1785
1797
|
}
|
|
1786
1798
|
|
|
1787
1799
|
get addEvent() {
|
|
1788
|
-
return this.$$.ctx[
|
|
1800
|
+
return this.$$.ctx[26];
|
|
1789
1801
|
}
|
|
1790
1802
|
|
|
1791
1803
|
get updateEvent() {
|
|
1792
|
-
return this.$$.ctx[
|
|
1804
|
+
return this.$$.ctx[27];
|
|
1793
1805
|
}
|
|
1794
1806
|
|
|
1795
1807
|
get removeEventById() {
|
|
1796
|
-
return this.$$.ctx[
|
|
1808
|
+
return this.$$.ctx[28];
|
|
1797
1809
|
}
|
|
1798
1810
|
|
|
1799
1811
|
get getView() {
|
|
1800
|
-
return this.$$.ctx[
|
|
1812
|
+
return this.$$.ctx[29];
|
|
1801
1813
|
}
|
|
1802
1814
|
|
|
1803
1815
|
get unselect() {
|
|
1804
|
-
return this.$$.ctx[
|
|
1816
|
+
return this.$$.ctx[30];
|
|
1805
1817
|
}
|
|
1806
1818
|
|
|
1807
1819
|
get dateFromPoint() {
|
|
1808
|
-
return this.$$.ctx[
|
|
1820
|
+
return this.$$.ctx[31];
|
|
1809
1821
|
}
|
|
1810
1822
|
|
|
1811
1823
|
get destroy() {
|
|
1812
|
-
return this.$$.ctx[
|
|
1824
|
+
return this.$$.ctx[32];
|
|
1813
1825
|
}
|
|
1814
1826
|
}
|
|
1815
1827
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@event-calendar/core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.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": "~0.
|
|
40
|
+
"@event-calendar/common": "~1.0.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
|
@@ -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,23 +31,24 @@ 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);
|
|
52
54
|
// Interaction
|
|
@@ -56,7 +58,6 @@ export default class {
|
|
|
56
58
|
this._resizable = writable(noop);
|
|
57
59
|
this._classes = writable(identity);
|
|
58
60
|
this._iClass = writable(undefined);
|
|
59
|
-
this._scroll = writable(undefined);
|
|
60
61
|
|
|
61
62
|
// Let plugins create their private stores
|
|
62
63
|
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
|
}
|