@event-calendar/core 0.18.1 → 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 +55 -17
- package/index.css +5 -7
- package/index.js +110 -97
- package/package.json +2 -2
- package/src/Calendar.svelte +17 -21
- package/src/index.scss +7 -7
- package/src/storage/options.js +1 -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)
|
|
@@ -86,6 +85,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
86
85
|
- [selectMinDistance](#selectmindistance)
|
|
87
86
|
- [scrollTime](#scrolltime)
|
|
88
87
|
- [slotDuration](#slotduration)
|
|
88
|
+
- [slotEventOverlap](#sloteventoverlap)
|
|
89
89
|
- [slotHeight](#slotheight)
|
|
90
90
|
- [slotLabelFormat](#slotlabelformat)
|
|
91
91
|
- [slotMaxTime](#slotmaxtime)
|
|
@@ -192,8 +192,8 @@ import '@event-calendar/core/index.css';
|
|
|
192
192
|
### Pre-built browser ready bundle
|
|
193
193
|
Include the following lines of code in the `<head>` section of your page:
|
|
194
194
|
```html
|
|
195
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.
|
|
196
|
-
<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>
|
|
197
197
|
```
|
|
198
198
|
|
|
199
199
|
<details>
|
|
@@ -297,6 +297,7 @@ This value can be either a JavaScript Date object, or an ISO8601 date string lik
|
|
|
297
297
|
### dateClick
|
|
298
298
|
- Type `function`
|
|
299
299
|
- Default `undefined`
|
|
300
|
+
- Requires `Interaction` plugin
|
|
300
301
|
|
|
301
302
|
Callback function that is triggered when the user clicks on a date or a time.
|
|
302
303
|
|
|
@@ -326,7 +327,7 @@ function (info) {}
|
|
|
326
327
|
</td>
|
|
327
328
|
<td>
|
|
328
329
|
|
|
329
|
-
`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>
|
|
330
331
|
</tr>
|
|
331
332
|
<tr>
|
|
332
333
|
<td>
|
|
@@ -1424,14 +1425,6 @@ For touch devices, the amount of time (in milliseconds) the user must hold down
|
|
|
1424
1425
|
|
|
1425
1426
|
For a more granular configuration, see [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
|
|
1426
1427
|
|
|
1427
|
-
### monthMode
|
|
1428
|
-
- Type `boolean`
|
|
1429
|
-
- Default `false`
|
|
1430
|
-
> Views override the default value as follows:
|
|
1431
|
-
> - dayGridMonth `true`
|
|
1432
|
-
|
|
1433
|
-
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).
|
|
1434
|
-
|
|
1435
1428
|
### moreLinkContent
|
|
1436
1429
|
- Type `string`, `object`or `function`
|
|
1437
1430
|
- Default `undefined`
|
|
@@ -1726,6 +1719,14 @@ Defines the frequency for displaying time slots.
|
|
|
1726
1719
|
|
|
1727
1720
|
This should be a value that can be parsed into a [Duration](#duration-object) object.
|
|
1728
1721
|
|
|
1722
|
+
### slotEventOverlap
|
|
1723
|
+
- Type `boolean`
|
|
1724
|
+
- Default `true`
|
|
1725
|
+
|
|
1726
|
+
Determines whether events in the `timeGrid`/`resourceTimeGrid` views should visually overlap when they intersect in time.
|
|
1727
|
+
|
|
1728
|
+
If set to `false`, then intersecting events will be placed next to each other.
|
|
1729
|
+
|
|
1729
1730
|
### slotHeight
|
|
1730
1731
|
- Type `integer`
|
|
1731
1732
|
- Default `24`
|
|
@@ -1779,7 +1780,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
|
|
|
1779
1780
|
|
|
1780
1781
|
### theme
|
|
1781
1782
|
- Type `object` or `function`
|
|
1782
|
-
- 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'}`
|
|
1783
1784
|
|
|
1784
1785
|
Defines the CSS classes that the Event Calendar uses to generate HTML markup.
|
|
1785
1786
|
|
|
@@ -2010,9 +2011,46 @@ Updates a single event with the matching `event`.`id`.
|
|
|
2010
2011
|
Refetches events from all sources.
|
|
2011
2012
|
|
|
2012
2013
|
### dateFromPoint( x, y )
|
|
2013
|
-
- 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.
|
|
2017
|
+
|
|
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>
|
|
2014
2038
|
|
|
2015
|
-
|
|
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>
|
|
2016
2054
|
|
|
2017
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.
|
|
2018
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,11 +46,11 @@ 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',
|
|
53
52
|
slotDuration: '00:30:00',
|
|
53
|
+
slotEventOverlap: true,
|
|
54
54
|
slotHeight: 24, // ec option
|
|
55
55
|
slotLabelFormat: {
|
|
56
56
|
hour: 'numeric',
|
|
@@ -81,7 +81,6 @@ function createOptions(plugins) {
|
|
|
81
81
|
handle: 'ec-handle',
|
|
82
82
|
header: 'ec-header',
|
|
83
83
|
hiddenScroll: 'ec-hidden-scroll',
|
|
84
|
-
hiddenTimes: 'ec-hidden-times',
|
|
85
84
|
highlight: 'ec-highlight',
|
|
86
85
|
icon: 'ec-icon',
|
|
87
86
|
line: 'ec-line',
|
|
@@ -156,14 +155,18 @@ function diff(options) {
|
|
|
156
155
|
return diff;
|
|
157
156
|
}
|
|
158
157
|
|
|
158
|
+
function monthMode(state) {
|
|
159
|
+
return derived(state._viewClass, $_viewClass => $_viewClass === 'month');
|
|
160
|
+
}
|
|
161
|
+
|
|
159
162
|
function activeRange(state) {
|
|
160
163
|
return derived(
|
|
161
|
-
[state._currentRange, state.firstDay, state.
|
|
162
|
-
([$_currentRange, $firstDay, $
|
|
164
|
+
[state._currentRange, state.firstDay, state.slotMaxTime, state._monthMode],
|
|
165
|
+
([$_currentRange, $firstDay, $slotMaxTime, $_monthMode]) => {
|
|
163
166
|
let start = cloneDate($_currentRange.start);
|
|
164
167
|
let end = cloneDate($_currentRange.end);
|
|
165
168
|
|
|
166
|
-
if ($
|
|
169
|
+
if ($_monthMode) {
|
|
167
170
|
// First day of week
|
|
168
171
|
prevClosestDay(start, $firstDay);
|
|
169
172
|
nextClosestDay(end, $firstDay);
|
|
@@ -182,10 +185,10 @@ function activeRange(state) {
|
|
|
182
185
|
|
|
183
186
|
function currentRange(state) {
|
|
184
187
|
return derived(
|
|
185
|
-
[state.date, state.duration, state.
|
|
186
|
-
([$date, $duration, $
|
|
188
|
+
[state.date, state.duration, state.firstDay, state._monthMode],
|
|
189
|
+
([$date, $duration, $firstDay, $_monthMode]) => {
|
|
187
190
|
let start = cloneDate($date), end;
|
|
188
|
-
if ($
|
|
191
|
+
if ($_monthMode) {
|
|
189
192
|
start.setUTCDate(1);
|
|
190
193
|
} else if ($duration.inWeeks) {
|
|
191
194
|
// First day of week
|
|
@@ -226,9 +229,9 @@ function viewDates(state) {
|
|
|
226
229
|
|
|
227
230
|
function viewTitle(state) {
|
|
228
231
|
return derived(
|
|
229
|
-
[state.date, state._activeRange, state._titleIntlRange, state.
|
|
230
|
-
([$date, $_activeRange, $_titleIntlRange, $
|
|
231
|
-
return $
|
|
232
|
+
[state.date, state._activeRange, state._titleIntlRange, state._monthMode],
|
|
233
|
+
([$date, $_activeRange, $_titleIntlRange, $_monthMode]) => {
|
|
234
|
+
return $_monthMode
|
|
232
235
|
? $_titleIntlRange.format($date, $date)
|
|
233
236
|
: $_titleIntlRange.format($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
|
|
234
237
|
}
|
|
@@ -357,23 +360,24 @@ class State {
|
|
|
357
360
|
// Private stores
|
|
358
361
|
this._queue = writable(new Map()); // debounce queue
|
|
359
362
|
this._auxiliary = writable([]); // auxiliary components
|
|
363
|
+
this._viewClass = writable(undefined);
|
|
364
|
+
this._monthMode = monthMode(this);
|
|
360
365
|
this._currentRange = currentRange(this);
|
|
361
366
|
this._activeRange = activeRange(this);
|
|
362
367
|
this._fetchedRange = writable({start: undefined, end: undefined});
|
|
363
368
|
this._events = events(this);
|
|
364
369
|
this._now = now();
|
|
365
370
|
this._today = today(this);
|
|
366
|
-
this._ignoreClick = writable(false);
|
|
367
371
|
this._intlEventTime = intl(this.locale, this.eventTimeFormat);
|
|
368
372
|
this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
|
|
369
373
|
this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
|
|
370
374
|
this._titleIntlRange = intlRange(this.locale, this.titleFormat);
|
|
375
|
+
this._bodyEl = writable(undefined);
|
|
371
376
|
this._scrollable = writable(false);
|
|
372
377
|
this._viewTitle = viewTitle(this);
|
|
373
378
|
this._viewDates = viewDates(this);
|
|
374
379
|
this._view = view(this);
|
|
375
380
|
this._viewComponent = writable(undefined);
|
|
376
|
-
this._viewClass = writable(undefined);
|
|
377
381
|
// Resources
|
|
378
382
|
this._resBgColor = writable(noop);
|
|
379
383
|
// Interaction
|
|
@@ -383,7 +387,6 @@ class State {
|
|
|
383
387
|
this._resizable = writable(noop);
|
|
384
388
|
this._classes = writable(identity);
|
|
385
389
|
this._iClass = writable(undefined);
|
|
386
|
-
this._scroll = writable(undefined);
|
|
387
390
|
|
|
388
391
|
// Let plugins create their private stores
|
|
389
392
|
for (let plugin of plugins) {
|
|
@@ -453,7 +456,7 @@ function parseOpts(opts, state) {
|
|
|
453
456
|
}
|
|
454
457
|
}
|
|
455
458
|
|
|
456
|
-
/* packages/core/src/Buttons.svelte generated by Svelte v3.
|
|
459
|
+
/* packages/core/src/Buttons.svelte generated by Svelte v3.58.0 */
|
|
457
460
|
|
|
458
461
|
function get_each_context$2(ctx, list, i) {
|
|
459
462
|
const child_ctx = ctx.slice();
|
|
@@ -736,7 +739,9 @@ function create_fragment$3(ctx) {
|
|
|
736
739
|
},
|
|
737
740
|
m(target, anchor) {
|
|
738
741
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
739
|
-
each_blocks[i]
|
|
742
|
+
if (each_blocks[i]) {
|
|
743
|
+
each_blocks[i].m(target, anchor);
|
|
744
|
+
}
|
|
740
745
|
}
|
|
741
746
|
|
|
742
747
|
insert(target, each_1_anchor, anchor);
|
|
@@ -856,7 +861,7 @@ class Buttons extends SvelteComponent {
|
|
|
856
861
|
}
|
|
857
862
|
}
|
|
858
863
|
|
|
859
|
-
/* packages/core/src/Toolbar.svelte generated by Svelte v3.
|
|
864
|
+
/* packages/core/src/Toolbar.svelte generated by Svelte v3.58.0 */
|
|
860
865
|
|
|
861
866
|
function get_each_context$1(ctx, list, i) {
|
|
862
867
|
const child_ctx = ctx.slice();
|
|
@@ -1048,7 +1053,9 @@ function create_each_block$1(ctx) {
|
|
|
1048
1053
|
insert(target, div, anchor);
|
|
1049
1054
|
|
|
1050
1055
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
1051
|
-
each_blocks[i]
|
|
1056
|
+
if (each_blocks[i]) {
|
|
1057
|
+
each_blocks[i].m(div, null);
|
|
1058
|
+
}
|
|
1052
1059
|
}
|
|
1053
1060
|
|
|
1054
1061
|
append(div, t);
|
|
@@ -1136,7 +1143,9 @@ function create_fragment$2(ctx) {
|
|
|
1136
1143
|
insert(target, div, anchor);
|
|
1137
1144
|
|
|
1138
1145
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
1139
|
-
each_blocks[i]
|
|
1146
|
+
if (each_blocks[i]) {
|
|
1147
|
+
each_blocks[i].m(div, null);
|
|
1148
|
+
}
|
|
1140
1149
|
}
|
|
1141
1150
|
|
|
1142
1151
|
current = true;
|
|
@@ -1226,7 +1235,7 @@ class Toolbar extends SvelteComponent {
|
|
|
1226
1235
|
}
|
|
1227
1236
|
}
|
|
1228
1237
|
|
|
1229
|
-
/* packages/core/src/Auxiliary.svelte generated by Svelte v3.
|
|
1238
|
+
/* packages/core/src/Auxiliary.svelte generated by Svelte v3.58.0 */
|
|
1230
1239
|
|
|
1231
1240
|
function get_each_context(ctx, list, i) {
|
|
1232
1241
|
const child_ctx = ctx.slice();
|
|
@@ -1260,7 +1269,7 @@ function create_each_block(ctx) {
|
|
|
1260
1269
|
current = true;
|
|
1261
1270
|
},
|
|
1262
1271
|
p(ctx, dirty) {
|
|
1263
|
-
if (switch_value !== (switch_value = /*component*/ ctx[11])) {
|
|
1272
|
+
if (dirty & /*$_auxiliary*/ 1 && switch_value !== (switch_value = /*component*/ ctx[11])) {
|
|
1264
1273
|
if (switch_instance) {
|
|
1265
1274
|
group_outros();
|
|
1266
1275
|
const old_component = switch_instance;
|
|
@@ -1322,7 +1331,9 @@ function create_fragment$1(ctx) {
|
|
|
1322
1331
|
},
|
|
1323
1332
|
m(target, anchor) {
|
|
1324
1333
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
1325
|
-
each_blocks[i]
|
|
1334
|
+
if (each_blocks[i]) {
|
|
1335
|
+
each_blocks[i].m(target, anchor);
|
|
1336
|
+
}
|
|
1326
1337
|
}
|
|
1327
1338
|
|
|
1328
1339
|
insert(target, each_1_anchor, anchor);
|
|
@@ -1426,7 +1437,7 @@ class Auxiliary extends SvelteComponent {
|
|
|
1426
1437
|
}
|
|
1427
1438
|
}
|
|
1428
1439
|
|
|
1429
|
-
/* packages/core/src/Calendar.svelte generated by Svelte v3.
|
|
1440
|
+
/* packages/core/src/Calendar.svelte generated by Svelte v3.58.0 */
|
|
1430
1441
|
|
|
1431
1442
|
function create_fragment(ctx) {
|
|
1432
1443
|
let div;
|
|
@@ -1440,7 +1451,7 @@ function create_fragment(ctx) {
|
|
|
1440
1451
|
let mounted;
|
|
1441
1452
|
let dispose;
|
|
1442
1453
|
toolbar = new Toolbar({});
|
|
1443
|
-
var switch_value = /*$_viewComponent*/ ctx[
|
|
1454
|
+
var switch_value = /*$_viewComponent*/ ctx[5];
|
|
1444
1455
|
|
|
1445
1456
|
function switch_props(ctx) {
|
|
1446
1457
|
return {};
|
|
@@ -1461,13 +1472,15 @@ function create_fragment(ctx) {
|
|
|
1461
1472
|
t1 = space();
|
|
1462
1473
|
create_component(auxiliary.$$.fragment);
|
|
1463
1474
|
|
|
1464
|
-
attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[
|
|
1465
|
-
? ' ' + /*$theme*/ ctx[
|
|
1466
|
-
: '') + (/*$
|
|
1467
|
-
? ' ' + /*$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]]
|
|
1468
1481
|
: '')));
|
|
1469
1482
|
|
|
1470
|
-
set_style(div, "height", /*$height*/ ctx[
|
|
1483
|
+
set_style(div, "height", /*$height*/ ctx[4]);
|
|
1471
1484
|
},
|
|
1472
1485
|
m(target, anchor) {
|
|
1473
1486
|
insert(target, div, anchor);
|
|
@@ -1479,12 +1492,12 @@ function create_fragment(ctx) {
|
|
|
1479
1492
|
current = true;
|
|
1480
1493
|
|
|
1481
1494
|
if (!mounted) {
|
|
1482
|
-
dispose = listen(window, "
|
|
1495
|
+
dispose = listen(window, "resize", /*recheckScrollable*/ ctx[18]);
|
|
1483
1496
|
mounted = true;
|
|
1484
1497
|
}
|
|
1485
1498
|
},
|
|
1486
1499
|
p(ctx, dirty) {
|
|
1487
|
-
if (switch_value !== (switch_value = /*$_viewComponent*/ ctx[
|
|
1500
|
+
if (dirty[0] & /*$_viewComponent*/ 32 && switch_value !== (switch_value = /*$_viewComponent*/ ctx[5])) {
|
|
1488
1501
|
if (switch_instance) {
|
|
1489
1502
|
group_outros();
|
|
1490
1503
|
const old_component = switch_instance;
|
|
@@ -1506,16 +1519,18 @@ function create_fragment(ctx) {
|
|
|
1506
1519
|
}
|
|
1507
1520
|
}
|
|
1508
1521
|
|
|
1509
|
-
if (!current || dirty[0] & /*$theme, $_viewClass, $_iClass*/
|
|
1510
|
-
? ' ' + /*$theme*/ ctx[
|
|
1511
|
-
: '') + (/*$
|
|
1512
|
-
? ' ' + /*$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]]
|
|
1513
1528
|
: '')))) {
|
|
1514
1529
|
attr(div, "class", div_class_value);
|
|
1515
1530
|
}
|
|
1516
1531
|
|
|
1517
|
-
if (!current || dirty[0] & /*$height*/
|
|
1518
|
-
set_style(div, "height", /*$height*/ ctx[
|
|
1532
|
+
if (!current || dirty[0] & /*$height*/ 16) {
|
|
1533
|
+
set_style(div, "height", /*$height*/ ctx[4]);
|
|
1519
1534
|
}
|
|
1520
1535
|
},
|
|
1521
1536
|
i(local) {
|
|
@@ -1544,8 +1559,9 @@ function create_fragment(ctx) {
|
|
|
1544
1559
|
}
|
|
1545
1560
|
|
|
1546
1561
|
function instance($$self, $$props, $$invalidate) {
|
|
1562
|
+
let $_bodyEl;
|
|
1563
|
+
let $_scrollable;
|
|
1547
1564
|
let $_queue;
|
|
1548
|
-
let $_ignoreClick;
|
|
1549
1565
|
let $events;
|
|
1550
1566
|
let $_events;
|
|
1551
1567
|
let $eventSources;
|
|
@@ -1560,18 +1576,19 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1560
1576
|
let component = get_current_component();
|
|
1561
1577
|
let state = new State(plugins, options);
|
|
1562
1578
|
setContext('state', state);
|
|
1563
|
-
let { _viewComponent, _viewClass,
|
|
1564
|
-
component_subscribe($$self, _viewComponent, value => $$invalidate(
|
|
1565
|
-
component_subscribe($$self, _viewClass, value => $$invalidate(
|
|
1566
|
-
component_subscribe($$self,
|
|
1567
|
-
component_subscribe($$self, _interaction, value => $$invalidate(
|
|
1568
|
-
component_subscribe($$self, _iClass, value => $$invalidate(
|
|
1569
|
-
component_subscribe($$self, _events, value => $$invalidate(
|
|
1570
|
-
component_subscribe($$self, _queue, value => $$invalidate(
|
|
1571
|
-
component_subscribe($$self,
|
|
1572
|
-
component_subscribe($$self,
|
|
1573
|
-
component_subscribe($$self,
|
|
1574
|
-
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));
|
|
1575
1592
|
|
|
1576
1593
|
function setOption(name, value) {
|
|
1577
1594
|
if (state.hasOwnProperty(name)) {
|
|
@@ -1650,14 +1667,8 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1650
1667
|
}
|
|
1651
1668
|
|
|
1652
1669
|
function dateFromPoint(x, y) {
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
let date = runFn(el, y);
|
|
1656
|
-
return date ? toLocalDate(date) : null;
|
|
1657
|
-
}
|
|
1658
|
-
}
|
|
1659
|
-
|
|
1660
|
-
return null;
|
|
1670
|
+
let dayEl = getElementWithPayload(x, y);
|
|
1671
|
+
return dayEl ? getPayload(dayEl)(y) : null;
|
|
1661
1672
|
}
|
|
1662
1673
|
|
|
1663
1674
|
function destroy() {
|
|
@@ -1672,24 +1683,24 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1672
1683
|
}
|
|
1673
1684
|
}
|
|
1674
1685
|
|
|
1675
|
-
function handleClick(jsEvent) {
|
|
1676
|
-
if ($_ignoreClick) {
|
|
1677
|
-
ignore(jsEvent);
|
|
1678
|
-
set_store_value(_ignoreClick, $_ignoreClick = false, $_ignoreClick);
|
|
1679
|
-
}
|
|
1680
|
-
}
|
|
1681
|
-
|
|
1682
1686
|
beforeUpdate(() => {
|
|
1683
1687
|
flushDebounce($_queue);
|
|
1688
|
+
setTimeout(recheckScrollable);
|
|
1684
1689
|
});
|
|
1685
1690
|
|
|
1691
|
+
function recheckScrollable() {
|
|
1692
|
+
if ($_bodyEl) {
|
|
1693
|
+
set_store_value(_scrollable, $_scrollable = hasYScroll($_bodyEl), $_scrollable);
|
|
1694
|
+
}
|
|
1695
|
+
}
|
|
1696
|
+
|
|
1686
1697
|
$$self.$$set = $$props => {
|
|
1687
|
-
if ('plugins' in $$props) $$invalidate(
|
|
1688
|
-
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);
|
|
1689
1700
|
};
|
|
1690
1701
|
|
|
1691
1702
|
$$self.$$.update = () => {
|
|
1692
|
-
if ($$self.$$.dirty[0] & /*options*/
|
|
1703
|
+
if ($$self.$$.dirty[0] & /*options*/ 1048576) {
|
|
1693
1704
|
// Reactively update options that did change
|
|
1694
1705
|
for (let [name, value] of diff(options)) {
|
|
1695
1706
|
setOption(name, value);
|
|
@@ -1698,6 +1709,7 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1698
1709
|
};
|
|
1699
1710
|
|
|
1700
1711
|
return [
|
|
1712
|
+
$_scrollable,
|
|
1701
1713
|
$theme,
|
|
1702
1714
|
$_viewClass,
|
|
1703
1715
|
$_iClass,
|
|
@@ -1705,16 +1717,17 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1705
1717
|
$_viewComponent,
|
|
1706
1718
|
_viewComponent,
|
|
1707
1719
|
_viewClass,
|
|
1708
|
-
|
|
1720
|
+
_bodyEl,
|
|
1709
1721
|
_interaction,
|
|
1710
1722
|
_iClass,
|
|
1711
1723
|
_events,
|
|
1712
1724
|
_queue,
|
|
1725
|
+
_scrollable,
|
|
1713
1726
|
events,
|
|
1714
1727
|
eventSources,
|
|
1715
1728
|
height,
|
|
1716
1729
|
theme,
|
|
1717
|
-
|
|
1730
|
+
recheckScrollable,
|
|
1718
1731
|
plugins,
|
|
1719
1732
|
options,
|
|
1720
1733
|
setOption,
|
|
@@ -1743,20 +1756,20 @@ class Calendar extends SvelteComponent {
|
|
|
1743
1756
|
create_fragment,
|
|
1744
1757
|
safe_not_equal,
|
|
1745
1758
|
{
|
|
1746
|
-
plugins:
|
|
1747
|
-
options:
|
|
1748
|
-
setOption:
|
|
1749
|
-
getOption:
|
|
1750
|
-
refetchEvents:
|
|
1751
|
-
getEvents:
|
|
1752
|
-
getEventById:
|
|
1753
|
-
addEvent:
|
|
1754
|
-
updateEvent:
|
|
1755
|
-
removeEventById:
|
|
1756
|
-
getView:
|
|
1757
|
-
unselect:
|
|
1758
|
-
dateFromPoint:
|
|
1759
|
-
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
|
|
1760
1773
|
},
|
|
1761
1774
|
null,
|
|
1762
1775
|
[-1, -1]
|
|
@@ -1764,51 +1777,51 @@ class Calendar extends SvelteComponent {
|
|
|
1764
1777
|
}
|
|
1765
1778
|
|
|
1766
1779
|
get setOption() {
|
|
1767
|
-
return this.$$.ctx[
|
|
1780
|
+
return this.$$.ctx[21];
|
|
1768
1781
|
}
|
|
1769
1782
|
|
|
1770
1783
|
get getOption() {
|
|
1771
|
-
return this.$$.ctx[
|
|
1784
|
+
return this.$$.ctx[22];
|
|
1772
1785
|
}
|
|
1773
1786
|
|
|
1774
1787
|
get refetchEvents() {
|
|
1775
|
-
return this.$$.ctx[
|
|
1788
|
+
return this.$$.ctx[23];
|
|
1776
1789
|
}
|
|
1777
1790
|
|
|
1778
1791
|
get getEvents() {
|
|
1779
|
-
return this.$$.ctx[
|
|
1792
|
+
return this.$$.ctx[24];
|
|
1780
1793
|
}
|
|
1781
1794
|
|
|
1782
1795
|
get getEventById() {
|
|
1783
|
-
return this.$$.ctx[
|
|
1796
|
+
return this.$$.ctx[25];
|
|
1784
1797
|
}
|
|
1785
1798
|
|
|
1786
1799
|
get addEvent() {
|
|
1787
|
-
return this.$$.ctx[
|
|
1800
|
+
return this.$$.ctx[26];
|
|
1788
1801
|
}
|
|
1789
1802
|
|
|
1790
1803
|
get updateEvent() {
|
|
1791
|
-
return this.$$.ctx[
|
|
1804
|
+
return this.$$.ctx[27];
|
|
1792
1805
|
}
|
|
1793
1806
|
|
|
1794
1807
|
get removeEventById() {
|
|
1795
|
-
return this.$$.ctx[
|
|
1808
|
+
return this.$$.ctx[28];
|
|
1796
1809
|
}
|
|
1797
1810
|
|
|
1798
1811
|
get getView() {
|
|
1799
|
-
return this.$$.ctx[
|
|
1812
|
+
return this.$$.ctx[29];
|
|
1800
1813
|
}
|
|
1801
1814
|
|
|
1802
1815
|
get unselect() {
|
|
1803
|
-
return this.$$.ctx[
|
|
1816
|
+
return this.$$.ctx[30];
|
|
1804
1817
|
}
|
|
1805
1818
|
|
|
1806
1819
|
get dateFromPoint() {
|
|
1807
|
-
return this.$$.ctx[
|
|
1820
|
+
return this.$$.ctx[31];
|
|
1808
1821
|
}
|
|
1809
1822
|
|
|
1810
1823
|
get destroy() {
|
|
1811
|
-
return this.$$.ctx[
|
|
1824
|
+
return this.$$.ctx[32];
|
|
1812
1825
|
}
|
|
1813
1826
|
}
|
|
1814
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,11 +45,11 @@ 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',
|
|
52
51
|
slotDuration: '00:30:00',
|
|
52
|
+
slotEventOverlap: true,
|
|
53
53
|
slotHeight: 24, // ec option
|
|
54
54
|
slotLabelFormat: {
|
|
55
55
|
hour: 'numeric',
|
|
@@ -80,7 +80,6 @@ export function createOptions(plugins) {
|
|
|
80
80
|
handle: 'ec-handle',
|
|
81
81
|
header: 'ec-header',
|
|
82
82
|
hiddenScroll: 'ec-hidden-scroll',
|
|
83
|
-
hiddenTimes: 'ec-hidden-times',
|
|
84
83
|
highlight: 'ec-highlight',
|
|
85
84
|
icon: 'ec-icon',
|
|
86
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
|
}
|