@event-calendar/core 5.0.1 → 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 +74 -25
- package/dist/index.js +98 -40
- 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/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 +2 -2
- package/src/plugins/time-grid/View.svelte +6 -6
- package/src/storage/options.js +2 -0
- 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 +17 -8
- package/src/styles/slots.css +12 -2
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;
|
|
@@ -247,12 +276,14 @@
|
|
|
247
276
|
inset-inline-start: 0;
|
|
248
277
|
z-index: 1;
|
|
249
278
|
background-color: var(--ec-bg-color);
|
|
250
|
-
border-
|
|
251
|
-
|
|
279
|
+
border-color: var(--ec-border-color);
|
|
280
|
+
border-width: 1px;
|
|
281
|
+
border-inline-end-style: solid;
|
|
252
282
|
text-align: end;
|
|
253
283
|
overflow: clip;
|
|
254
284
|
|
|
255
285
|
.ec-header & {
|
|
286
|
+
border-block-end-style: solid;
|
|
256
287
|
padding-block: .375rem;
|
|
257
288
|
}
|
|
258
289
|
|
|
@@ -261,12 +292,16 @@
|
|
|
261
292
|
}
|
|
262
293
|
|
|
263
294
|
.ec-time-grid .ec-body & {
|
|
295
|
+
--ec-direction: to left;
|
|
296
|
+
[dir="rtl"] & {
|
|
297
|
+
--ec-direction: to right;
|
|
298
|
+
}
|
|
264
299
|
background-image:
|
|
265
|
-
linear-gradient(
|
|
266
|
-
linear-gradient(var(--ec-bg-color) 1px, transparent 1px),
|
|
267
|
-
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),
|
|
268
303
|
linear-gradient(to right, var(--ec-bg-color) 1px, transparent 1px),
|
|
269
|
-
linear-gradient(var(--ec-border-color) 1px, transparent 1px);
|
|
304
|
+
linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);
|
|
270
305
|
background-size:
|
|
271
306
|
100% 100%,
|
|
272
307
|
100% 100%,
|
|
@@ -279,14 +314,17 @@
|
|
|
279
314
|
grid-area: 1 / 1 / -1 / 2;
|
|
280
315
|
display: grid;
|
|
281
316
|
grid-template-rows: subgrid;
|
|
282
|
-
background-color: var(--ec-border-color);
|
|
283
317
|
}
|
|
284
318
|
}
|
|
285
319
|
.ec-row-head {
|
|
286
320
|
display: flex;
|
|
287
|
-
|
|
321
|
+
border-block-end: 1px solid var(--ec-border-color);
|
|
288
322
|
padding: .375em .75rem;
|
|
289
323
|
min-block-size: 1.5em;
|
|
324
|
+
|
|
325
|
+
&:last-child {
|
|
326
|
+
border: none;
|
|
327
|
+
}
|
|
290
328
|
}
|
|
291
329
|
.ec-expander {
|
|
292
330
|
inline-size: 1.25em;
|
|
@@ -325,6 +363,7 @@
|
|
|
325
363
|
|
|
326
364
|
--ec-day-bg-color: var(--ec-bg-color);
|
|
327
365
|
background-color: var(--ec-day-bg-color);
|
|
366
|
+
border-block-end: 1px solid var(--ec-border-color);
|
|
328
367
|
|
|
329
368
|
&.ec-today {
|
|
330
369
|
--ec-day-bg-color: var(--ec-today-bg-color);
|
|
@@ -334,12 +373,21 @@
|
|
|
334
373
|
--ec-day-bg-color: var(--ec-highlight-color);
|
|
335
374
|
}
|
|
336
375
|
|
|
376
|
+
--ec-last-line-color: transparent;
|
|
377
|
+
--ec-direction: to left;
|
|
378
|
+
[dir="rtl"] & {
|
|
379
|
+
--ec-direction: to right;
|
|
380
|
+
}
|
|
337
381
|
background-image:
|
|
338
|
-
linear-gradient(
|
|
339
|
-
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);
|
|
340
384
|
background-size:
|
|
341
385
|
100% 100%,
|
|
342
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
|
+
}
|
|
343
391
|
}
|
|
344
392
|
.ec-events {
|
|
345
393
|
grid-area: 1 / 2 / -1 / -1;
|
|
@@ -539,7 +587,8 @@
|
|
|
539
587
|
display: block;
|
|
540
588
|
block-size: 12px;
|
|
541
589
|
inline-size: 12px;
|
|
542
|
-
margin: -7px
|
|
590
|
+
margin-block-start: -7px;
|
|
591
|
+
margin-inline-start: -7px;
|
|
543
592
|
position: sticky;
|
|
544
593
|
inset-inline-start: calc(var(--ec-sidebar-width) - 6.5px);
|
|
545
594
|
z-index: 1;
|
|
@@ -581,8 +630,6 @@
|
|
|
581
630
|
}
|
|
582
631
|
.ec-main {
|
|
583
632
|
display: grid;
|
|
584
|
-
gap: 1px;
|
|
585
|
-
background-color: var(--ec-border-color);
|
|
586
633
|
border: 1px solid var(--ec-border-color);
|
|
587
634
|
overflow: auto;
|
|
588
635
|
/*scrollbar-width: thin;*/
|
|
@@ -622,19 +669,14 @@
|
|
|
622
669
|
grid-area: 1 / 1 / 2 / -1;
|
|
623
670
|
display: grid;
|
|
624
671
|
grid-template-columns: subgrid;
|
|
625
|
-
gap: 1px;
|
|
626
|
-
background-color: var(--ec-border-color);
|
|
627
672
|
position: sticky;
|
|
628
673
|
inset-block-start: 0;
|
|
629
674
|
z-index: 2;
|
|
630
|
-
border-block-end: 1px solid var(--ec-border-color);
|
|
631
|
-
margin-block-end: -1px;
|
|
632
675
|
}
|
|
633
676
|
.ec-grid {
|
|
634
677
|
grid-area: 1 / 1 / -1 / -1;
|
|
635
678
|
display: grid;
|
|
636
679
|
grid-template-columns: subgrid;
|
|
637
|
-
gap: 1px;
|
|
638
680
|
|
|
639
681
|
.ec-body & {
|
|
640
682
|
grid-template-rows: subgrid;
|
|
@@ -659,6 +701,9 @@
|
|
|
659
701
|
text-align: center;
|
|
660
702
|
padding: .375rem .18em;
|
|
661
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;
|
|
662
707
|
overflow: clip;
|
|
663
708
|
text-overflow: ellipsis;
|
|
664
709
|
|
|
@@ -670,6 +715,10 @@
|
|
|
670
715
|
background-color: var(--ec-highlight-color);
|
|
671
716
|
}
|
|
672
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
|
+
}
|
|
673
722
|
.ec-col-group > *,
|
|
674
723
|
.ec-timeline .ec-col-head > * {
|
|
675
724
|
position: sticky;
|
package/dist/index.js
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
|
import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
|
|
@@ -259,6 +259,9 @@ function stopPropagation(fn, _this = void 0) {
|
|
|
259
259
|
}
|
|
260
260
|
};
|
|
261
261
|
}
|
|
262
|
+
function isRtl() {
|
|
263
|
+
return window.getComputedStyle(document.documentElement).direction === "rtl";
|
|
264
|
+
}
|
|
262
265
|
let payloadProp = symbol();
|
|
263
266
|
function setPayload(obj, payload) {
|
|
264
267
|
obj[payloadProp] = payload;
|
|
@@ -827,6 +830,10 @@ function createOptions(plugins) {
|
|
|
827
830
|
highlight: "ec-highlight",
|
|
828
831
|
icon: "ec-icon",
|
|
829
832
|
main: "ec-main",
|
|
833
|
+
noBeb: "ec-no-beb",
|
|
834
|
+
// no block end border
|
|
835
|
+
noIeb: "ec-no-ieb",
|
|
836
|
+
// no inline end border
|
|
830
837
|
today: "ec-today",
|
|
831
838
|
title: "ec-title",
|
|
832
839
|
toolbar: "ec-toolbar",
|
|
@@ -1734,7 +1741,7 @@ function BaseDay($$anchor, $$props) {
|
|
|
1734
1741
|
const $theme = () => $.store_get(theme, "$theme", $$stores);
|
|
1735
1742
|
const $_interaction = () => $.store_get(_interaction, "$_interaction", $$stores);
|
|
1736
1743
|
const [$$stores, $$cleanup] = $.setup_stores();
|
|
1737
|
-
let el = $.prop($$props, "el", 15), allDay = $.prop($$props, "allDay", 3, false), resource = $.prop($$props, "resource", 3, void 0), dateFromPoint = $.prop($$props, "dateFromPoint", 3, () => $$props.date), classes = $.prop($$props, "classes", 3, identity), disabled = $.prop($$props, "disabled", 3, false), highlight = $.prop($$props, "highlight", 3, false), role = $.prop($$props, "role", 3, "cell");
|
|
1744
|
+
let el = $.prop($$props, "el", 15), allDay = $.prop($$props, "allDay", 3, false), resource = $.prop($$props, "resource", 3, void 0), dateFromPoint = $.prop($$props, "dateFromPoint", 3, () => $$props.date), classes = $.prop($$props, "classes", 3, identity), disabled = $.prop($$props, "disabled", 3, false), highlight = $.prop($$props, "highlight", 3, false), role = $.prop($$props, "role", 3, "cell"), noIeb = $.prop($$props, "noIeb", 3, false), noBeb = $.prop($$props, "noBeb", 3, false);
|
|
1738
1745
|
let { _interaction, _today, highlightedDates, theme } = getContext("state");
|
|
1739
1746
|
let isToday = $.derived(() => datesEqual($$props.date, $_today()));
|
|
1740
1747
|
let classNames = $.derived(() => classes()([
|
|
@@ -1742,7 +1749,9 @@ function BaseDay($$anchor, $$props) {
|
|
|
1742
1749
|
$theme().weekdays?.[$$props.date.getUTCDay()],
|
|
1743
1750
|
$.get(isToday) && $theme().today,
|
|
1744
1751
|
highlight() && $theme().highlight,
|
|
1745
|
-
disabled() && $theme().disabled
|
|
1752
|
+
disabled() && $theme().disabled,
|
|
1753
|
+
noIeb() && $theme().noIeb,
|
|
1754
|
+
noBeb() && $theme().noBeb
|
|
1746
1755
|
]));
|
|
1747
1756
|
onMount(() => {
|
|
1748
1757
|
setPayload(el(), (x, y) => {
|
|
@@ -2109,6 +2118,12 @@ function Day$3($$anchor, $$props) {
|
|
|
2109
2118
|
get highlight() {
|
|
2110
2119
|
return $.get(highlight);
|
|
2111
2120
|
},
|
|
2121
|
+
get noIeb() {
|
|
2122
|
+
return $$props.noIeb;
|
|
2123
|
+
},
|
|
2124
|
+
get noBeb() {
|
|
2125
|
+
return $$props.noBeb;
|
|
2126
|
+
},
|
|
2112
2127
|
children: ($$anchor2, $$slotProps) => {
|
|
2113
2128
|
var fragment_1 = root_1$8();
|
|
2114
2129
|
var div = $.first_child(fragment_1);
|
|
@@ -2534,15 +2549,25 @@ function View$3($$anchor, $$props) {
|
|
|
2534
2549
|
$.reset(header);
|
|
2535
2550
|
var div_2 = $.sibling(header, 2);
|
|
2536
2551
|
var div_3 = $.child(div_2);
|
|
2537
|
-
$.each(div_3, 21, () => $.get(grid), $.index, ($$anchor2, days) => {
|
|
2552
|
+
$.each(div_3, 21, () => $.get(grid), $.index, ($$anchor2, days, i) => {
|
|
2538
2553
|
var fragment = $.comment();
|
|
2539
2554
|
var node = $.first_child(fragment);
|
|
2540
|
-
$.each(node, 17, () => $.get(days), $.index, ($$anchor3, day) => {
|
|
2541
|
-
|
|
2542
|
-
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2555
|
+
$.each(node, 17, () => $.get(days), $.index, ($$anchor3, day, j) => {
|
|
2556
|
+
{
|
|
2557
|
+
let $0 = $.derived(() => j + 1 === $.get(days).length);
|
|
2558
|
+
let $1 = $.derived(() => i + 1 === $.get(grid).length);
|
|
2559
|
+
Day$3($$anchor3, {
|
|
2560
|
+
get day() {
|
|
2561
|
+
return $.get(day);
|
|
2562
|
+
},
|
|
2563
|
+
get noIeb() {
|
|
2564
|
+
return $.get($0);
|
|
2565
|
+
},
|
|
2566
|
+
get noBeb() {
|
|
2567
|
+
return $.get($1);
|
|
2568
|
+
}
|
|
2569
|
+
});
|
|
2570
|
+
}
|
|
2546
2571
|
});
|
|
2547
2572
|
$.append($$anchor2, fragment);
|
|
2548
2573
|
});
|
|
@@ -4099,6 +4124,12 @@ function Day$1($$anchor, $$props) {
|
|
|
4099
4124
|
get highlight() {
|
|
4100
4125
|
return $.get(highlight);
|
|
4101
4126
|
},
|
|
4127
|
+
get noIeb() {
|
|
4128
|
+
return $$props.noIeb;
|
|
4129
|
+
},
|
|
4130
|
+
get noBeb() {
|
|
4131
|
+
return $$props.noBeb;
|
|
4132
|
+
},
|
|
4102
4133
|
get el() {
|
|
4103
4134
|
return $.get(el);
|
|
4104
4135
|
},
|
|
@@ -4221,7 +4252,7 @@ function NowIndicator$1($$anchor, $$props) {
|
|
|
4221
4252
|
});
|
|
4222
4253
|
let observerOptions = $.derived(() => ({
|
|
4223
4254
|
root: $_mainEl(),
|
|
4224
|
-
rootMargin: `0px 0px 0px -${$_sidebarWidth() + 5.5}px`,
|
|
4255
|
+
rootMargin: isRtl() ? `0px -${$_sidebarWidth() + 5.5}px 0px 0px` : `0px 0px 0px -${$_sidebarWidth() + 5.5}px`,
|
|
4225
4256
|
threshold: 0
|
|
4226
4257
|
}));
|
|
4227
4258
|
function onIntersect(el, entry) {
|
|
@@ -4369,16 +4400,22 @@ function View$1($$anchor, $$props) {
|
|
|
4369
4400
|
var aside_1 = $.child(div_1);
|
|
4370
4401
|
$.attach(aside_1, () => contentFrom($.get(allDayText)));
|
|
4371
4402
|
var div_2 = $.sibling(aside_1, 2);
|
|
4372
|
-
$.each(div_2, 21, () => $.get(grid), $.index, ($$anchor3, days) => {
|
|
4403
|
+
$.each(div_2, 21, () => $.get(grid), $.index, ($$anchor3, days, i) => {
|
|
4373
4404
|
var fragment_4 = $.comment();
|
|
4374
4405
|
var node_4 = $.first_child(fragment_4);
|
|
4375
|
-
$.each(node_4, 17, () => $.get(days), $.index, ($$anchor4, day) => {
|
|
4376
|
-
|
|
4377
|
-
get
|
|
4378
|
-
|
|
4379
|
-
|
|
4380
|
-
|
|
4381
|
-
|
|
4406
|
+
$.each(node_4, 17, () => $.get(days), $.index, ($$anchor4, day, j) => {
|
|
4407
|
+
{
|
|
4408
|
+
let $0 = $.derived(() => i + 1 === $.get(grid).length && j + 1 === $.get(days).length);
|
|
4409
|
+
Day$1($$anchor4, {
|
|
4410
|
+
get day() {
|
|
4411
|
+
return $.get(day);
|
|
4412
|
+
},
|
|
4413
|
+
allDay: true,
|
|
4414
|
+
get noIeb() {
|
|
4415
|
+
return $.get($0);
|
|
4416
|
+
}
|
|
4417
|
+
});
|
|
4418
|
+
}
|
|
4382
4419
|
});
|
|
4383
4420
|
$.append($$anchor3, fragment_4);
|
|
4384
4421
|
});
|
|
@@ -4445,15 +4482,22 @@ function View$1($$anchor, $$props) {
|
|
|
4445
4482
|
});
|
|
4446
4483
|
$.reset(aside_2);
|
|
4447
4484
|
var div_6 = $.sibling(aside_2, 2);
|
|
4448
|
-
$.each(div_6, 21, () => $.get(grid), $.index, ($$anchor2, days) => {
|
|
4485
|
+
$.each(div_6, 21, () => $.get(grid), $.index, ($$anchor2, days, i) => {
|
|
4449
4486
|
var fragment_9 = $.comment();
|
|
4450
4487
|
var node_8 = $.first_child(fragment_9);
|
|
4451
|
-
$.each(node_8, 17, () => $.get(days), $.index, ($$anchor3, day) => {
|
|
4452
|
-
|
|
4453
|
-
get
|
|
4454
|
-
|
|
4455
|
-
|
|
4456
|
-
|
|
4488
|
+
$.each(node_8, 17, () => $.get(days), $.index, ($$anchor3, day, j) => {
|
|
4489
|
+
{
|
|
4490
|
+
let $0 = $.derived(() => i + 1 === $.get(grid).length && j + 1 === $.get(days).length);
|
|
4491
|
+
Day$1($$anchor3, {
|
|
4492
|
+
get day() {
|
|
4493
|
+
return $.get(day);
|
|
4494
|
+
},
|
|
4495
|
+
get noIeb() {
|
|
4496
|
+
return $.get($0);
|
|
4497
|
+
},
|
|
4498
|
+
noBeb: true
|
|
4499
|
+
});
|
|
4500
|
+
}
|
|
4457
4501
|
});
|
|
4458
4502
|
$.append($$anchor2, fragment_9);
|
|
4459
4503
|
});
|
|
@@ -4941,7 +4985,7 @@ function prepareChunks(chunks) {
|
|
|
4941
4985
|
}
|
|
4942
4986
|
}
|
|
4943
4987
|
function repositionEvent(chunk, height2, monthView2) {
|
|
4944
|
-
let top =
|
|
4988
|
+
let top = 0;
|
|
4945
4989
|
let bottom = top + height2;
|
|
4946
4990
|
let dayChunks = chunk.day;
|
|
4947
4991
|
dayChunks.sort((a, b) => (a.top ?? Number.POSITIVE_INFINITY) - (b.top ?? Number.POSITIVE_INFINITY));
|
|
@@ -4990,6 +5034,12 @@ function Day($$anchor, $$props) {
|
|
|
4990
5034
|
get highlight() {
|
|
4991
5035
|
return $.get(highlight);
|
|
4992
5036
|
},
|
|
5037
|
+
get noIeb() {
|
|
5038
|
+
return $$props.noIeb;
|
|
5039
|
+
},
|
|
5040
|
+
get noBeb() {
|
|
5041
|
+
return $$props.noBeb;
|
|
5042
|
+
},
|
|
4993
5043
|
get el() {
|
|
4994
5044
|
return $.get(el);
|
|
4995
5045
|
},
|
|
@@ -5008,7 +5058,7 @@ function Event($$anchor, $$props) {
|
|
|
5008
5058
|
const [$$stores, $$cleanup] = $.setup_stores();
|
|
5009
5059
|
let { slotDuration, slotWidth, _monthView } = getContext("state");
|
|
5010
5060
|
let el = $.state(void 0);
|
|
5011
|
-
let margin = $.state(
|
|
5061
|
+
let margin = $.state(0);
|
|
5012
5062
|
let event = $.derived(() => $$props.chunk.event);
|
|
5013
5063
|
let styles = $.derived(() => (style) => {
|
|
5014
5064
|
style["grid-column"] = `${$$props.chunk.gridColumn} / span ${$$props.chunk.dates.length}`;
|
|
@@ -5016,7 +5066,7 @@ function Event($$anchor, $$props) {
|
|
|
5016
5066
|
if (!$_monthView()) {
|
|
5017
5067
|
let left = $$props.chunk.left / toSeconds($slotDuration()) * $slotWidth();
|
|
5018
5068
|
style["inset-inline-start"] = `${left}px`;
|
|
5019
|
-
style["inline-size"] = `${$$props.chunk.width / toSeconds($slotDuration()) * $slotWidth()
|
|
5069
|
+
style["inline-size"] = `${$$props.chunk.width / toSeconds($slotDuration()) * $slotWidth()}px`;
|
|
5020
5070
|
}
|
|
5021
5071
|
let marginTop = $.get(margin);
|
|
5022
5072
|
if ($.get(event)._margin) {
|
|
@@ -5201,7 +5251,7 @@ function NowIndicator($$anchor, $$props) {
|
|
|
5201
5251
|
});
|
|
5202
5252
|
let observerOptions = $.derived(() => ({
|
|
5203
5253
|
root: $_mainEl(),
|
|
5204
|
-
rootMargin: `0px 0px 0px -${$_sidebarWidth() + 1}px`,
|
|
5254
|
+
rootMargin: isRtl() ? `0px -${$_sidebarWidth() + 1}px 0px 0px` : `0px 0px 0px -${$_sidebarWidth() + 1}px`,
|
|
5205
5255
|
threshold: 0
|
|
5206
5256
|
}));
|
|
5207
5257
|
function onIntersect(el, entry) {
|
|
@@ -5296,7 +5346,6 @@ function View($$anchor, $$props) {
|
|
|
5296
5346
|
return;
|
|
5297
5347
|
}
|
|
5298
5348
|
let scrollLeft = 0;
|
|
5299
|
-
let gaps = 0;
|
|
5300
5349
|
let todayOutOfView = $_today() < $_viewDates()[0] || $_today() > $_viewDates().at(-1);
|
|
5301
5350
|
for (let date of $_viewDates()) {
|
|
5302
5351
|
let slotTimeLimits2 = getSlotTimeLimits($_dayTimeLimits(), date);
|
|
@@ -5305,10 +5354,9 @@ function View($$anchor, $$props) {
|
|
|
5305
5354
|
break;
|
|
5306
5355
|
} else {
|
|
5307
5356
|
scrollLeft += toSeconds(slotTimeLimits2.max) - toSeconds(slotTimeLimits2.min);
|
|
5308
|
-
++gaps;
|
|
5309
5357
|
}
|
|
5310
5358
|
}
|
|
5311
|
-
$.store_mutate(_mainEl, $.untrack($_mainEl).scrollLeft = scrollLeft / toSeconds($slotDuration()) * $slotWidth()
|
|
5359
|
+
$.store_mutate(_mainEl, $.untrack($_mainEl).scrollLeft = scrollLeft / toSeconds($slotDuration()) * $slotWidth() * (document.dir === "rtl" ? -1 : 1), $.untrack($_mainEl));
|
|
5312
5360
|
}
|
|
5313
5361
|
let refs = [];
|
|
5314
5362
|
function reposition() {
|
|
@@ -5427,15 +5475,25 @@ function View($$anchor, $$props) {
|
|
|
5427
5475
|
});
|
|
5428
5476
|
$.reset(aside_1);
|
|
5429
5477
|
var div_4 = $.sibling(aside_1, 2);
|
|
5430
|
-
$.each(div_4, 21, () => $.get(grid), $.index, ($$anchor2, days) => {
|
|
5478
|
+
$.each(div_4, 21, () => $.get(grid), $.index, ($$anchor2, days, i) => {
|
|
5431
5479
|
var fragment_6 = $.comment();
|
|
5432
5480
|
var node_6 = $.first_child(fragment_6);
|
|
5433
|
-
$.each(node_6, 17, () => $.get(days), $.index, ($$anchor3, day) => {
|
|
5434
|
-
|
|
5435
|
-
|
|
5436
|
-
|
|
5437
|
-
|
|
5438
|
-
|
|
5481
|
+
$.each(node_6, 17, () => $.get(days), $.index, ($$anchor3, day, j) => {
|
|
5482
|
+
{
|
|
5483
|
+
let $0 = $.derived(() => j + 1 === $.get(days).length);
|
|
5484
|
+
let $1 = $.derived(() => i + 1 === $.get(grid).length);
|
|
5485
|
+
Day($$anchor3, {
|
|
5486
|
+
get day() {
|
|
5487
|
+
return $.get(day);
|
|
5488
|
+
},
|
|
5489
|
+
get noIeb() {
|
|
5490
|
+
return $.get($0);
|
|
5491
|
+
},
|
|
5492
|
+
get noBeb() {
|
|
5493
|
+
return $.get($1);
|
|
5494
|
+
}
|
|
5495
|
+
});
|
|
5496
|
+
}
|
|
5439
5497
|
});
|
|
5440
5498
|
$.append($$anchor2, fragment_6);
|
|
5441
5499
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@event-calendar/core",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.2",
|
|
4
4
|
"title": "Event Calendar Core package",
|
|
5
5
|
"description": "Full-sized drag & drop event calendar with resource & timeline views",
|
|
6
6
|
"keywords": [
|
|
@@ -32,6 +32,6 @@
|
|
|
32
32
|
"#components": "./src/lib/components/index.js"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"svelte": "^5.
|
|
35
|
+
"svelte": "^5.46.0"
|
|
36
36
|
}
|
|
37
37
|
}
|
|
@@ -12,6 +12,8 @@
|
|
|
12
12
|
disabled = false,
|
|
13
13
|
highlight = false,
|
|
14
14
|
role = 'cell',
|
|
15
|
+
noIeb = false,
|
|
16
|
+
noBeb = false,
|
|
15
17
|
children
|
|
16
18
|
} = $props();
|
|
17
19
|
|
|
@@ -25,7 +27,9 @@
|
|
|
25
27
|
$theme.weekdays?.[date.getUTCDay()],
|
|
26
28
|
isToday && $theme.today,
|
|
27
29
|
highlight && $theme.highlight,
|
|
28
|
-
disabled && $theme.disabled
|
|
30
|
+
disabled && $theme.disabled,
|
|
31
|
+
noIeb && $theme.noIeb,
|
|
32
|
+
noBeb && $theme.noBeb
|
|
29
33
|
]));
|
|
30
34
|
|
|
31
35
|
// dateFromPoint
|
package/src/lib/utils.js
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
} from '#lib';
|
|
6
6
|
import {BaseDay} from '#components';
|
|
7
7
|
|
|
8
|
-
let {day} = $props();
|
|
8
|
+
let {day, noIeb, noBeb} = $props();
|
|
9
9
|
|
|
10
10
|
let {
|
|
11
11
|
date, firstDay, moreLinkContent, theme, weekNumbers, weekNumberContent, _hiddenChunks, _intlDayCell, _popupDay
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
}
|
|
56
56
|
</script>
|
|
57
57
|
|
|
58
|
-
<BaseDay date={dayStart} allDay {classes} {disabled} {highlight}>
|
|
58
|
+
<BaseDay date={dayStart} allDay {classes} {disabled} {highlight} {noIeb} {noBeb}>
|
|
59
59
|
<div class="{$theme.dayHead}">
|
|
60
60
|
<time
|
|
61
61
|
datetime="{toISOString(dayStart, 10)}"
|
|
@@ -53,9 +53,9 @@
|
|
|
53
53
|
|
|
54
54
|
<div class="{$theme.body}">
|
|
55
55
|
<div bind:this={gridEl} class="{$theme.grid}">
|
|
56
|
-
{#each grid as days}
|
|
57
|
-
{#each days as day}
|
|
58
|
-
<Day {day}/>
|
|
56
|
+
{#each grid as days, i}
|
|
57
|
+
{#each days as day, j}
|
|
58
|
+
<Day {day} noIeb={j + 1 === days.length} noBeb={i + 1 === grid.length}/>
|
|
59
59
|
{/each}
|
|
60
60
|
{/each}
|
|
61
61
|
</div>
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import {addDuration, cloneDate, floor, rect} from '#lib';
|
|
4
4
|
import {BaseDay} from '#components';
|
|
5
5
|
|
|
6
|
-
let {day} = $props();
|
|
6
|
+
let {day, noIeb, noBeb} = $props();
|
|
7
7
|
|
|
8
8
|
let {_monthView, slotDuration, slotWidth} = getContext('state');
|
|
9
9
|
|
|
@@ -18,4 +18,4 @@
|
|
|
18
18
|
}
|
|
19
19
|
</script>
|
|
20
20
|
|
|
21
|
-
<BaseDay bind:el allDay={$_monthView} {date} {resource} {dateFromPoint} {disabled} {highlight}/>
|
|
21
|
+
<BaseDay bind:el allDay={$_monthView} {date} {resource} {dateFromPoint} {disabled} {highlight} {noIeb} {noBeb}/>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
let {slotDuration, slotWidth, _monthView} = getContext('state');
|
|
10
10
|
|
|
11
11
|
let el = $state();
|
|
12
|
-
let margin = $state(
|
|
12
|
+
let margin = $state(0);
|
|
13
13
|
let event = $derived(chunk.event);
|
|
14
14
|
// Style
|
|
15
15
|
let styles = $derived(style => {
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
if (!$_monthView) {
|
|
19
19
|
let left = chunk.left / toSeconds($slotDuration) * $slotWidth;
|
|
20
20
|
style['inset-inline-start'] = `${left}px`;
|
|
21
|
-
style['inline-size'] = `${chunk.width / toSeconds($slotDuration) * $slotWidth
|
|
21
|
+
style['inline-size'] = `${chunk.width / toSeconds($slotDuration) * $slotWidth}px`;
|
|
22
22
|
}
|
|
23
23
|
let marginTop = margin;
|
|
24
24
|
if (event._margin) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import {getContext} from 'svelte';
|
|
3
|
-
import {datesEqual, toSeconds, intersectionObserver} from '#lib';
|
|
3
|
+
import {datesEqual, toSeconds, intersectionObserver, isRtl} from '#lib';
|
|
4
4
|
|
|
5
5
|
let {grid} = $props();
|
|
6
6
|
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
// Observe intersections
|
|
27
27
|
let observerOptions = $derived({
|
|
28
28
|
root: $_mainEl,
|
|
29
|
-
rootMargin: `0px 0px 0px -${$_sidebarWidth + 1}px`,
|
|
29
|
+
rootMargin: isRtl() ? `0px -${$_sidebarWidth + 1}px 0px 0px` : `0px 0px 0px -${$_sidebarWidth + 1}px`,
|
|
30
30
|
threshold: 0.0,
|
|
31
31
|
});
|
|
32
32
|
function onIntersect(el, entry) {
|
|
@@ -30,7 +30,6 @@
|
|
|
30
30
|
return;
|
|
31
31
|
}
|
|
32
32
|
let scrollLeft = 0;
|
|
33
|
-
let gaps = 0;
|
|
34
33
|
let todayOutOfView = $_today < $_viewDates[0] || $_today > $_viewDates.at(-1);
|
|
35
34
|
for (let date of $_viewDates) {
|
|
36
35
|
let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, date);
|
|
@@ -42,10 +41,9 @@
|
|
|
42
41
|
break;
|
|
43
42
|
} else {
|
|
44
43
|
scrollLeft += toSeconds(slotTimeLimits.max) - toSeconds(slotTimeLimits.min);
|
|
45
|
-
++ gaps;
|
|
46
44
|
}
|
|
47
45
|
}
|
|
48
|
-
$_mainEl.scrollLeft = scrollLeft / toSeconds($slotDuration) * $slotWidth
|
|
46
|
+
$_mainEl.scrollLeft = scrollLeft / toSeconds($slotDuration) * $slotWidth * (document.dir === 'rtl' ? -1 : 1);
|
|
49
47
|
}
|
|
50
48
|
|
|
51
49
|
// Events reposition
|
|
@@ -109,9 +107,9 @@
|
|
|
109
107
|
{/each}
|
|
110
108
|
</aside>
|
|
111
109
|
<div class="{$theme.grid}" role="row">
|
|
112
|
-
{#each grid as days}
|
|
113
|
-
{#each days as day}
|
|
114
|
-
<Day {day}/>
|
|
110
|
+
{#each grid as days, i}
|
|
111
|
+
{#each days as day, j}
|
|
112
|
+
<Day {day} noIeb={j + 1 === days.length} noBeb={i + 1 === grid.length}/>
|
|
115
113
|
{/each}
|
|
116
114
|
{/each}
|
|
117
115
|
</div>
|
|
@@ -112,7 +112,7 @@ export function prepareChunks(chunks) {
|
|
|
112
112
|
}
|
|
113
113
|
|
|
114
114
|
export function repositionEvent(chunk, height, monthView) {
|
|
115
|
-
let top =
|
|
115
|
+
let top = 0;
|
|
116
116
|
let bottom = top + height;
|
|
117
117
|
let dayChunks = chunk.day;
|
|
118
118
|
dayChunks.sort((a, b) => (a.top ?? Number.POSITIVE_INFINITY) - (b.top ?? Number.POSITIVE_INFINITY));
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import {addDuration, cloneDate, floor, rect} from '#lib';
|
|
4
4
|
import {BaseDay} from '#components';
|
|
5
5
|
|
|
6
|
-
let {day, allDay = false} = $props();
|
|
6
|
+
let {day, allDay = false, noIeb, noBeb} = $props();
|
|
7
7
|
|
|
8
8
|
let {slotDuration, slotHeight} = getContext('state');
|
|
9
9
|
|
|
@@ -18,4 +18,4 @@
|
|
|
18
18
|
}
|
|
19
19
|
</script>
|
|
20
20
|
|
|
21
|
-
<BaseDay bind:el {date} {allDay} {resource} {dateFromPoint} {disabled} {highlight}/>
|
|
21
|
+
<BaseDay bind:el {date} {allDay} {resource} {dateFromPoint} {disabled} {highlight} {noIeb} {noBeb}/>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import {getContext} from 'svelte';
|
|
3
|
-
import {datesEqual, toSeconds, intersectionObserver} from '#lib';
|
|
3
|
+
import {datesEqual, toSeconds, intersectionObserver, isRtl} from '#lib';
|
|
4
4
|
|
|
5
5
|
let {days, span = 1} = $props();
|
|
6
6
|
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
// Observe intersections
|
|
27
27
|
let observerOptions = $derived({
|
|
28
28
|
root: $_mainEl,
|
|
29
|
-
rootMargin: `0px 0px 0px -${$_sidebarWidth + 5.5}px`,
|
|
29
|
+
rootMargin: isRtl() ? `0px -${$_sidebarWidth + 5.5}px 0px 0px` : `0px 0px 0px -${$_sidebarWidth + 5.5}px`,
|
|
30
30
|
threshold: 0.0,
|
|
31
31
|
});
|
|
32
32
|
function onIntersect(el, entry) {
|
|
@@ -71,9 +71,9 @@
|
|
|
71
71
|
<div class="{$theme.allDay}">
|
|
72
72
|
<aside class="{$theme.sidebar}" {@attach contentFrom(allDayText)}></aside>
|
|
73
73
|
<div class="{$theme.grid}" role="row">
|
|
74
|
-
{#each grid as days}
|
|
75
|
-
{#each days as day}
|
|
76
|
-
<Day {day} allDay/>
|
|
74
|
+
{#each grid as days, i}
|
|
75
|
+
{#each days as day, j}
|
|
76
|
+
<Day {day} allDay noIeb={i + 1 === grid.length && j + 1 === days.length}/>
|
|
77
77
|
{/each}
|
|
78
78
|
{/each}
|
|
79
79
|
</div>
|
|
@@ -108,9 +108,9 @@
|
|
|
108
108
|
{/each}
|
|
109
109
|
</aside>
|
|
110
110
|
<div class="{$theme.grid}" role="row">
|
|
111
|
-
{#each grid as days}
|
|
112
|
-
{#each days as day}
|
|
113
|
-
<Day {day}/>
|
|
111
|
+
{#each grid as days, i}
|
|
112
|
+
{#each days as day, j}
|
|
113
|
+
<Day {day} noIeb={i + 1 === grid.length && j + 1 === days.length} noBeb/>
|
|
114
114
|
{/each}
|
|
115
115
|
{/each}
|
|
116
116
|
</div>
|
package/src/storage/options.js
CHANGED
|
@@ -80,6 +80,8 @@ export function createOptions(plugins) {
|
|
|
80
80
|
highlight: 'ec-highlight',
|
|
81
81
|
icon: 'ec-icon',
|
|
82
82
|
main: 'ec-main',
|
|
83
|
+
noBeb: 'ec-no-beb', // no block end border
|
|
84
|
+
noIeb: 'ec-no-ieb', // no inline end border
|
|
83
85
|
today: 'ec-today',
|
|
84
86
|
title: 'ec-title',
|
|
85
87
|
toolbar: 'ec-toolbar',
|
package/src/styles/days.css
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
.ec-day {
|
|
2
2
|
--ec-day-bg-color: var(--ec-bg-color);
|
|
3
3
|
background-color: var(--ec-day-bg-color);
|
|
4
|
+
border: 1px solid var(--ec-border-color);
|
|
5
|
+
border-block-start: none;
|
|
6
|
+
border-inline-start: none;
|
|
4
7
|
|
|
5
8
|
&.ec-today {
|
|
6
9
|
--ec-day-bg-color: var(--ec-today-bg-color);
|
|
@@ -12,10 +15,10 @@
|
|
|
12
15
|
|
|
13
16
|
.ec-time-grid .ec-body & {
|
|
14
17
|
background-image:
|
|
15
|
-
linear-gradient(var(--ec-day-bg-color) 1px, transparent 1px),
|
|
16
|
-
linear-gradient(var(--ec-border-color) 1px, transparent 1px),
|
|
18
|
+
linear-gradient(to top, var(--ec-day-bg-color) 1px, transparent 1px),
|
|
19
|
+
linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px),
|
|
17
20
|
linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px),
|
|
18
|
-
linear-gradient(var(--ec-border-color) 1px, transparent 1px);
|
|
21
|
+
linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);
|
|
19
22
|
background-size:
|
|
20
23
|
100% 100%,
|
|
21
24
|
100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)),
|
|
@@ -24,16 +27,26 @@
|
|
|
24
27
|
}
|
|
25
28
|
|
|
26
29
|
.ec-timeline:not(.ec-month-view) .ec-body & {
|
|
30
|
+
--ec-last-line-color: transparent;
|
|
31
|
+
--ec-direction: to left;
|
|
32
|
+
[dir="rtl"] & {
|
|
33
|
+
--ec-direction: to right;
|
|
34
|
+
}
|
|
27
35
|
background-image:
|
|
28
|
-
linear-gradient(
|
|
29
|
-
linear-gradient(
|
|
36
|
+
linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px),
|
|
37
|
+
linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px),
|
|
30
38
|
linear-gradient(var(--ec-day-bg-color) 1px, transparent 1px),
|
|
31
|
-
linear-gradient(
|
|
39
|
+
linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);
|
|
32
40
|
background-size:
|
|
33
41
|
100% 100%,
|
|
34
42
|
calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%,
|
|
35
43
|
100% 2px,
|
|
36
44
|
var(--ec-slot-width) 100%;
|
|
45
|
+
border-inline: none;
|
|
46
|
+
|
|
47
|
+
&.ec-no-ieb {
|
|
48
|
+
--ec-last-line-color: var(--ec-day-bg-color);
|
|
49
|
+
}
|
|
37
50
|
}
|
|
38
51
|
|
|
39
52
|
.ec-day-grid & {
|
|
@@ -46,6 +59,22 @@
|
|
|
46
59
|
.ec-day-grid .ec-uniform & {
|
|
47
60
|
min-block-size: auto;
|
|
48
61
|
}
|
|
62
|
+
|
|
63
|
+
.ec-list & {
|
|
64
|
+
border-inline: none;
|
|
65
|
+
|
|
66
|
+
&:last-child {
|
|
67
|
+
border: none;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
&.ec-no-ieb {
|
|
72
|
+
border-inline-end: none;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
&.ec-no-beb {
|
|
76
|
+
border-block-end: none;
|
|
77
|
+
}
|
|
49
78
|
}
|
|
50
79
|
|
|
51
80
|
.ec-day-head {
|
package/src/styles/index.css
CHANGED
|
@@ -14,8 +14,6 @@
|
|
|
14
14
|
|
|
15
15
|
.ec-main {
|
|
16
16
|
display: grid;
|
|
17
|
-
gap: 1px;
|
|
18
|
-
background-color: var(--ec-border-color);
|
|
19
17
|
border: 1px solid var(--ec-border-color);
|
|
20
18
|
overflow: auto;
|
|
21
19
|
/*scrollbar-width: thin;*/
|
|
@@ -56,20 +54,15 @@
|
|
|
56
54
|
grid-area: 1 / 1 / 2 / -1;
|
|
57
55
|
display: grid;
|
|
58
56
|
grid-template-columns: subgrid;
|
|
59
|
-
gap: 1px;
|
|
60
|
-
background-color: var(--ec-border-color);
|
|
61
57
|
position: sticky;
|
|
62
58
|
inset-block-start: 0;
|
|
63
59
|
z-index: 2;
|
|
64
|
-
border-block-end: 1px solid var(--ec-border-color);
|
|
65
|
-
margin-block-end: -1px;
|
|
66
60
|
}
|
|
67
61
|
|
|
68
62
|
.ec-grid {
|
|
69
63
|
grid-area: 1 / 1 / -1 / -1;
|
|
70
64
|
display: grid;
|
|
71
65
|
grid-template-columns: subgrid;
|
|
72
|
-
gap: 1px;
|
|
73
66
|
|
|
74
67
|
.ec-body & {
|
|
75
68
|
grid-template-rows: subgrid;
|
|
@@ -97,6 +90,9 @@
|
|
|
97
90
|
text-align: center;
|
|
98
91
|
padding: .375rem .18em;
|
|
99
92
|
background-color: var(--ec-bg-color);
|
|
93
|
+
border: 1px solid var(--ec-border-color);
|
|
94
|
+
border-block-start: none;
|
|
95
|
+
border-inline-start: none;
|
|
100
96
|
overflow: clip;
|
|
101
97
|
text-overflow: ellipsis;
|
|
102
98
|
|
|
@@ -109,6 +105,11 @@
|
|
|
109
105
|
}
|
|
110
106
|
}
|
|
111
107
|
|
|
108
|
+
.ec-col-group:nth-last-child(1 of .ec-col-group),
|
|
109
|
+
.ec-col-head:nth-last-child(1 of .ec-col-head) {
|
|
110
|
+
border-inline-end: none;
|
|
111
|
+
}
|
|
112
|
+
|
|
112
113
|
.ec-col-group > *,
|
|
113
114
|
.ec-timeline .ec-col-head > * {
|
|
114
115
|
position: sticky;
|
package/src/styles/sidebar.css
CHANGED
|
@@ -3,12 +3,14 @@
|
|
|
3
3
|
inset-inline-start: 0;
|
|
4
4
|
z-index: 1;
|
|
5
5
|
background-color: var(--ec-bg-color);
|
|
6
|
-
border-
|
|
7
|
-
|
|
6
|
+
border-color: var(--ec-border-color);
|
|
7
|
+
border-width: 1px;
|
|
8
|
+
border-inline-end-style: solid;
|
|
8
9
|
text-align: end;
|
|
9
10
|
overflow: clip;
|
|
10
11
|
|
|
11
12
|
.ec-header & {
|
|
13
|
+
border-block-end-style: solid;
|
|
12
14
|
padding-block: .375rem;
|
|
13
15
|
}
|
|
14
16
|
|
|
@@ -17,12 +19,16 @@
|
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
.ec-time-grid .ec-body & {
|
|
22
|
+
--ec-direction: to left;
|
|
23
|
+
[dir="rtl"] & {
|
|
24
|
+
--ec-direction: to right;
|
|
25
|
+
}
|
|
20
26
|
background-image:
|
|
21
|
-
linear-gradient(
|
|
22
|
-
linear-gradient(var(--ec-bg-color) 1px, transparent 1px),
|
|
23
|
-
linear-gradient(var(--ec-border-color) 1px, transparent 1px),
|
|
27
|
+
linear-gradient(var(--ec-direction), transparent .375rem, var(--ec-bg-color) .375rem),
|
|
28
|
+
linear-gradient(to top, var(--ec-bg-color) 1px, transparent 1px),
|
|
29
|
+
linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px),
|
|
24
30
|
linear-gradient(to right, var(--ec-bg-color) 1px, transparent 1px),
|
|
25
|
-
linear-gradient(var(--ec-border-color) 1px, transparent 1px);
|
|
31
|
+
linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);
|
|
26
32
|
background-size:
|
|
27
33
|
100% 100%,
|
|
28
34
|
100% 100%,
|
|
@@ -35,15 +41,18 @@
|
|
|
35
41
|
grid-area: 1 / 1 / -1 / 2;
|
|
36
42
|
display: grid;
|
|
37
43
|
grid-template-rows: subgrid;
|
|
38
|
-
background-color: var(--ec-border-color);
|
|
39
44
|
}
|
|
40
45
|
}
|
|
41
46
|
|
|
42
47
|
.ec-row-head {
|
|
43
48
|
display: flex;
|
|
44
|
-
|
|
49
|
+
border-block-end: 1px solid var(--ec-border-color);
|
|
45
50
|
padding: .375em .75rem;
|
|
46
51
|
min-block-size: 1.5em;
|
|
52
|
+
|
|
53
|
+
&:last-child {
|
|
54
|
+
border: none;
|
|
55
|
+
}
|
|
47
56
|
}
|
|
48
57
|
|
|
49
58
|
.ec-expander {
|
package/src/styles/slots.css
CHANGED
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
|
|
25
25
|
--ec-day-bg-color: var(--ec-bg-color);
|
|
26
26
|
background-color: var(--ec-day-bg-color);
|
|
27
|
+
border-block-end: 1px solid var(--ec-border-color);
|
|
27
28
|
|
|
28
29
|
&.ec-today {
|
|
29
30
|
--ec-day-bg-color: var(--ec-today-bg-color);
|
|
@@ -33,10 +34,19 @@
|
|
|
33
34
|
--ec-day-bg-color: var(--ec-highlight-color);
|
|
34
35
|
}
|
|
35
36
|
|
|
37
|
+
--ec-last-line-color: transparent;
|
|
38
|
+
--ec-direction: to left;
|
|
39
|
+
[dir="rtl"] & {
|
|
40
|
+
--ec-direction: to right;
|
|
41
|
+
}
|
|
36
42
|
background-image:
|
|
37
|
-
linear-gradient(
|
|
38
|
-
linear-gradient(
|
|
43
|
+
linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px),
|
|
44
|
+
linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);
|
|
39
45
|
background-size:
|
|
40
46
|
100% 100%,
|
|
41
47
|
calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%;
|
|
48
|
+
|
|
49
|
+
&:last-child {
|
|
50
|
+
--ec-last-line-color: var(--ec-day-bg-color);
|
|
51
|
+
}
|
|
42
52
|
}
|