@event-calendar/core 5.1.3 → 5.2.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 -13
- package/dist/index.css +11 -5
- package/dist/index.js +229 -151
- package/package.json +1 -1
- package/src/Calendar.svelte +8 -2
- package/src/lib/chunks.js +25 -9
- package/src/lib/date.js +4 -2
- package/src/lib/utils.js +12 -4
- package/src/plugins/day-grid/Day.svelte +7 -5
- package/src/plugins/day-grid/Event.svelte +3 -3
- package/src/plugins/day-grid/Popup.svelte +1 -2
- package/src/plugins/day-grid/View.svelte +10 -8
- package/src/plugins/day-grid/derived.js +2 -2
- package/src/plugins/day-grid/index.js +20 -4
- package/src/plugins/list/Day.svelte +1 -1
- package/src/plugins/resource-timeline/View.svelte +25 -16
- package/src/plugins/resource-timeline/derived.js +5 -3
- package/src/plugins/resource-timeline/lib.js +25 -11
- package/src/plugins/resource-timeline/state.svelte.js +1 -1
- package/src/plugins/time-grid/View.svelte +4 -4
- package/src/storage/derived.js +5 -7
- package/src/storage/effects.js +1 -1
- package/src/styles/days.css +4 -1
- package/src/styles/popup.css +6 -3
package/README.md
CHANGED
|
@@ -246,8 +246,8 @@ This bundle contains a version of the calendar that includes all plugins and is
|
|
|
246
246
|
|
|
247
247
|
The first step is to include the following lines of code in the `<head>` section of your page:
|
|
248
248
|
```html
|
|
249
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.
|
|
250
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.
|
|
249
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.0/dist/event-calendar.min.css">
|
|
250
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.0/dist/event-calendar.min.js"></script>
|
|
251
251
|
```
|
|
252
252
|
|
|
253
253
|
<details>
|
|
@@ -337,9 +337,16 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
|
|
|
337
337
|
|
|
338
338
|
### buttonText
|
|
339
339
|
- Type `object` or `function`
|
|
340
|
-
|
|
340
|
+
<ul>
|
|
341
|
+
<li>
|
|
342
|
+
<details>
|
|
343
|
+
<summary>Default</summary>
|
|
344
|
+
|
|
345
|
+
`{close: 'Close', dayGridMonth: 'month', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'resources', resourceTimeGridWeek: 'resources', resourceTimelineDay: 'timeline', resourceTimelineMonth: 'timeline', resourceTimelineWeek: 'timeline', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
|
|
341
346
|
> Views override the default value as follows:
|
|
347
|
+
> - dayGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
|
|
342
348
|
> - dayGridMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
|
|
349
|
+
> - dayGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
|
|
343
350
|
> - listDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
|
|
344
351
|
> - listMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
|
|
345
352
|
> - listWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
|
|
@@ -352,6 +359,10 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
|
|
|
352
359
|
> - timeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
|
|
353
360
|
> - timeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
|
|
354
361
|
|
|
362
|
+
</details>
|
|
363
|
+
</li>
|
|
364
|
+
</ul>
|
|
365
|
+
|
|
355
366
|
Text that is displayed in buttons of the header toolbar.
|
|
356
367
|
|
|
357
368
|
This value can be either a plain object with all necessary properties, or a callback function that receives default button text object and should return a new one:
|
|
@@ -465,7 +476,7 @@ function (customButtons) {
|
|
|
465
476
|
|
|
466
477
|
Date that is currently displayed on the calendar.
|
|
467
478
|
|
|
468
|
-
This value can be either a JavaScript Date object, or an ISO8601 date string like `'
|
|
479
|
+
This value can be either a JavaScript Date object, or an ISO8601 date string like `'2026-12-31'`.
|
|
469
480
|
|
|
470
481
|
### dateClick
|
|
471
482
|
- Type `function`
|
|
@@ -599,7 +610,7 @@ The current [View](#view-object) object
|
|
|
599
610
|
- Type `object` or `function`
|
|
600
611
|
- Default `{day: 'numeric'}`
|
|
601
612
|
|
|
602
|
-
Defines the text that is displayed inside the day cell in the `
|
|
613
|
+
Defines the text that is displayed inside the day cell in the `dayGridMonth` view.
|
|
603
614
|
|
|
604
615
|
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 a [Content](#content) with the formatted string:
|
|
605
616
|
|
|
@@ -647,6 +658,7 @@ function (date) {
|
|
|
647
658
|
- Type `object` or `function`
|
|
648
659
|
- Default `{weekday: 'short', month: 'numeric', day: 'numeric'}`
|
|
649
660
|
> Views override the default value as follows:
|
|
661
|
+
> - dayGridDay `{weekday: 'long'}`
|
|
650
662
|
> - dayGridMonth `{weekday: 'short'}`
|
|
651
663
|
> - resourceTimelineMonth `{weekday: 'short', day: 'numeric'}`
|
|
652
664
|
> - timeGridDay `{weekday: 'long'}`
|
|
@@ -697,7 +709,9 @@ function (date) {
|
|
|
697
709
|
- Type `boolean`
|
|
698
710
|
- Default `true`
|
|
699
711
|
> Views override the default value as follows:
|
|
712
|
+
> - dayGridDay `false`
|
|
700
713
|
> - dayGridMonth `false`
|
|
714
|
+
> - dayGridWeek `false`
|
|
701
715
|
> - resourceTimelineDay `false`
|
|
702
716
|
> - resourceTimelineMonth `false`
|
|
703
717
|
> - resourceTimelineWeek `false`
|
|
@@ -724,6 +738,7 @@ Determines whether the calendar should automatically scroll during the event dra
|
|
|
724
738
|
- Type `string`, `integer` or `object`
|
|
725
739
|
- Default `{weeks: 1}`
|
|
726
740
|
> Views override the default value as follows:
|
|
741
|
+
> - dayGridDay `{days: 1}`
|
|
727
742
|
> - dayGridMonth `{months: 1}`
|
|
728
743
|
> - listDay `{days: 1}`
|
|
729
744
|
> - listMonth `{months: 1}`
|
|
@@ -1799,7 +1814,7 @@ Exclude certain days-of-the-week from being displayed, where Sunday is `0`, Mond
|
|
|
1799
1814
|
|
|
1800
1815
|
Array of dates that need to be highlighted in the calendar.
|
|
1801
1816
|
|
|
1802
|
-
Each date can be either an ISO8601 date string like `'
|
|
1817
|
+
Each date can be either an ISO8601 date string like `'2026-12-31'`, or a JavaScript Date object.
|
|
1803
1818
|
|
|
1804
1819
|
### lazyFetching
|
|
1805
1820
|
- Type `boolean`
|
|
@@ -2297,7 +2312,9 @@ If not specified, then equal to [slotDuration](#slotduration).
|
|
|
2297
2312
|
|
|
2298
2313
|
`'{allDay: 'ec-all-day', active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', colHead: 'ec-col-head', day: 'ec-day', dayHead: 'ec-day-head', disabled: 'ec-disabled', event: 'ec-event', eventBody: 'ec-event-body', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', grid: 'ec-grid', header: 'ec-header', hidden: 'ec-hidden', highlight: 'ec-highlight', icon: 'ec-icon', main: 'ec-main', noIeb: 'ec-no-ieb', noBeb: 'ec-no-beb', today: 'ec-today', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-list ec-week-view', weekdays: ['ec-sun', ec-mon', ec-tue', ec-wed', ec-thu', ec-fri', ec-sat'], draggable: 'ec-draggable', ghost: 'ec-ghost', preview: 'ec-preview', pointer: 'ec-pointer', resizer: 'ec-resizer', start: 'ec-start', dragging: 'ec-dragging', resizingY: 'ec-resizing-y', resizingX: 'ec-resizing-x', selecting: 'ec-selecting', uniform: 'ec-uniform', dayFoot: 'ec-day-foot', otherMonth: 'ec-other-month', popup: 'ec-popup', weekNumber: 'ec-week-number', daySide: 'ec-day-side', eventTag: 'ec-event-tag', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', sidebar: 'ec-sidebar', slot: 'ec-slot', colGroup: 'ec-col-group', expander: 'ec-expander', rowHead: 'ec-row-head', slots: 'ec-slots}'`
|
|
2299
2314
|
> Views override the default value as follows:
|
|
2315
|
+
> - dayGridDay `theme => ({...theme, view: 'ec-day-grid ec-day-view'})`
|
|
2300
2316
|
> - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-view'})`
|
|
2317
|
+
> - dayGridWeek `theme => ({...theme, view: 'ec-day-grid ec-week-view'})`
|
|
2301
2318
|
> - listDay `theme => ({...theme, view: 'ec-list ec-day-view'})`
|
|
2302
2319
|
> - listMonth `theme => ({...theme, view: 'ec-list ec-month-view'})`
|
|
2303
2320
|
> - listWeek `theme => ({...theme, view: 'ec-list ec-week-view'})`
|
|
@@ -2438,7 +2455,7 @@ The range should be an object with the following properties:
|
|
|
2438
2455
|
</td>
|
|
2439
2456
|
<td>
|
|
2440
2457
|
|
|
2441
|
-
`string` or `Date` This should be either an ISO8601 date string like `'
|
|
2458
|
+
`string` or `Date` This should be either an ISO8601 date string like `'2026-12-31'`, or a JavaScript Date object holding the range start date
|
|
2442
2459
|
</td>
|
|
2443
2460
|
</tr>
|
|
2444
2461
|
<tr>
|
|
@@ -2448,7 +2465,7 @@ The range should be an object with the following properties:
|
|
|
2448
2465
|
</td>
|
|
2449
2466
|
<td>
|
|
2450
2467
|
|
|
2451
|
-
`string` or `Date` This should be either an ISO8601 date string like `'
|
|
2468
|
+
`string` or `Date` This should be either an ISO8601 date string like `'2026-12-31'`, or a JavaScript Date object holding the range end date
|
|
2452
2469
|
</td>
|
|
2453
2470
|
</tr>
|
|
2454
2471
|
</table>
|
|
@@ -2457,9 +2474,25 @@ It is not necessary to specify both properties. The range may have only `start`
|
|
|
2457
2474
|
|
|
2458
2475
|
### view
|
|
2459
2476
|
- Type `string`
|
|
2460
|
-
- Default `'
|
|
2461
|
-
|
|
2462
|
-
The view that is displayed in the calendar.
|
|
2477
|
+
- Default `'timeGridWeek'`
|
|
2478
|
+
|
|
2479
|
+
The view that is displayed in the calendar.
|
|
2480
|
+
|
|
2481
|
+
The following values are available:
|
|
2482
|
+
- `'dayGridDay'`
|
|
2483
|
+
- `'dayGridWeek'`
|
|
2484
|
+
- `'dayGridMonth'`
|
|
2485
|
+
- `'listDay'`
|
|
2486
|
+
- `'listWeek'`
|
|
2487
|
+
- `'listMonth'`
|
|
2488
|
+
- `'listYear'`
|
|
2489
|
+
- `'resourceTimeGridDay'`
|
|
2490
|
+
- `'resourceTimeGridWeek'`
|
|
2491
|
+
- `'resourceTimelineDay'`
|
|
2492
|
+
- `'resourceTimelineWeek'`
|
|
2493
|
+
- `'resourceTimelineMonth'`
|
|
2494
|
+
- `'timeGridDay'`
|
|
2495
|
+
- `'timeGridWeek'`
|
|
2463
2496
|
|
|
2464
2497
|
### viewDidMount
|
|
2465
2498
|
- Type `function`
|
|
@@ -2878,7 +2911,7 @@ Here are all admissible fields for the event’s input object:
|
|
|
2878
2911
|
</td>
|
|
2879
2912
|
<td>
|
|
2880
2913
|
|
|
2881
|
-
`string` or `Date` This should be either an ISO8601 datetime string like `'
|
|
2914
|
+
`string` or `Date` This should be either an ISO8601 datetime string like `'2026-12-31 09:00:00'`, or a JavaScript Date object holding the event’s start time
|
|
2882
2915
|
</td>
|
|
2883
2916
|
</tr>
|
|
2884
2917
|
<tr>
|
|
@@ -2888,7 +2921,7 @@ Here are all admissible fields for the event’s input object:
|
|
|
2888
2921
|
</td>
|
|
2889
2922
|
<td>
|
|
2890
2923
|
|
|
2891
|
-
`string` or `Date` This should be either an ISO8601 datetime string like `'
|
|
2924
|
+
`string` or `Date` This should be either an ISO8601 datetime string like `'2026-12-31 13:00:00'`, or a JavaScript Date object holding the event’s end time
|
|
2892
2925
|
</td>
|
|
2893
2926
|
</tr>
|
|
2894
2927
|
<tr>
|
package/dist/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* EventCalendar v5.
|
|
2
|
+
* EventCalendar v5.2.0
|
|
3
3
|
* https://github.com/vkurko/calendar
|
|
4
4
|
*/
|
|
5
5
|
.ec {
|
|
@@ -152,7 +152,10 @@
|
|
|
152
152
|
display: flex;
|
|
153
153
|
flex-direction: row-reverse;
|
|
154
154
|
justify-content: space-between;
|
|
155
|
-
|
|
155
|
+
|
|
156
|
+
.ec-day-grid.ec-month-view & {
|
|
157
|
+
padding: .375rem;
|
|
158
|
+
}
|
|
156
159
|
|
|
157
160
|
.ec-day.ec-other-month & time {
|
|
158
161
|
opacity: .3;
|
|
@@ -596,10 +599,11 @@
|
|
|
596
599
|
position: relative;
|
|
597
600
|
display: flex;
|
|
598
601
|
flex-direction: column;
|
|
602
|
+
box-sizing: border-box;
|
|
599
603
|
block-size: max-content;
|
|
600
|
-
inline-size:
|
|
601
|
-
min-block-size:
|
|
602
|
-
min-inline-size:
|
|
604
|
+
inline-size: 125%;
|
|
605
|
+
min-block-size: 8em;
|
|
606
|
+
min-inline-size: 12em;
|
|
603
607
|
padding: .375rem .75rem .75rem;
|
|
604
608
|
background-color: var(--ec-popup-bg-color);
|
|
605
609
|
border: 1px solid var(--ec-border-color);
|
|
@@ -620,6 +624,8 @@
|
|
|
620
624
|
.ec-events {
|
|
621
625
|
--ec-event-col-gap: 0;
|
|
622
626
|
display: block;
|
|
627
|
+
overflow-y: auto;
|
|
628
|
+
pointer-events: auto;
|
|
623
629
|
}
|
|
624
630
|
}
|
|
625
631
|
.ec {
|