@event-calendar/core 3.2.1 → 3.3.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 +2 -2
- package/index.css +49 -40
- package/index.js +16 -1
- package/package.json +1 -1
- package/src/Calendar.svelte +7 -1
- package/src/lib/events.js +8 -0
- package/src/styles/day-grid.scss +50 -0
- package/src/styles/index.scss +14 -49
package/README.md
CHANGED
|
@@ -204,8 +204,8 @@ import '@event-calendar/core/index.css';
|
|
|
204
204
|
### Pre-built browser ready bundle
|
|
205
205
|
Include the following lines of code in the `<head>` section of your page:
|
|
206
206
|
```html
|
|
207
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.
|
|
208
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.
|
|
207
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.3.0/event-calendar.min.css">
|
|
208
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.3.0/event-calendar.min.js"></script>
|
|
209
209
|
```
|
|
210
210
|
|
|
211
211
|
<details>
|
package/index.css
CHANGED
|
@@ -236,6 +236,46 @@
|
|
|
236
236
|
padding: 8px 0;
|
|
237
237
|
}
|
|
238
238
|
|
|
239
|
+
.ec-day-grid .ec-body {
|
|
240
|
+
flex: 1 1 auto;
|
|
241
|
+
}
|
|
242
|
+
.ec-day-grid .ec-body .ec-day {
|
|
243
|
+
min-height: 5em;
|
|
244
|
+
position: relative;
|
|
245
|
+
}
|
|
246
|
+
.ec-day-grid .ec-content {
|
|
247
|
+
flex-direction: column;
|
|
248
|
+
height: 100%;
|
|
249
|
+
}
|
|
250
|
+
.ec-day-grid .ec-uniform .ec-content {
|
|
251
|
+
overflow: hidden;
|
|
252
|
+
}
|
|
253
|
+
.ec-day-grid .ec-uniform .ec-days {
|
|
254
|
+
flex: 1 1 0%;
|
|
255
|
+
min-height: 0;
|
|
256
|
+
}
|
|
257
|
+
.ec-day-grid .ec-uniform .ec-day {
|
|
258
|
+
min-height: 0;
|
|
259
|
+
}
|
|
260
|
+
.ec-day-grid .ec-day:first-child {
|
|
261
|
+
border-left: none;
|
|
262
|
+
}
|
|
263
|
+
.ec-day-grid .ec-day-head {
|
|
264
|
+
display: block;
|
|
265
|
+
border: none;
|
|
266
|
+
text-align: right;
|
|
267
|
+
padding: 4px 4px 3px;
|
|
268
|
+
}
|
|
269
|
+
.ec-day-grid .ec-day-foot {
|
|
270
|
+
position: absolute;
|
|
271
|
+
bottom: 0;
|
|
272
|
+
padding: 2px;
|
|
273
|
+
font-size: 0.85em;
|
|
274
|
+
}
|
|
275
|
+
.ec-day-grid .ec-day-foot a {
|
|
276
|
+
cursor: pointer;
|
|
277
|
+
}
|
|
278
|
+
|
|
239
279
|
/* Grid */
|
|
240
280
|
.ec-days,
|
|
241
281
|
.ec-day,
|
|
@@ -393,6 +433,7 @@
|
|
|
393
433
|
}
|
|
394
434
|
.ec-all-day .ec-day {
|
|
395
435
|
padding-bottom: 4px;
|
|
436
|
+
position: relative;
|
|
396
437
|
}
|
|
397
438
|
|
|
398
439
|
/* Body */
|
|
@@ -404,9 +445,6 @@
|
|
|
404
445
|
.ec:not(.ec-list) .ec-body {
|
|
405
446
|
border-top: none;
|
|
406
447
|
}
|
|
407
|
-
.ec-day-grid .ec-body {
|
|
408
|
-
flex: 1 1 auto;
|
|
409
|
-
}
|
|
410
448
|
|
|
411
449
|
.ec-sidebar {
|
|
412
450
|
flex: 0 0 auto;
|
|
@@ -420,13 +458,6 @@
|
|
|
420
458
|
.ec-content {
|
|
421
459
|
display: flex;
|
|
422
460
|
}
|
|
423
|
-
.ec-day-grid .ec-content {
|
|
424
|
-
flex-direction: column;
|
|
425
|
-
height: 100%;
|
|
426
|
-
}
|
|
427
|
-
.ec-day-grid .ec-uniform .ec-content {
|
|
428
|
-
overflow: hidden;
|
|
429
|
-
}
|
|
430
461
|
.ec-list .ec-content {
|
|
431
462
|
flex-direction: column;
|
|
432
463
|
}
|
|
@@ -445,10 +476,6 @@
|
|
|
445
476
|
.ec-day-grid .ec-days, .ec-resource .ec-days {
|
|
446
477
|
flex: 1 0 auto;
|
|
447
478
|
}
|
|
448
|
-
.ec-day-grid .ec-uniform .ec-days {
|
|
449
|
-
flex: 1 1 0%;
|
|
450
|
-
min-height: 0;
|
|
451
|
-
}
|
|
452
479
|
|
|
453
480
|
.ec-day {
|
|
454
481
|
border-style: none none none solid;
|
|
@@ -459,16 +486,6 @@
|
|
|
459
486
|
.ec-day.ec-highlight {
|
|
460
487
|
background-color: var(--ec-highlight-color);
|
|
461
488
|
}
|
|
462
|
-
.ec-day-grid .ec-body .ec-day {
|
|
463
|
-
min-height: 5em;
|
|
464
|
-
position: relative;
|
|
465
|
-
}
|
|
466
|
-
.ec-day-grid .ec-uniform .ec-day {
|
|
467
|
-
min-height: 0;
|
|
468
|
-
}
|
|
469
|
-
.ec-day-grid .ec-day:first-child {
|
|
470
|
-
border-left: none;
|
|
471
|
-
}
|
|
472
489
|
.ec-day.ec-other-month .ec-day-head {
|
|
473
490
|
opacity: 0.3;
|
|
474
491
|
}
|
|
@@ -476,22 +493,6 @@
|
|
|
476
493
|
border: none;
|
|
477
494
|
}
|
|
478
495
|
|
|
479
|
-
.ec-day-grid .ec-day-head {
|
|
480
|
-
display: block;
|
|
481
|
-
border: none;
|
|
482
|
-
text-align: right;
|
|
483
|
-
padding: 4px 4px 3px;
|
|
484
|
-
}
|
|
485
|
-
.ec-day-grid .ec-day-foot {
|
|
486
|
-
position: absolute;
|
|
487
|
-
bottom: 0;
|
|
488
|
-
padding: 2px;
|
|
489
|
-
font-size: 0.85em;
|
|
490
|
-
}
|
|
491
|
-
.ec-day-grid .ec-day-foot a {
|
|
492
|
-
cursor: pointer;
|
|
493
|
-
}
|
|
494
|
-
|
|
495
496
|
.ec-list .ec-day-head {
|
|
496
497
|
background-color: var(--ec-list-day-bg-color);
|
|
497
498
|
border-style: solid none;
|
|
@@ -616,12 +617,20 @@
|
|
|
616
617
|
.ec-bg-events {
|
|
617
618
|
position: relative;
|
|
618
619
|
}
|
|
620
|
+
.ec-day-grid .ec-bg-events, .ec-all-day .ec-bg-events {
|
|
621
|
+
position: absolute;
|
|
622
|
+
inset: 0;
|
|
623
|
+
}
|
|
619
624
|
|
|
620
625
|
.ec-bg-event {
|
|
621
626
|
position: absolute;
|
|
622
627
|
background-color: var(--ec-bg-event-color);
|
|
623
628
|
opacity: var(--ec-bg-event-opacity);
|
|
624
629
|
}
|
|
630
|
+
.ec-day-grid .ec-bg-event, .ec-all-day .ec-bg-event {
|
|
631
|
+
height: 100%;
|
|
632
|
+
z-index: auto;
|
|
633
|
+
}
|
|
625
634
|
|
|
626
635
|
.ec-time {
|
|
627
636
|
white-space: nowrap;
|
package/index.js
CHANGED
|
@@ -539,6 +539,14 @@ function prepareEventChunks(chunks, hiddenDays) {
|
|
|
539
539
|
chunk.date = dates[0];
|
|
540
540
|
chunk.days = dates.length;
|
|
541
541
|
chunk.dates = dates;
|
|
542
|
+
// Adjust the start and end dates of the chunk if hidden days affected them
|
|
543
|
+
if (chunk.start < dates[0]) {
|
|
544
|
+
chunk.start = dates[0];
|
|
545
|
+
}
|
|
546
|
+
let maxEnd = addDay(cloneDate(dates.at(-1)));
|
|
547
|
+
if (chunk.end > maxEnd) {
|
|
548
|
+
chunk.end = maxEnd;
|
|
549
|
+
}
|
|
542
550
|
} else {
|
|
543
551
|
chunk.date = setMidnight(cloneDate(chunk.start));
|
|
544
552
|
chunk.days = 1;
|
|
@@ -2671,7 +2679,14 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2671
2679
|
|
|
2672
2680
|
function dateFromPoint(x, y) {
|
|
2673
2681
|
let dayEl = getElementWithPayload(x, y);
|
|
2674
|
-
|
|
2682
|
+
|
|
2683
|
+
if (dayEl) {
|
|
2684
|
+
let info = getPayload(dayEl)(x, y);
|
|
2685
|
+
info.date = toLocalDate(info.date);
|
|
2686
|
+
return info;
|
|
2687
|
+
}
|
|
2688
|
+
|
|
2689
|
+
return null;
|
|
2675
2690
|
}
|
|
2676
2691
|
|
|
2677
2692
|
function destroy() {
|
package/package.json
CHANGED
package/src/Calendar.svelte
CHANGED
|
@@ -103,7 +103,13 @@
|
|
|
103
103
|
|
|
104
104
|
export function dateFromPoint(x, y) {
|
|
105
105
|
let dayEl = getElementWithPayload(x, y);
|
|
106
|
-
|
|
106
|
+
if (dayEl) {
|
|
107
|
+
let info = getPayload(dayEl)(x, y);
|
|
108
|
+
info.date = toLocalDate(info.date);
|
|
109
|
+
|
|
110
|
+
return info;
|
|
111
|
+
}
|
|
112
|
+
return null;
|
|
107
113
|
}
|
|
108
114
|
|
|
109
115
|
export function destroy() {
|
package/src/lib/events.js
CHANGED
|
@@ -175,6 +175,14 @@ export function prepareEventChunks(chunks, hiddenDays) {
|
|
|
175
175
|
chunk.date = dates[0];
|
|
176
176
|
chunk.days = dates.length;
|
|
177
177
|
chunk.dates = dates;
|
|
178
|
+
// Adjust the start and end dates of the chunk if hidden days affected them
|
|
179
|
+
if (chunk.start < dates[0]) {
|
|
180
|
+
chunk.start = dates[0];
|
|
181
|
+
}
|
|
182
|
+
let maxEnd = addDay(cloneDate(dates.at(-1)));
|
|
183
|
+
if (chunk.end > maxEnd) {
|
|
184
|
+
chunk.end = maxEnd;
|
|
185
|
+
}
|
|
178
186
|
} else {
|
|
179
187
|
chunk.date = setMidnight(cloneDate(chunk.start));
|
|
180
188
|
chunk.days = 1;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
.ec-day-grid {
|
|
2
|
+
.ec-body {
|
|
3
|
+
flex: 1 1 auto;
|
|
4
|
+
|
|
5
|
+
.ec-day {
|
|
6
|
+
min-height: 5em;
|
|
7
|
+
position: relative;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ec-content {
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
height: 100%;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.ec-uniform {
|
|
17
|
+
.ec-content {
|
|
18
|
+
overflow: hidden; // remove scrolling due to hidden events
|
|
19
|
+
}
|
|
20
|
+
.ec-days {
|
|
21
|
+
flex: 1 1 0%; // % is required to work properly for both auto and fixed calendar height
|
|
22
|
+
min-height: 0;
|
|
23
|
+
}
|
|
24
|
+
.ec-day {
|
|
25
|
+
min-height: 0;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.ec-day:first-child {
|
|
30
|
+
border-left: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.ec-day-head {
|
|
34
|
+
display: block;
|
|
35
|
+
border: none;
|
|
36
|
+
text-align: right;
|
|
37
|
+
padding: 4px 4px 3px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.ec-day-foot {
|
|
41
|
+
position: absolute;
|
|
42
|
+
bottom: 0;
|
|
43
|
+
padding: 2px;
|
|
44
|
+
font-size: .85em;
|
|
45
|
+
|
|
46
|
+
a {
|
|
47
|
+
cursor: pointer;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
package/src/styles/index.scss
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
@use "theme";
|
|
2
2
|
@use "timeline";
|
|
3
3
|
@use "time-grid";
|
|
4
|
+
@use "day-grid";
|
|
4
5
|
|
|
5
6
|
/* Grid */
|
|
6
7
|
.ec-days,
|
|
@@ -180,6 +181,7 @@
|
|
|
180
181
|
|
|
181
182
|
.ec-day {
|
|
182
183
|
padding-bottom: 4px;
|
|
184
|
+
position: relative;
|
|
183
185
|
}
|
|
184
186
|
}
|
|
185
187
|
|
|
@@ -192,10 +194,6 @@
|
|
|
192
194
|
.ec:not(.ec-list) & {
|
|
193
195
|
border-top: none;
|
|
194
196
|
}
|
|
195
|
-
|
|
196
|
-
.ec-day-grid & {
|
|
197
|
-
flex: 1 1 auto;
|
|
198
|
-
}
|
|
199
197
|
}
|
|
200
198
|
|
|
201
199
|
.ec-sidebar {
|
|
@@ -210,15 +208,6 @@
|
|
|
210
208
|
.ec-content {
|
|
211
209
|
display: flex;
|
|
212
210
|
|
|
213
|
-
.ec-day-grid & {
|
|
214
|
-
flex-direction: column;
|
|
215
|
-
height: 100%;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.ec-day-grid .ec-uniform & {
|
|
219
|
-
overflow: hidden; // remove scrolling due to hidden events
|
|
220
|
-
}
|
|
221
|
-
|
|
222
211
|
.ec-list & {
|
|
223
212
|
flex-direction: column;
|
|
224
213
|
}
|
|
@@ -240,11 +229,6 @@
|
|
|
240
229
|
.ec-resource & {
|
|
241
230
|
flex: 1 0 auto;
|
|
242
231
|
}
|
|
243
|
-
|
|
244
|
-
.ec-day-grid .ec-uniform & {
|
|
245
|
-
flex: 1 1 0%; // % is required to work properly for both auto and fixed calendar height
|
|
246
|
-
min-height: 0;
|
|
247
|
-
}
|
|
248
232
|
}
|
|
249
233
|
|
|
250
234
|
.ec-day {
|
|
@@ -258,18 +242,7 @@
|
|
|
258
242
|
background-color: var(--ec-highlight-color);
|
|
259
243
|
}
|
|
260
244
|
|
|
261
|
-
.ec-day-grid .ec-body & {
|
|
262
|
-
min-height: 5em;
|
|
263
|
-
position: relative;
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
.ec-day-grid .ec-uniform & {
|
|
267
|
-
min-height: 0;
|
|
268
|
-
}
|
|
269
245
|
|
|
270
|
-
.ec-day-grid &:first-child {
|
|
271
|
-
border-left: none;
|
|
272
|
-
}
|
|
273
246
|
|
|
274
247
|
&.ec-other-month .ec-day-head {
|
|
275
248
|
opacity: .3;
|
|
@@ -280,26 +253,6 @@
|
|
|
280
253
|
}
|
|
281
254
|
}
|
|
282
255
|
|
|
283
|
-
.ec-day-grid {
|
|
284
|
-
.ec-day-head {
|
|
285
|
-
display: block;
|
|
286
|
-
border: none;
|
|
287
|
-
text-align: right;
|
|
288
|
-
padding: 4px 4px 3px;
|
|
289
|
-
}
|
|
290
|
-
|
|
291
|
-
.ec-day-foot {
|
|
292
|
-
position: absolute;
|
|
293
|
-
bottom: 0;
|
|
294
|
-
padding: 2px;
|
|
295
|
-
font-size: .85em;
|
|
296
|
-
|
|
297
|
-
a {
|
|
298
|
-
cursor: pointer;
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
|
-
|
|
303
256
|
.ec-list {
|
|
304
257
|
.ec-day-head {
|
|
305
258
|
background-color: var(--ec-list-day-bg-color);
|
|
@@ -446,12 +399,24 @@
|
|
|
446
399
|
|
|
447
400
|
.ec-bg-events {
|
|
448
401
|
position: relative;
|
|
402
|
+
|
|
403
|
+
.ec-day-grid &,
|
|
404
|
+
.ec-all-day & {
|
|
405
|
+
position: absolute;
|
|
406
|
+
inset: 0;
|
|
407
|
+
}
|
|
449
408
|
}
|
|
450
409
|
|
|
451
410
|
.ec-bg-event {
|
|
452
411
|
position: absolute;
|
|
453
412
|
background-color: var(--ec-bg-event-color);
|
|
454
413
|
opacity: var(--ec-bg-event-opacity);
|
|
414
|
+
|
|
415
|
+
.ec-day-grid &,
|
|
416
|
+
.ec-all-day & {
|
|
417
|
+
height: 100%;
|
|
418
|
+
z-index: auto;
|
|
419
|
+
}
|
|
455
420
|
}
|
|
456
421
|
|
|
457
422
|
.ec-time {
|