@event-calendar/core 2.4.1 → 2.5.1
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 +32 -27
- package/index.css +19 -12
- package/index.js +97 -67
- package/package.json +2 -2
- package/src/Calendar.svelte +4 -3
- package/src/Toolbar.svelte +2 -2
- package/src/lib/a11y.js +3 -1
- package/src/lib/date.js +2 -2
- package/src/lib/dom.js +4 -1
- package/src/lib/events.js +18 -11
- package/src/lib/view.js +5 -1
- package/src/storage/options.js +3 -0
- package/src/storage/state.js +1 -0
- package/src/styles/index.scss +21 -13
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 (32kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
|
|
8
8
|
* Zero-dependency (pre-built bundle)
|
|
9
9
|
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
|
|
10
10
|
|
|
@@ -27,6 +27,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
27
27
|
- [datesAboveResources](#datesaboveresources)
|
|
28
28
|
- [datesSet](#datesset)
|
|
29
29
|
- [dayCellFormat](#daycellformat)
|
|
30
|
+
- [dayHeaderAriaLabelFormat](#dayheaderarialabelformat)
|
|
30
31
|
- [dayHeaderFormat](#dayheaderformat)
|
|
31
32
|
- [dayMaxEvents](#daymaxevents)
|
|
32
33
|
- [dayPopoverFormat](#daypopoverformat)
|
|
@@ -197,8 +198,8 @@ import '@event-calendar/core/index.css';
|
|
|
197
198
|
### Pre-built browser ready bundle
|
|
198
199
|
Include the following lines of code in the `<head>` section of your page:
|
|
199
200
|
```html
|
|
200
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.
|
|
201
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.
|
|
201
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.5.1/event-calendar.min.css">
|
|
202
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.5.1/event-calendar.min.js"></script>
|
|
202
203
|
```
|
|
203
204
|
|
|
204
205
|
<details>
|
|
@@ -478,6 +479,31 @@ function (date) {
|
|
|
478
479
|
</tr>
|
|
479
480
|
</table>
|
|
480
481
|
|
|
482
|
+
### dayHeaderAriaLabelFormat
|
|
483
|
+
- Type `object` or `function`
|
|
484
|
+
- Default `{dateStyle: 'long'}`
|
|
485
|
+
> Views override the default value as follows:
|
|
486
|
+
> - dayGridMonth `{weekday: 'long'}`
|
|
487
|
+
|
|
488
|
+
Defines the text that is used inside the `aria-label` attribute in calendar column headings.
|
|
489
|
+
|
|
490
|
+
This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
|
|
491
|
+
|
|
492
|
+
```js
|
|
493
|
+
function (date) {
|
|
494
|
+
// return formatted date string
|
|
495
|
+
}
|
|
496
|
+
```
|
|
497
|
+
<table>
|
|
498
|
+
<tr>
|
|
499
|
+
<td>
|
|
500
|
+
|
|
501
|
+
`date`
|
|
502
|
+
</td>
|
|
503
|
+
<td>JavaScript Date object that needs to be formatted</td>
|
|
504
|
+
</tr>
|
|
505
|
+
</table>
|
|
506
|
+
|
|
481
507
|
### dayHeaderFormat
|
|
482
508
|
- Type `object` or `function`
|
|
483
509
|
- Default `{weekday: 'short', month: 'numeric', day: 'numeric'}`
|
|
@@ -2222,13 +2248,6 @@ If the current view is a resource view, the [Resource](#resource-object) object
|
|
|
2222
2248
|
|
|
2223
2249
|
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.
|
|
2224
2250
|
|
|
2225
|
-
<details>
|
|
2226
|
-
<summary>Note</summary>
|
|
2227
|
-
|
|
2228
|
-
> In the `'listDay'`, `'listWeek'`, `'listMonth'` and `'listYear'` views, the events are rendered outside the day container, so the method will return `null` for the coordinates that are inside the events.
|
|
2229
|
-
|
|
2230
|
-
</details>
|
|
2231
|
-
|
|
2232
2251
|
### destroy()
|
|
2233
2252
|
- Return value `undefined`
|
|
2234
2253
|
|
|
@@ -2300,7 +2319,7 @@ Here are all properties that exist in Event object:
|
|
|
2300
2319
|
</td>
|
|
2301
2320
|
<td>
|
|
2302
2321
|
|
|
2303
|
-
The text appearing on the event. See [Content](#content)</td>
|
|
2322
|
+
`Content` The text appearing on the event. See [Content](#content)</td>
|
|
2304
2323
|
</tr>
|
|
2305
2324
|
<tr>
|
|
2306
2325
|
<td>
|
|
@@ -2590,14 +2609,10 @@ Here are all properties that exist in Resource object:
|
|
|
2590
2609
|
|
|
2591
2610
|
`title`
|
|
2592
2611
|
</td>
|
|
2593
|
-
<td>The title of the resource</td>
|
|
2594
|
-
</tr>
|
|
2595
|
-
<tr>
|
|
2596
2612
|
<td>
|
|
2597
2613
|
|
|
2598
|
-
|
|
2614
|
+
The title of the resource. See [Content](#content).
|
|
2599
2615
|
</td>
|
|
2600
|
-
<td>The HTML version of the title</td>
|
|
2601
2616
|
</tr>
|
|
2602
2617
|
<tr>
|
|
2603
2618
|
<td>
|
|
@@ -2637,17 +2652,7 @@ Here are all admissible fields for the resource’s input object:
|
|
|
2637
2652
|
</td>
|
|
2638
2653
|
<td>
|
|
2639
2654
|
|
|
2640
|
-
`
|
|
2641
|
-
</td>
|
|
2642
|
-
</tr>
|
|
2643
|
-
<tr>
|
|
2644
|
-
<td>
|
|
2645
|
-
|
|
2646
|
-
`titleHTML`
|
|
2647
|
-
</td>
|
|
2648
|
-
<td>
|
|
2649
|
-
|
|
2650
|
-
`string` The HTML version of the title to be displayed instead of the text version. Default `''`
|
|
2655
|
+
`Content` Text that will be displayed on the resource when it is rendered. See [Content](#content). Default `''`
|
|
2651
2656
|
</td>
|
|
2652
2657
|
</tr>
|
|
2653
2658
|
<tr>
|
package/index.css
CHANGED
|
@@ -183,7 +183,8 @@
|
|
|
183
183
|
.ec-all-day,
|
|
184
184
|
.ec-body,
|
|
185
185
|
.ec-days,
|
|
186
|
-
.ec-day
|
|
186
|
+
.ec-day,
|
|
187
|
+
.ec-list .ec-day-head {
|
|
187
188
|
border: 1px solid var(--ec-border-color);
|
|
188
189
|
}
|
|
189
190
|
|
|
@@ -311,20 +312,11 @@
|
|
|
311
312
|
opacity: 0.3;
|
|
312
313
|
}
|
|
313
314
|
.ec-list .ec-day {
|
|
314
|
-
|
|
315
|
-
background-color: var(--ec-list-day-bg-color);
|
|
316
|
-
border-style: solid none;
|
|
317
|
-
padding: 8px 14px;
|
|
318
|
-
font-weight: bold;
|
|
319
|
-
position: sticky;
|
|
320
|
-
top: 0;
|
|
321
|
-
z-index: 2;
|
|
322
|
-
}
|
|
323
|
-
.ec-list .ec-day:first-child {
|
|
324
|
-
border-top: none;
|
|
315
|
+
border: none;
|
|
325
316
|
}
|
|
326
317
|
|
|
327
318
|
.ec-day-grid .ec-day-head {
|
|
319
|
+
display: block;
|
|
328
320
|
text-align: right;
|
|
329
321
|
padding: 4px 4px 3px;
|
|
330
322
|
}
|
|
@@ -338,6 +330,19 @@
|
|
|
338
330
|
cursor: pointer;
|
|
339
331
|
}
|
|
340
332
|
|
|
333
|
+
.ec-list .ec-day-head {
|
|
334
|
+
flex: 1 0 auto;
|
|
335
|
+
background-color: var(--ec-list-day-bg-color);
|
|
336
|
+
border-style: solid none;
|
|
337
|
+
margin: -1px 0 0;
|
|
338
|
+
padding: 8px 14px;
|
|
339
|
+
position: sticky;
|
|
340
|
+
top: 0;
|
|
341
|
+
z-index: 2;
|
|
342
|
+
}
|
|
343
|
+
.ec-list .ec-day:first-child .ec-day-head {
|
|
344
|
+
border-top: none;
|
|
345
|
+
}
|
|
341
346
|
.ec-list .ec-day-side {
|
|
342
347
|
float: right;
|
|
343
348
|
}
|
|
@@ -427,6 +432,8 @@
|
|
|
427
432
|
|
|
428
433
|
.ec-event-title {
|
|
429
434
|
overflow: hidden;
|
|
435
|
+
margin: unset;
|
|
436
|
+
font-weight: inherit;
|
|
430
437
|
}
|
|
431
438
|
.ec-day-grid .ec-event-title, .ec-all-day .ec-event-title {
|
|
432
439
|
min-height: 1.5em;
|
package/index.js
CHANGED
|
@@ -4,7 +4,9 @@ import { derived, get, writable, readable } from 'svelte/store';
|
|
|
4
4
|
|
|
5
5
|
function keyEnter(fn) {
|
|
6
6
|
return function (e) {
|
|
7
|
-
return e.key === 'Enter' || e.key === ' '
|
|
7
|
+
return e.key === 'Enter' || e.key === ' ' && !e.preventDefault() // prevent page scroll down
|
|
8
|
+
? fn.call(this, e)
|
|
9
|
+
: undefined;
|
|
8
10
|
};
|
|
9
11
|
}
|
|
10
12
|
|
|
@@ -134,8 +136,8 @@ function toLocalDate(date) {
|
|
|
134
136
|
);
|
|
135
137
|
}
|
|
136
138
|
|
|
137
|
-
function toISOString(date) {
|
|
138
|
-
return date.toISOString().substring(0,
|
|
139
|
+
function toISOString(date, len = 19) {
|
|
140
|
+
return date.toISOString().substring(0, len);
|
|
139
141
|
}
|
|
140
142
|
|
|
141
143
|
function datesEqual(date1, ...dates2) {
|
|
@@ -230,7 +232,7 @@ function symbol() {
|
|
|
230
232
|
return Symbol('ec');
|
|
231
233
|
}
|
|
232
234
|
|
|
233
|
-
function createElement(tag, className, content) {
|
|
235
|
+
function createElement(tag, className, content, attrs = []) {
|
|
234
236
|
let el = document.createElement(tag);
|
|
235
237
|
el.className = className;
|
|
236
238
|
if (typeof content == 'string') {
|
|
@@ -240,6 +242,9 @@ function createElement(tag, className, content) {
|
|
|
240
242
|
} else if (content.html) {
|
|
241
243
|
el.innerHTML = content.html;
|
|
242
244
|
}
|
|
245
|
+
for (let attr of attrs) {
|
|
246
|
+
el.setAttribute(...attr);
|
|
247
|
+
}
|
|
243
248
|
return el;
|
|
244
249
|
}
|
|
245
250
|
|
|
@@ -313,6 +318,10 @@ function toViewWithLocalDates(view) {
|
|
|
313
318
|
return view;
|
|
314
319
|
}
|
|
315
320
|
|
|
321
|
+
function listView(view) {
|
|
322
|
+
return view.startsWith('list');
|
|
323
|
+
}
|
|
324
|
+
|
|
316
325
|
let eventId = 1;
|
|
317
326
|
function createEvents(input) {
|
|
318
327
|
return input.map(event => ({
|
|
@@ -457,28 +466,35 @@ function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEv
|
|
|
457
466
|
})
|
|
458
467
|
: eventContent;
|
|
459
468
|
} else {
|
|
469
|
+
let domNodes;
|
|
460
470
|
switch (chunk.event.display) {
|
|
461
471
|
case 'background':
|
|
462
|
-
|
|
472
|
+
domNodes = [];
|
|
463
473
|
break;
|
|
464
474
|
case 'pointer':
|
|
465
|
-
|
|
466
|
-
domNodes: [createElement('div', theme.eventTime, timeText)]
|
|
467
|
-
};
|
|
475
|
+
domNodes = [createTimeElement(timeText, chunk, theme)];
|
|
468
476
|
break;
|
|
469
477
|
default:
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
]
|
|
475
|
-
};
|
|
478
|
+
domNodes = [
|
|
479
|
+
...chunk.event.allDay ? [] : [createTimeElement(timeText, chunk, theme)],
|
|
480
|
+
createElement('h4', theme.eventTitle, chunk.event.title)
|
|
481
|
+
];
|
|
476
482
|
}
|
|
483
|
+
content = {domNodes};
|
|
477
484
|
}
|
|
478
485
|
|
|
479
486
|
return [timeText, content];
|
|
480
487
|
}
|
|
481
488
|
|
|
489
|
+
function createTimeElement(timeText, chunk, theme) {
|
|
490
|
+
return createElement(
|
|
491
|
+
'time',
|
|
492
|
+
theme.eventTime,
|
|
493
|
+
timeText,
|
|
494
|
+
[['datetime', toISOString(chunk.start)]]
|
|
495
|
+
);
|
|
496
|
+
}
|
|
497
|
+
|
|
482
498
|
function createEventClasses(eventClassNames, event, _view) {
|
|
483
499
|
if (eventClassNames) {
|
|
484
500
|
if (is_function(eventClassNames)) {
|
|
@@ -609,6 +625,9 @@ function createOptions(plugins) {
|
|
|
609
625
|
month: 'numeric',
|
|
610
626
|
day: 'numeric'
|
|
611
627
|
},
|
|
628
|
+
dayHeaderAriaLabelFormat: {
|
|
629
|
+
dateStyle: 'long'
|
|
630
|
+
},
|
|
612
631
|
displayEventEnd: true,
|
|
613
632
|
duration: {weeks: 1},
|
|
614
633
|
events: [],
|
|
@@ -959,6 +978,7 @@ class State {
|
|
|
959
978
|
this._intlEventTime = intlRange(this.locale, this.eventTimeFormat);
|
|
960
979
|
this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
|
|
961
980
|
this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
|
|
981
|
+
this._intlDayHeaderAL = intl(this.locale, this.dayHeaderAriaLabelFormat);
|
|
962
982
|
this._intlTitle = intlRange(this.locale, this.titleFormat);
|
|
963
983
|
this._bodyEl = writable(undefined);
|
|
964
984
|
this._scrollable = writable(false);
|
|
@@ -1091,7 +1111,7 @@ function validKey(key, state) {
|
|
|
1091
1111
|
return state.hasOwnProperty(key) && key[0] !== '_';
|
|
1092
1112
|
}
|
|
1093
1113
|
|
|
1094
|
-
/* packages/core/src/Buttons.svelte generated by Svelte v4.2.
|
|
1114
|
+
/* packages/core/src/Buttons.svelte generated by Svelte v4.2.8 */
|
|
1095
1115
|
|
|
1096
1116
|
function get_each_context$2(ctx, list, i) {
|
|
1097
1117
|
const child_ctx = ctx.slice();
|
|
@@ -1544,7 +1564,7 @@ class Buttons extends SvelteComponent {
|
|
|
1544
1564
|
}
|
|
1545
1565
|
}
|
|
1546
1566
|
|
|
1547
|
-
/* packages/core/src/Toolbar.svelte generated by Svelte v4.2.
|
|
1567
|
+
/* packages/core/src/Toolbar.svelte generated by Svelte v4.2.8 */
|
|
1548
1568
|
|
|
1549
1569
|
function get_each_context$1(ctx, list, i) {
|
|
1550
1570
|
const child_ctx = ctx.slice();
|
|
@@ -1807,8 +1827,8 @@ function create_each_block$1(ctx) {
|
|
|
1807
1827
|
}
|
|
1808
1828
|
|
|
1809
1829
|
function create_fragment$2(ctx) {
|
|
1810
|
-
let
|
|
1811
|
-
let
|
|
1830
|
+
let nav;
|
|
1831
|
+
let nav_class_value;
|
|
1812
1832
|
let current;
|
|
1813
1833
|
let each_value = ensure_array_like(Object.keys(/*sections*/ ctx[0]));
|
|
1814
1834
|
let each_blocks = [];
|
|
@@ -1823,20 +1843,20 @@ function create_fragment$2(ctx) {
|
|
|
1823
1843
|
|
|
1824
1844
|
return {
|
|
1825
1845
|
c() {
|
|
1826
|
-
|
|
1846
|
+
nav = element("nav");
|
|
1827
1847
|
|
|
1828
1848
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
1829
1849
|
each_blocks[i].c();
|
|
1830
1850
|
}
|
|
1831
1851
|
|
|
1832
|
-
attr(
|
|
1852
|
+
attr(nav, "class", nav_class_value = /*$theme*/ ctx[1].toolbar);
|
|
1833
1853
|
},
|
|
1834
1854
|
m(target, anchor) {
|
|
1835
|
-
insert(target,
|
|
1855
|
+
insert(target, nav, anchor);
|
|
1836
1856
|
|
|
1837
1857
|
for (let i = 0; i < each_blocks.length; i += 1) {
|
|
1838
1858
|
if (each_blocks[i]) {
|
|
1839
|
-
each_blocks[i].m(
|
|
1859
|
+
each_blocks[i].m(nav, null);
|
|
1840
1860
|
}
|
|
1841
1861
|
}
|
|
1842
1862
|
|
|
@@ -1857,7 +1877,7 @@ function create_fragment$2(ctx) {
|
|
|
1857
1877
|
each_blocks[i] = create_each_block$1(child_ctx);
|
|
1858
1878
|
each_blocks[i].c();
|
|
1859
1879
|
transition_in(each_blocks[i], 1);
|
|
1860
|
-
each_blocks[i].m(
|
|
1880
|
+
each_blocks[i].m(nav, null);
|
|
1861
1881
|
}
|
|
1862
1882
|
}
|
|
1863
1883
|
|
|
@@ -1870,8 +1890,8 @@ function create_fragment$2(ctx) {
|
|
|
1870
1890
|
check_outros();
|
|
1871
1891
|
}
|
|
1872
1892
|
|
|
1873
|
-
if (!current || dirty & /*$theme*/ 2 &&
|
|
1874
|
-
attr(
|
|
1893
|
+
if (!current || dirty & /*$theme*/ 2 && nav_class_value !== (nav_class_value = /*$theme*/ ctx[1].toolbar)) {
|
|
1894
|
+
attr(nav, "class", nav_class_value);
|
|
1875
1895
|
}
|
|
1876
1896
|
},
|
|
1877
1897
|
i(local) {
|
|
@@ -1894,7 +1914,7 @@ function create_fragment$2(ctx) {
|
|
|
1894
1914
|
},
|
|
1895
1915
|
d(detaching) {
|
|
1896
1916
|
if (detaching) {
|
|
1897
|
-
detach(
|
|
1917
|
+
detach(nav);
|
|
1898
1918
|
}
|
|
1899
1919
|
|
|
1900
1920
|
destroy_each(each_blocks, detaching);
|
|
@@ -1930,7 +1950,7 @@ class Toolbar extends SvelteComponent {
|
|
|
1930
1950
|
}
|
|
1931
1951
|
}
|
|
1932
1952
|
|
|
1933
|
-
/* packages/core/src/Auxiliary.svelte generated by Svelte v4.2.
|
|
1953
|
+
/* packages/core/src/Auxiliary.svelte generated by Svelte v4.2.8 */
|
|
1934
1954
|
|
|
1935
1955
|
function get_each_context(ctx, list, i) {
|
|
1936
1956
|
const child_ctx = ctx.slice();
|
|
@@ -2138,7 +2158,7 @@ class Auxiliary extends SvelteComponent {
|
|
|
2138
2158
|
}
|
|
2139
2159
|
}
|
|
2140
2160
|
|
|
2141
|
-
/* packages/core/src/Calendar.svelte generated by Svelte v4.2.
|
|
2161
|
+
/* packages/core/src/Calendar.svelte generated by Svelte v4.2.8 */
|
|
2142
2162
|
|
|
2143
2163
|
function create_fragment(ctx) {
|
|
2144
2164
|
let div;
|
|
@@ -2146,13 +2166,14 @@ function create_fragment(ctx) {
|
|
|
2146
2166
|
let t0;
|
|
2147
2167
|
let switch_instance;
|
|
2148
2168
|
let div_class_value;
|
|
2169
|
+
let div_role_value;
|
|
2149
2170
|
let t1;
|
|
2150
2171
|
let auxiliary;
|
|
2151
2172
|
let current;
|
|
2152
2173
|
let mounted;
|
|
2153
2174
|
let dispose;
|
|
2154
2175
|
toolbar = new Toolbar({});
|
|
2155
|
-
var switch_value = /*$_viewComponent*/ ctx[
|
|
2176
|
+
var switch_value = /*$_viewComponent*/ ctx[5];
|
|
2156
2177
|
|
|
2157
2178
|
function switch_props(ctx, dirty) {
|
|
2158
2179
|
return {};
|
|
@@ -2179,6 +2200,7 @@ function create_fragment(ctx) {
|
|
|
2179
2200
|
? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[2]]
|
|
2180
2201
|
: '')));
|
|
2181
2202
|
|
|
2203
|
+
attr(div, "role", div_role_value = listView(/*$view*/ ctx[4]) ? 'list' : 'table');
|
|
2182
2204
|
set_style(div, "height", /*$height*/ ctx[3]);
|
|
2183
2205
|
},
|
|
2184
2206
|
m(target, anchor) {
|
|
@@ -2191,12 +2213,12 @@ function create_fragment(ctx) {
|
|
|
2191
2213
|
current = true;
|
|
2192
2214
|
|
|
2193
2215
|
if (!mounted) {
|
|
2194
|
-
dispose = listen(window, "resize", /*recheckScrollable*/ ctx[
|
|
2216
|
+
dispose = listen(window, "resize", /*recheckScrollable*/ ctx[16]);
|
|
2195
2217
|
mounted = true;
|
|
2196
2218
|
}
|
|
2197
2219
|
},
|
|
2198
2220
|
p(ctx, dirty) {
|
|
2199
|
-
if (dirty[0] & /*$_viewComponent*/
|
|
2221
|
+
if (dirty[0] & /*$_viewComponent*/ 32 && switch_value !== (switch_value = /*$_viewComponent*/ ctx[5])) {
|
|
2200
2222
|
if (switch_instance) {
|
|
2201
2223
|
group_outros();
|
|
2202
2224
|
const old_component = switch_instance;
|
|
@@ -2226,6 +2248,10 @@ function create_fragment(ctx) {
|
|
|
2226
2248
|
attr(div, "class", div_class_value);
|
|
2227
2249
|
}
|
|
2228
2250
|
|
|
2251
|
+
if (!current || dirty[0] & /*$view*/ 16 && div_role_value !== (div_role_value = listView(/*$view*/ ctx[4]) ? 'list' : 'table')) {
|
|
2252
|
+
attr(div, "role", div_role_value);
|
|
2253
|
+
}
|
|
2254
|
+
|
|
2229
2255
|
if (dirty[0] & /*$height*/ 8) {
|
|
2230
2256
|
set_style(div, "height", /*$height*/ ctx[3]);
|
|
2231
2257
|
}
|
|
@@ -2267,22 +2293,24 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2267
2293
|
let $theme;
|
|
2268
2294
|
let $_iClass;
|
|
2269
2295
|
let $height;
|
|
2296
|
+
let $view;
|
|
2270
2297
|
let $_viewComponent;
|
|
2271
2298
|
let { plugins = [] } = $$props;
|
|
2272
2299
|
let { options = {} } = $$props;
|
|
2273
2300
|
let component = get_current_component();
|
|
2274
2301
|
let state = new State(plugins, options);
|
|
2275
2302
|
setContext('state', state);
|
|
2276
|
-
let { _viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable,
|
|
2277
|
-
component_subscribe($$self, _viewComponent, value => $$invalidate(
|
|
2278
|
-
component_subscribe($$self, _bodyEl, value => $$invalidate(
|
|
2279
|
-
component_subscribe($$self, _interaction, value => $$invalidate(
|
|
2303
|
+
let { _viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable, height, theme, view } = state;
|
|
2304
|
+
component_subscribe($$self, _viewComponent, value => $$invalidate(5, $_viewComponent = value));
|
|
2305
|
+
component_subscribe($$self, _bodyEl, value => $$invalidate(31, $_bodyEl = value));
|
|
2306
|
+
component_subscribe($$self, _interaction, value => $$invalidate(33, $_interaction = value));
|
|
2280
2307
|
component_subscribe($$self, _iClass, value => $$invalidate(2, $_iClass = value));
|
|
2281
|
-
component_subscribe($$self, _events, value => $$invalidate(
|
|
2282
|
-
component_subscribe($$self, _queue, value => $$invalidate(
|
|
2308
|
+
component_subscribe($$self, _events, value => $$invalidate(34, $_events = value));
|
|
2309
|
+
component_subscribe($$self, _queue, value => $$invalidate(32, $_queue = value));
|
|
2283
2310
|
component_subscribe($$self, _scrollable, value => $$invalidate(0, $_scrollable = value));
|
|
2284
2311
|
component_subscribe($$self, height, value => $$invalidate(3, $height = value));
|
|
2285
2312
|
component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
|
|
2313
|
+
component_subscribe($$self, view, value => $$invalidate(4, $view = value));
|
|
2286
2314
|
|
|
2287
2315
|
// Reactively update options that did change
|
|
2288
2316
|
let prevOptions = { ...options };
|
|
@@ -2378,12 +2406,12 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2378
2406
|
}
|
|
2379
2407
|
|
|
2380
2408
|
$$self.$$set = $$props => {
|
|
2381
|
-
if ('plugins' in $$props) $$invalidate(
|
|
2382
|
-
if ('options' in $$props) $$invalidate(
|
|
2409
|
+
if ('plugins' in $$props) $$invalidate(17, plugins = $$props.plugins);
|
|
2410
|
+
if ('options' in $$props) $$invalidate(18, options = $$props.options);
|
|
2383
2411
|
};
|
|
2384
2412
|
|
|
2385
2413
|
$$self.$$.update = () => {
|
|
2386
|
-
if ($$self.$$.dirty[0] & /*options*/
|
|
2414
|
+
if ($$self.$$.dirty[0] & /*options*/ 262144) {
|
|
2387
2415
|
for (let [name, value] of diff(options, prevOptions)) {
|
|
2388
2416
|
setOption(name, value);
|
|
2389
2417
|
}
|
|
@@ -2395,6 +2423,7 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2395
2423
|
$theme,
|
|
2396
2424
|
$_iClass,
|
|
2397
2425
|
$height,
|
|
2426
|
+
$view,
|
|
2398
2427
|
$_viewComponent,
|
|
2399
2428
|
_viewComponent,
|
|
2400
2429
|
_bodyEl,
|
|
@@ -2405,6 +2434,7 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2405
2434
|
_scrollable,
|
|
2406
2435
|
height,
|
|
2407
2436
|
theme,
|
|
2437
|
+
view,
|
|
2408
2438
|
recheckScrollable,
|
|
2409
2439
|
plugins,
|
|
2410
2440
|
options,
|
|
@@ -2434,20 +2464,20 @@ class Calendar extends SvelteComponent {
|
|
|
2434
2464
|
create_fragment,
|
|
2435
2465
|
safe_not_equal,
|
|
2436
2466
|
{
|
|
2437
|
-
plugins:
|
|
2438
|
-
options:
|
|
2439
|
-
setOption:
|
|
2440
|
-
getOption:
|
|
2441
|
-
refetchEvents:
|
|
2442
|
-
getEvents:
|
|
2443
|
-
getEventById:
|
|
2444
|
-
addEvent:
|
|
2445
|
-
updateEvent:
|
|
2446
|
-
removeEventById:
|
|
2447
|
-
getView:
|
|
2448
|
-
unselect:
|
|
2449
|
-
dateFromPoint:
|
|
2450
|
-
destroy:
|
|
2467
|
+
plugins: 17,
|
|
2468
|
+
options: 18,
|
|
2469
|
+
setOption: 19,
|
|
2470
|
+
getOption: 20,
|
|
2471
|
+
refetchEvents: 21,
|
|
2472
|
+
getEvents: 22,
|
|
2473
|
+
getEventById: 23,
|
|
2474
|
+
addEvent: 24,
|
|
2475
|
+
updateEvent: 25,
|
|
2476
|
+
removeEventById: 26,
|
|
2477
|
+
getView: 27,
|
|
2478
|
+
unselect: 28,
|
|
2479
|
+
dateFromPoint: 29,
|
|
2480
|
+
destroy: 30
|
|
2451
2481
|
},
|
|
2452
2482
|
null,
|
|
2453
2483
|
[-1, -1]
|
|
@@ -2455,52 +2485,52 @@ class Calendar extends SvelteComponent {
|
|
|
2455
2485
|
}
|
|
2456
2486
|
|
|
2457
2487
|
get setOption() {
|
|
2458
|
-
return this.$$.ctx[
|
|
2488
|
+
return this.$$.ctx[19];
|
|
2459
2489
|
}
|
|
2460
2490
|
|
|
2461
2491
|
get getOption() {
|
|
2462
|
-
return this.$$.ctx[
|
|
2492
|
+
return this.$$.ctx[20];
|
|
2463
2493
|
}
|
|
2464
2494
|
|
|
2465
2495
|
get refetchEvents() {
|
|
2466
|
-
return this.$$.ctx[
|
|
2496
|
+
return this.$$.ctx[21];
|
|
2467
2497
|
}
|
|
2468
2498
|
|
|
2469
2499
|
get getEvents() {
|
|
2470
|
-
return this.$$.ctx[
|
|
2500
|
+
return this.$$.ctx[22];
|
|
2471
2501
|
}
|
|
2472
2502
|
|
|
2473
2503
|
get getEventById() {
|
|
2474
|
-
return this.$$.ctx[
|
|
2504
|
+
return this.$$.ctx[23];
|
|
2475
2505
|
}
|
|
2476
2506
|
|
|
2477
2507
|
get addEvent() {
|
|
2478
|
-
return this.$$.ctx[
|
|
2508
|
+
return this.$$.ctx[24];
|
|
2479
2509
|
}
|
|
2480
2510
|
|
|
2481
2511
|
get updateEvent() {
|
|
2482
|
-
return this.$$.ctx[
|
|
2512
|
+
return this.$$.ctx[25];
|
|
2483
2513
|
}
|
|
2484
2514
|
|
|
2485
2515
|
get removeEventById() {
|
|
2486
|
-
return this.$$.ctx[
|
|
2516
|
+
return this.$$.ctx[26];
|
|
2487
2517
|
}
|
|
2488
2518
|
|
|
2489
2519
|
get getView() {
|
|
2490
|
-
return this.$$.ctx[
|
|
2520
|
+
return this.$$.ctx[27];
|
|
2491
2521
|
}
|
|
2492
2522
|
|
|
2493
2523
|
get unselect() {
|
|
2494
|
-
return this.$$.ctx[
|
|
2524
|
+
return this.$$.ctx[28];
|
|
2495
2525
|
}
|
|
2496
2526
|
|
|
2497
2527
|
get dateFromPoint() {
|
|
2498
|
-
return this.$$.ctx[
|
|
2528
|
+
return this.$$.ctx[29];
|
|
2499
2529
|
}
|
|
2500
2530
|
|
|
2501
2531
|
get destroy() {
|
|
2502
|
-
return this.$$.ctx[
|
|
2532
|
+
return this.$$.ctx[30];
|
|
2503
2533
|
}
|
|
2504
2534
|
}
|
|
2505
2535
|
|
|
2506
|
-
export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, themeView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates };
|
|
2536
|
+
export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, listView, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, themeView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@event-calendar/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.5.1",
|
|
4
4
|
"title": "Event Calendar Core package",
|
|
5
5
|
"description": "Full-sized drag & drop event calendar with resource view",
|
|
6
6
|
"keywords": [
|
|
@@ -27,6 +27,6 @@
|
|
|
27
27
|
"./package.json": "./package.json"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"svelte": "^4.
|
|
30
|
+
"svelte": "^4.2.8"
|
|
31
31
|
}
|
|
32
32
|
}
|
package/src/Calendar.svelte
CHANGED
|
@@ -16,7 +16,8 @@
|
|
|
16
16
|
getElementWithPayload,
|
|
17
17
|
getPayload,
|
|
18
18
|
flushDebounce,
|
|
19
|
-
hasYScroll
|
|
19
|
+
hasYScroll,
|
|
20
|
+
listView
|
|
20
21
|
} from './lib.js';
|
|
21
22
|
|
|
22
23
|
export let plugins = [];
|
|
@@ -27,8 +28,7 @@
|
|
|
27
28
|
let state = new State(plugins, options);
|
|
28
29
|
setContext('state', state);
|
|
29
30
|
|
|
30
|
-
let {_viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable,
|
|
31
|
-
events, eventSources, height, theme} = state;
|
|
31
|
+
let {_viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable, height, theme, view} = state;
|
|
32
32
|
|
|
33
33
|
// Reactively update options that did change
|
|
34
34
|
let prevOptions = {...options};
|
|
@@ -125,6 +125,7 @@
|
|
|
125
125
|
<div
|
|
126
126
|
class="{$theme.calendar} {$theme.view}{$_scrollable ? ' ' + $theme.withScroll : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
|
|
127
127
|
style:height={$height}
|
|
128
|
+
role="{listView($view) ? 'list' : 'table'}"
|
|
128
129
|
>
|
|
129
130
|
<Toolbar/>
|
|
130
131
|
<svelte:component this={$_viewComponent}/>
|
package/src/Toolbar.svelte
CHANGED
package/src/lib/a11y.js
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
|
|
2
2
|
export function keyEnter(fn) {
|
|
3
3
|
return function (e) {
|
|
4
|
-
return e.key === 'Enter' || e.key === ' '
|
|
4
|
+
return e.key === 'Enter' || e.key === ' ' && !e.preventDefault() // prevent page scroll down
|
|
5
|
+
? fn.call(this, e)
|
|
6
|
+
: undefined;
|
|
5
7
|
};
|
|
6
8
|
}
|
package/src/lib/date.js
CHANGED
|
@@ -87,8 +87,8 @@ export function toLocalDate(date) {
|
|
|
87
87
|
);
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
export function toISOString(date) {
|
|
91
|
-
return date.toISOString().substring(0,
|
|
90
|
+
export function toISOString(date, len = 19) {
|
|
91
|
+
return date.toISOString().substring(0, len);
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
export function datesEqual(date1, ...dates2) {
|
package/src/lib/dom.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {symbol} from './utils.js';
|
|
2
2
|
|
|
3
|
-
export function createElement(tag, className, content) {
|
|
3
|
+
export function createElement(tag, className, content, attrs = []) {
|
|
4
4
|
let el = document.createElement(tag);
|
|
5
5
|
el.className = className;
|
|
6
6
|
if (typeof content == 'string') {
|
|
@@ -10,6 +10,9 @@ export function createElement(tag, className, content) {
|
|
|
10
10
|
} else if (content.html) {
|
|
11
11
|
el.innerHTML = content.html;
|
|
12
12
|
}
|
|
13
|
+
for (let attr of attrs) {
|
|
14
|
+
el.setAttribute(...attr);
|
|
15
|
+
}
|
|
13
16
|
return el;
|
|
14
17
|
}
|
|
15
18
|
|
package/src/lib/events.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, noTimePart, copyTime} from './date';
|
|
1
|
+
import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, toISOString, noTimePart, copyTime} from './date';
|
|
2
2
|
import {createElement} from './dom';
|
|
3
3
|
import {assign} from './utils';
|
|
4
4
|
import {toViewWithLocalDates} from './view';
|
|
@@ -148,28 +148,35 @@ export function createEventContent(chunk, displayEventEnd, eventContent, theme,
|
|
|
148
148
|
})
|
|
149
149
|
: eventContent;
|
|
150
150
|
} else {
|
|
151
|
+
let domNodes;
|
|
151
152
|
switch (chunk.event.display) {
|
|
152
153
|
case 'background':
|
|
153
|
-
|
|
154
|
+
domNodes = [];
|
|
154
155
|
break;
|
|
155
156
|
case 'pointer':
|
|
156
|
-
|
|
157
|
-
domNodes: [createElement('div', theme.eventTime, timeText)]
|
|
158
|
-
};
|
|
157
|
+
domNodes = [createTimeElement(timeText, chunk, theme)];
|
|
159
158
|
break;
|
|
160
159
|
default:
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
]
|
|
166
|
-
};
|
|
160
|
+
domNodes = [
|
|
161
|
+
...chunk.event.allDay ? [] : [createTimeElement(timeText, chunk, theme)],
|
|
162
|
+
createElement('h4', theme.eventTitle, chunk.event.title)
|
|
163
|
+
];
|
|
167
164
|
}
|
|
165
|
+
content = {domNodes};
|
|
168
166
|
}
|
|
169
167
|
|
|
170
168
|
return [timeText, content];
|
|
171
169
|
}
|
|
172
170
|
|
|
171
|
+
function createTimeElement(timeText, chunk, theme) {
|
|
172
|
+
return createElement(
|
|
173
|
+
'time',
|
|
174
|
+
theme.eventTime,
|
|
175
|
+
timeText,
|
|
176
|
+
[['datetime', toISOString(chunk.start)]]
|
|
177
|
+
);
|
|
178
|
+
}
|
|
179
|
+
|
|
173
180
|
export function createEventClasses(eventClassNames, event, _view) {
|
|
174
181
|
if (eventClassNames) {
|
|
175
182
|
if (is_function(eventClassNames)) {
|
package/src/lib/view.js
CHANGED
package/src/storage/options.js
CHANGED
package/src/storage/state.js
CHANGED
|
@@ -44,6 +44,7 @@ export default class {
|
|
|
44
44
|
this._intlEventTime = intlRange(this.locale, this.eventTimeFormat);
|
|
45
45
|
this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
|
|
46
46
|
this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
|
|
47
|
+
this._intlDayHeaderAL = intl(this.locale, this.dayHeaderAriaLabelFormat);
|
|
47
48
|
this._intlTitle = intlRange(this.locale, this.titleFormat);
|
|
48
49
|
this._bodyEl = writable(undefined);
|
|
49
50
|
this._scrollable = writable(false);
|
package/src/styles/index.scss
CHANGED
|
@@ -138,7 +138,8 @@
|
|
|
138
138
|
.ec-all-day,
|
|
139
139
|
.ec-body,
|
|
140
140
|
.ec-days,
|
|
141
|
-
.ec-day
|
|
141
|
+
.ec-day,
|
|
142
|
+
.ec-list .ec-day-head {
|
|
142
143
|
border: 1px solid var(--ec-border-color);
|
|
143
144
|
}
|
|
144
145
|
|
|
@@ -288,23 +289,13 @@
|
|
|
288
289
|
}
|
|
289
290
|
|
|
290
291
|
.ec-list & {
|
|
291
|
-
|
|
292
|
-
background-color: var(--ec-list-day-bg-color);
|
|
293
|
-
border-style: solid none;
|
|
294
|
-
padding: 8px 14px;
|
|
295
|
-
font-weight: bold;
|
|
296
|
-
position: sticky;
|
|
297
|
-
top: 0;
|
|
298
|
-
z-index: 2;
|
|
299
|
-
|
|
300
|
-
&:first-child {
|
|
301
|
-
border-top: none;
|
|
302
|
-
}
|
|
292
|
+
border: none;
|
|
303
293
|
}
|
|
304
294
|
}
|
|
305
295
|
|
|
306
296
|
.ec-day-grid {
|
|
307
297
|
.ec-day-head {
|
|
298
|
+
display: block;
|
|
308
299
|
text-align: right;
|
|
309
300
|
padding: 4px 4px 3px;
|
|
310
301
|
}
|
|
@@ -322,6 +313,21 @@
|
|
|
322
313
|
}
|
|
323
314
|
|
|
324
315
|
.ec-list {
|
|
316
|
+
.ec-day-head {
|
|
317
|
+
flex: 1 0 auto;
|
|
318
|
+
background-color: var(--ec-list-day-bg-color);
|
|
319
|
+
border-style: solid none;
|
|
320
|
+
margin: -1px 0 0;
|
|
321
|
+
padding: 8px 14px;
|
|
322
|
+
position: sticky;
|
|
323
|
+
top: 0;
|
|
324
|
+
z-index: 2;
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
.ec-day:first-child .ec-day-head {
|
|
328
|
+
border-top: none;
|
|
329
|
+
}
|
|
330
|
+
|
|
325
331
|
.ec-day-side {
|
|
326
332
|
float: right;
|
|
327
333
|
}
|
|
@@ -424,6 +430,8 @@
|
|
|
424
430
|
|
|
425
431
|
.ec-event-title {
|
|
426
432
|
overflow: hidden;
|
|
433
|
+
margin: unset;
|
|
434
|
+
font-weight: inherit;
|
|
427
435
|
|
|
428
436
|
.ec-day-grid &,
|
|
429
437
|
.ec-all-day & {
|