@event-calendar/core 5.0.0 → 5.0.2
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 +8 -8
- package/dist/index.css +89 -31
- package/dist/index.js +284 -136
- package/package.json +2 -2
- package/src/lib/components/BaseDay.svelte +5 -1
- package/src/lib/utils.js +4 -0
- package/src/plugins/day-grid/Day.svelte +2 -2
- package/src/plugins/day-grid/View.svelte +3 -3
- package/src/plugins/interaction/Action.svelte +18 -11
- package/src/plugins/resource-time-grid/View.svelte +29 -13
- package/src/plugins/resource-time-grid/index.js +1 -0
- package/src/plugins/resource-timeline/Day.svelte +2 -2
- package/src/plugins/resource-timeline/Event.svelte +2 -2
- package/src/plugins/resource-timeline/NowIndicator.svelte +2 -2
- package/src/plugins/resource-timeline/View.svelte +4 -6
- package/src/plugins/resource-timeline/lib.js +1 -1
- package/src/plugins/time-grid/Day.svelte +2 -2
- package/src/plugins/time-grid/NowIndicator.svelte +9 -6
- package/src/plugins/time-grid/View.svelte +15 -13
- package/src/storage/options.js +2 -0
- package/src/storage/stores.js +3 -3
- package/src/styles/days.css +35 -6
- package/src/styles/index.css +8 -7
- package/src/styles/now-indicator.css +2 -1
- package/src/styles/sidebar.css +21 -11
- package/src/styles/slots.css +12 -2
- package/src/styles/toolbar.css +11 -3
package/README.md
CHANGED
|
@@ -245,8 +245,8 @@ This bundle contains a version of the calendar that includes all plugins and is
|
|
|
245
245
|
|
|
246
246
|
The first step is to include the following lines of code in the `<head>` section of your page:
|
|
247
247
|
```html
|
|
248
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.
|
|
249
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.
|
|
248
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.2/dist/event-calendar.min.css">
|
|
249
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.2/dist/event-calendar.min.js"></script>
|
|
250
250
|
```
|
|
251
251
|
|
|
252
252
|
<details>
|
|
@@ -2284,18 +2284,18 @@ Defines the time slot width in pixels in `resourceTimeline` views.
|
|
|
2284
2284
|
<details>
|
|
2285
2285
|
<summary>Default</summary>
|
|
2286
2286
|
|
|
2287
|
-
`'{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', 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}'`
|
|
2287
|
+
`'{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}'`
|
|
2288
2288
|
> Views override the default value as follows:
|
|
2289
2289
|
> - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-view'})`
|
|
2290
2290
|
> - listDay `theme => ({...theme, view: 'ec-list ec-day-view'})`
|
|
2291
2291
|
> - listMonth `theme => ({...theme, view: 'ec-list ec-month-view'})`
|
|
2292
2292
|
> - listWeek `theme => ({...theme, view: 'ec-list ec-week-view'})`
|
|
2293
2293
|
> - listYear `theme => ({...theme, view: 'ec-list ec-year-view'})`
|
|
2294
|
-
> - resourceTimeGridDay `theme => ({...theme, view: 'ec-time-grid ec-
|
|
2295
|
-
> - resourceTimeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-
|
|
2296
|
-
> - resourceTimelineDay `theme => ({...theme, view: 'ec-timeline ec-
|
|
2297
|
-
> - resourceTimelineMonth `theme => ({...theme, view: 'ec-timeline ec-
|
|
2298
|
-
> - resourceTimelineWeek `theme => ({...theme, view: 'ec-timeline ec-
|
|
2294
|
+
> - resourceTimeGridDay `theme => ({...theme, view: 'ec-resource ec-time-grid ec-day-view'})`
|
|
2295
|
+
> - resourceTimeGridWeek `theme => ({...theme, view: 'ec-resource ec-time-grid ec-week-view'})`
|
|
2296
|
+
> - resourceTimelineDay `theme => ({...theme, view: 'ec-resource ec-timeline ec-day-view'})`
|
|
2297
|
+
> - resourceTimelineMonth `theme => ({...theme, view: 'ec-resource ec-timeline ec-month-view'})`
|
|
2298
|
+
> - resourceTimelineWeek `theme => ({...theme, view: 'ec-resource ec-timeline ec-week-view'})`
|
|
2299
2299
|
> - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
|
|
2300
2300
|
> - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
|
|
2301
2301
|
</details>
|
package/dist/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* EventCalendar v5.0.
|
|
2
|
+
* EventCalendar v5.0.2
|
|
3
3
|
* https://github.com/vkurko/calendar
|
|
4
4
|
*/
|
|
5
5
|
.ec {
|
|
@@ -73,6 +73,9 @@
|
|
|
73
73
|
.ec-day {
|
|
74
74
|
--ec-day-bg-color: var(--ec-bg-color);
|
|
75
75
|
background-color: var(--ec-day-bg-color);
|
|
76
|
+
border: 1px solid var(--ec-border-color);
|
|
77
|
+
border-block-start: none;
|
|
78
|
+
border-inline-start: none;
|
|
76
79
|
|
|
77
80
|
&.ec-today {
|
|
78
81
|
--ec-day-bg-color: var(--ec-today-bg-color);
|
|
@@ -84,10 +87,10 @@
|
|
|
84
87
|
|
|
85
88
|
.ec-time-grid .ec-body & {
|
|
86
89
|
background-image:
|
|
87
|
-
linear-gradient(var(--ec-day-bg-color) 1px, transparent 1px),
|
|
88
|
-
linear-gradient(var(--ec-border-color) 1px, transparent 1px),
|
|
90
|
+
linear-gradient(to top, var(--ec-day-bg-color) 1px, transparent 1px),
|
|
91
|
+
linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px),
|
|
89
92
|
linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px),
|
|
90
|
-
linear-gradient(var(--ec-border-color) 1px, transparent 1px);
|
|
93
|
+
linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);
|
|
91
94
|
background-size:
|
|
92
95
|
100% 100%,
|
|
93
96
|
100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)),
|
|
@@ -96,16 +99,26 @@
|
|
|
96
99
|
}
|
|
97
100
|
|
|
98
101
|
.ec-timeline:not(.ec-month-view) .ec-body & {
|
|
102
|
+
--ec-last-line-color: transparent;
|
|
103
|
+
--ec-direction: to left;
|
|
104
|
+
[dir="rtl"] & {
|
|
105
|
+
--ec-direction: to right;
|
|
106
|
+
}
|
|
99
107
|
background-image:
|
|
100
|
-
linear-gradient(
|
|
101
|
-
linear-gradient(
|
|
108
|
+
linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px),
|
|
109
|
+
linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px),
|
|
102
110
|
linear-gradient(var(--ec-day-bg-color) 1px, transparent 1px),
|
|
103
|
-
linear-gradient(
|
|
111
|
+
linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);
|
|
104
112
|
background-size:
|
|
105
113
|
100% 100%,
|
|
106
114
|
calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%,
|
|
107
115
|
100% 2px,
|
|
108
116
|
var(--ec-slot-width) 100%;
|
|
117
|
+
border-inline: none;
|
|
118
|
+
|
|
119
|
+
&.ec-no-ieb {
|
|
120
|
+
--ec-last-line-color: var(--ec-day-bg-color);
|
|
121
|
+
}
|
|
109
122
|
}
|
|
110
123
|
|
|
111
124
|
.ec-day-grid & {
|
|
@@ -118,6 +131,22 @@
|
|
|
118
131
|
.ec-day-grid .ec-uniform & {
|
|
119
132
|
min-block-size: auto;
|
|
120
133
|
}
|
|
134
|
+
|
|
135
|
+
.ec-list & {
|
|
136
|
+
border-inline: none;
|
|
137
|
+
|
|
138
|
+
&:last-child {
|
|
139
|
+
border: none;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
&.ec-no-ieb {
|
|
144
|
+
border-inline-end: none;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
&.ec-no-beb {
|
|
148
|
+
border-block-end: none;
|
|
149
|
+
}
|
|
121
150
|
}
|
|
122
151
|
.ec-day-head {
|
|
123
152
|
display: flex;
|
|
@@ -213,7 +242,7 @@
|
|
|
213
242
|
}
|
|
214
243
|
.ec-icon {
|
|
215
244
|
display: inline-block;
|
|
216
|
-
|
|
245
|
+
inline-size: 1em;
|
|
217
246
|
|
|
218
247
|
&.ec-prev:after,
|
|
219
248
|
&.ec-next:after {
|
|
@@ -227,11 +256,19 @@
|
|
|
227
256
|
}
|
|
228
257
|
|
|
229
258
|
&.ec-prev:after {
|
|
230
|
-
|
|
259
|
+
inset-inline-start: 3px;
|
|
260
|
+
rotate: -135deg;
|
|
261
|
+
}
|
|
262
|
+
[dir="rtl"] &.ec-prev:after {
|
|
263
|
+
rotate: 135deg;
|
|
231
264
|
}
|
|
232
265
|
|
|
233
266
|
&.ec-next:after {
|
|
234
|
-
|
|
267
|
+
inset-inline-start: -3px;
|
|
268
|
+
rotate: 45deg;
|
|
269
|
+
}
|
|
270
|
+
[dir="rtl"] &.ec-next:after {
|
|
271
|
+
rotate: -45deg;
|
|
235
272
|
}
|
|
236
273
|
}
|
|
237
274
|
.ec-sidebar {
|
|
@@ -239,12 +276,14 @@
|
|
|
239
276
|
inset-inline-start: 0;
|
|
240
277
|
z-index: 1;
|
|
241
278
|
background-color: var(--ec-bg-color);
|
|
242
|
-
border-
|
|
243
|
-
|
|
279
|
+
border-color: var(--ec-border-color);
|
|
280
|
+
border-width: 1px;
|
|
281
|
+
border-inline-end-style: solid;
|
|
244
282
|
text-align: end;
|
|
245
283
|
overflow: clip;
|
|
246
284
|
|
|
247
285
|
.ec-header & {
|
|
286
|
+
border-block-end-style: solid;
|
|
248
287
|
padding-block: .375rem;
|
|
249
288
|
}
|
|
250
289
|
|
|
@@ -253,12 +292,16 @@
|
|
|
253
292
|
}
|
|
254
293
|
|
|
255
294
|
.ec-time-grid .ec-body & {
|
|
295
|
+
--ec-direction: to left;
|
|
296
|
+
[dir="rtl"] & {
|
|
297
|
+
--ec-direction: to right;
|
|
298
|
+
}
|
|
256
299
|
background-image:
|
|
257
|
-
linear-gradient(
|
|
258
|
-
linear-gradient(var(--ec-bg-color) 1px, transparent 1px),
|
|
259
|
-
linear-gradient(var(--ec-border-color) 1px, transparent 1px),
|
|
300
|
+
linear-gradient(var(--ec-direction), transparent .375rem, var(--ec-bg-color) .375rem),
|
|
301
|
+
linear-gradient(to top, var(--ec-bg-color) 1px, transparent 1px),
|
|
302
|
+
linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px),
|
|
260
303
|
linear-gradient(to right, var(--ec-bg-color) 1px, transparent 1px),
|
|
261
|
-
linear-gradient(var(--ec-border-color) 1px, transparent 1px);
|
|
304
|
+
linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);
|
|
262
305
|
background-size:
|
|
263
306
|
100% 100%,
|
|
264
307
|
100% 100%,
|
|
@@ -271,24 +314,28 @@
|
|
|
271
314
|
grid-area: 1 / 1 / -1 / 2;
|
|
272
315
|
display: grid;
|
|
273
316
|
grid-template-rows: subgrid;
|
|
274
|
-
background-color: var(--ec-border-color);
|
|
275
317
|
}
|
|
276
318
|
}
|
|
277
319
|
.ec-row-head {
|
|
278
320
|
display: flex;
|
|
279
|
-
|
|
321
|
+
border-block-end: 1px solid var(--ec-border-color);
|
|
280
322
|
padding: .375em .75rem;
|
|
281
323
|
min-block-size: 1.5em;
|
|
324
|
+
|
|
325
|
+
&:last-child {
|
|
326
|
+
border: none;
|
|
327
|
+
}
|
|
282
328
|
}
|
|
283
329
|
.ec-expander {
|
|
284
|
-
|
|
285
|
-
|
|
330
|
+
inline-size: 1.25em;
|
|
331
|
+
margin-inline-end: .25em;
|
|
332
|
+
margin-block-start: -1px;
|
|
286
333
|
|
|
287
334
|
.ec-button {
|
|
288
335
|
line-height: normal;
|
|
289
336
|
padding: 0;
|
|
290
337
|
aspect-ratio: 1;
|
|
291
|
-
|
|
338
|
+
block-size: 1.25em;
|
|
292
339
|
}
|
|
293
340
|
}
|
|
294
341
|
.ec-slot {
|
|
@@ -316,6 +363,7 @@
|
|
|
316
363
|
|
|
317
364
|
--ec-day-bg-color: var(--ec-bg-color);
|
|
318
365
|
background-color: var(--ec-day-bg-color);
|
|
366
|
+
border-block-end: 1px solid var(--ec-border-color);
|
|
319
367
|
|
|
320
368
|
&.ec-today {
|
|
321
369
|
--ec-day-bg-color: var(--ec-today-bg-color);
|
|
@@ -325,12 +373,21 @@
|
|
|
325
373
|
--ec-day-bg-color: var(--ec-highlight-color);
|
|
326
374
|
}
|
|
327
375
|
|
|
376
|
+
--ec-last-line-color: transparent;
|
|
377
|
+
--ec-direction: to left;
|
|
378
|
+
[dir="rtl"] & {
|
|
379
|
+
--ec-direction: to right;
|
|
380
|
+
}
|
|
328
381
|
background-image:
|
|
329
|
-
linear-gradient(
|
|
330
|
-
linear-gradient(
|
|
382
|
+
linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px),
|
|
383
|
+
linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);
|
|
331
384
|
background-size:
|
|
332
385
|
100% 100%,
|
|
333
386
|
calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%;
|
|
387
|
+
|
|
388
|
+
&:last-child {
|
|
389
|
+
--ec-last-line-color: var(--ec-day-bg-color);
|
|
390
|
+
}
|
|
334
391
|
}
|
|
335
392
|
.ec-events {
|
|
336
393
|
grid-area: 1 / 2 / -1 / -1;
|
|
@@ -530,7 +587,8 @@
|
|
|
530
587
|
display: block;
|
|
531
588
|
block-size: 12px;
|
|
532
589
|
inline-size: 12px;
|
|
533
|
-
margin: -7px
|
|
590
|
+
margin-block-start: -7px;
|
|
591
|
+
margin-inline-start: -7px;
|
|
534
592
|
position: sticky;
|
|
535
593
|
inset-inline-start: calc(var(--ec-sidebar-width) - 6.5px);
|
|
536
594
|
z-index: 1;
|
|
@@ -572,8 +630,6 @@
|
|
|
572
630
|
}
|
|
573
631
|
.ec-main {
|
|
574
632
|
display: grid;
|
|
575
|
-
gap: 1px;
|
|
576
|
-
background-color: var(--ec-border-color);
|
|
577
633
|
border: 1px solid var(--ec-border-color);
|
|
578
634
|
overflow: auto;
|
|
579
635
|
/*scrollbar-width: thin;*/
|
|
@@ -613,19 +669,14 @@
|
|
|
613
669
|
grid-area: 1 / 1 / 2 / -1;
|
|
614
670
|
display: grid;
|
|
615
671
|
grid-template-columns: subgrid;
|
|
616
|
-
gap: 1px;
|
|
617
|
-
background-color: var(--ec-border-color);
|
|
618
672
|
position: sticky;
|
|
619
673
|
inset-block-start: 0;
|
|
620
674
|
z-index: 2;
|
|
621
|
-
border-block-end: 1px solid var(--ec-border-color);
|
|
622
|
-
margin-block-end: -1px;
|
|
623
675
|
}
|
|
624
676
|
.ec-grid {
|
|
625
677
|
grid-area: 1 / 1 / -1 / -1;
|
|
626
678
|
display: grid;
|
|
627
679
|
grid-template-columns: subgrid;
|
|
628
|
-
gap: 1px;
|
|
629
680
|
|
|
630
681
|
.ec-body & {
|
|
631
682
|
grid-template-rows: subgrid;
|
|
@@ -650,6 +701,9 @@
|
|
|
650
701
|
text-align: center;
|
|
651
702
|
padding: .375rem .18em;
|
|
652
703
|
background-color: var(--ec-bg-color);
|
|
704
|
+
border: 1px solid var(--ec-border-color);
|
|
705
|
+
border-block-start: none;
|
|
706
|
+
border-inline-start: none;
|
|
653
707
|
overflow: clip;
|
|
654
708
|
text-overflow: ellipsis;
|
|
655
709
|
|
|
@@ -661,6 +715,10 @@
|
|
|
661
715
|
background-color: var(--ec-highlight-color);
|
|
662
716
|
}
|
|
663
717
|
}
|
|
718
|
+
.ec-col-group:nth-last-child(1 of .ec-col-group),
|
|
719
|
+
.ec-col-head:nth-last-child(1 of .ec-col-head) {
|
|
720
|
+
border-inline-end: none;
|
|
721
|
+
}
|
|
664
722
|
.ec-col-group > *,
|
|
665
723
|
.ec-timeline .ec-col-head > * {
|
|
666
724
|
position: sticky;
|