@event-calendar/core 5.2.1 → 5.2.3
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 +12 -3
- package/dist/index.css +20 -1
- package/dist/index.js +23 -12
- package/package.json +1 -1
- package/src/Buttons.svelte +1 -1
- package/src/Calendar.svelte +4 -3
- package/src/lib/date.js +10 -3
- package/src/plugins/resource-timeline/Event.svelte +1 -1
- package/src/plugins/resource-timeline/lib.js +1 -1
- package/src/storage/derived.js +6 -3
- package/src/storage/options.svelte.js +3 -1
- package/src/styles/index.css +1 -0
- package/src/styles/scrollbars.css +19 -0
package/README.md
CHANGED
|
@@ -41,6 +41,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
|
|
|
41
41
|
- [buttonText](#buttontext)
|
|
42
42
|
- [columnWidth](#columnwidth)
|
|
43
43
|
- [customButtons](#custombuttons)
|
|
44
|
+
- [customScrollbars](#customscrollbars)
|
|
44
45
|
- [date](#date)
|
|
45
46
|
- [dateClick](#dateclick)
|
|
46
47
|
- [datesAboveResources](#datesaboveresources)
|
|
@@ -67,9 +68,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
|
|
|
67
68
|
- [eventDragStart](#eventdragstart)
|
|
68
69
|
- [eventDragStop](#eventdragstop)
|
|
69
70
|
- [eventDrop](#eventdrop)
|
|
70
|
-
- [eventDurationEditable](#eventdurationeditable)
|
|
71
71
|
</td><td>
|
|
72
72
|
|
|
73
|
+
- [eventDurationEditable](#eventdurationeditable)
|
|
73
74
|
- [eventFilter](#eventfilter)
|
|
74
75
|
- [eventLongPressDelay](#eventlongpressdelay)
|
|
75
76
|
- [eventMouseEnter](#eventmouseenter)
|
|
@@ -246,8 +247,8 @@ This bundle contains a version of the calendar that includes all plugins and is
|
|
|
246
247
|
|
|
247
248
|
The first step is to include the following lines of code in the `<head>` section of your page:
|
|
248
249
|
```html
|
|
249
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.
|
|
250
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.
|
|
250
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.3/dist/event-calendar.min.css">
|
|
251
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.3/dist/event-calendar.min.js"></script>
|
|
251
252
|
```
|
|
252
253
|
|
|
253
254
|
<details>
|
|
@@ -470,6 +471,14 @@ function (customButtons) {
|
|
|
470
471
|
</tr>
|
|
471
472
|
</table>
|
|
472
473
|
|
|
474
|
+
### customScrollbars
|
|
475
|
+
- Type `boolean`
|
|
476
|
+
- Default `false`
|
|
477
|
+
|
|
478
|
+
Enables scrollbars styling, which in turn prevents the scrollbars from being hidden in [supported](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar#browser_compatibility) browsers.
|
|
479
|
+
|
|
480
|
+
This option can be useful, for example, for macOS users in `resourceTimeline` views to indicate that the calendar can be scrolled horizontally. On macOS, scrollbars can be hidden completely, and this option ensures they are always visible in [supported](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar#browser_compatibility) browsers.
|
|
481
|
+
|
|
473
482
|
### date
|
|
474
483
|
- Type `Date` or `string`
|
|
475
484
|
- Default `new Date()`
|
package/dist/index.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* EventCalendar v5.2.
|
|
2
|
+
* EventCalendar v5.2.3
|
|
3
3
|
* https://github.com/vkurko/calendar
|
|
4
4
|
*/
|
|
5
5
|
.ec {
|
|
@@ -628,6 +628,25 @@
|
|
|
628
628
|
pointer-events: auto;
|
|
629
629
|
}
|
|
630
630
|
}
|
|
631
|
+
.ec-custom-scrollbars {
|
|
632
|
+
.ec-main {
|
|
633
|
+
&::-webkit-scrollbar {
|
|
634
|
+
background-color: transparent;
|
|
635
|
+
}
|
|
636
|
+
|
|
637
|
+
&::-webkit-scrollbar-thumb {
|
|
638
|
+
border: 4px solid transparent;
|
|
639
|
+
box-shadow: none;
|
|
640
|
+
background-color: var(--ec-border-color);
|
|
641
|
+
background-clip: padding-box;
|
|
642
|
+
border-radius: 8px;
|
|
643
|
+
}
|
|
644
|
+
|
|
645
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
646
|
+
background-color: var(--ec-color-400);
|
|
647
|
+
}
|
|
648
|
+
}
|
|
649
|
+
}
|
|
631
650
|
.ec {
|
|
632
651
|
display: flex;
|
|
633
652
|
flex-direction: column;
|
package/dist/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* EventCalendar v5.2.
|
|
2
|
+
* EventCalendar v5.2.3
|
|
3
3
|
* https://github.com/vkurko/calendar
|
|
4
4
|
*/
|
|
5
5
|
import { untrack, getAbortSignal, tick, getContext, setContext, onMount, mount, unmount } from "svelte";
|
|
@@ -219,18 +219,22 @@ function copyTime(toDate, fromDate) {
|
|
|
219
219
|
function toSeconds(duration) {
|
|
220
220
|
return duration.seconds;
|
|
221
221
|
}
|
|
222
|
-
function nextDate(date, duration) {
|
|
222
|
+
function nextDate(date, duration, hiddenDays) {
|
|
223
223
|
addDuration(date, duration);
|
|
224
|
+
_skipHiddenDays(date, hiddenDays, addDay);
|
|
224
225
|
return date;
|
|
225
226
|
}
|
|
226
227
|
function prevDate(date, duration, hiddenDays) {
|
|
227
228
|
subtractDuration(date, duration);
|
|
229
|
+
_skipHiddenDays(date, hiddenDays, subtractDay);
|
|
230
|
+
return date;
|
|
231
|
+
}
|
|
232
|
+
function _skipHiddenDays(date, hiddenDays, dateFn) {
|
|
228
233
|
if (hiddenDays.length && hiddenDays.length < 7) {
|
|
229
234
|
while (hiddenDays.includes(date.getUTCDay())) {
|
|
230
|
-
|
|
235
|
+
dateFn(date);
|
|
231
236
|
}
|
|
232
237
|
}
|
|
233
|
-
return date;
|
|
234
238
|
}
|
|
235
239
|
function getWeekNumber(date, firstDay) {
|
|
236
240
|
date = cloneDate(date);
|
|
@@ -762,6 +766,8 @@ function createOptions(plugins) {
|
|
|
762
766
|
let options = {
|
|
763
767
|
buttonText: { today: "today" },
|
|
764
768
|
customButtons: {},
|
|
769
|
+
customScrollbars: false,
|
|
770
|
+
// ec option
|
|
765
771
|
date: /* @__PURE__ */ new Date(),
|
|
766
772
|
datesSet: void 0,
|
|
767
773
|
dayHeaderFormat: { weekday: "short", month: "numeric", day: "numeric" },
|
|
@@ -805,6 +811,7 @@ function createOptions(plugins) {
|
|
|
805
811
|
buttonGroup: "ec-button-group",
|
|
806
812
|
calendar: "ec",
|
|
807
813
|
colHead: "ec-col-head",
|
|
814
|
+
customScrollbars: "ec-custom-scrollbars",
|
|
808
815
|
day: "ec-day",
|
|
809
816
|
dayHead: "ec-day-head",
|
|
810
817
|
disabled: "ec-disabled",
|
|
@@ -1172,9 +1179,12 @@ function viewDates(mainState) {
|
|
|
1172
1179
|
addDay(date);
|
|
1173
1180
|
}
|
|
1174
1181
|
if (!dates.length && hiddenDays.length && hiddenDays.length < 7) {
|
|
1175
|
-
while (hiddenDays.includes(
|
|
1176
|
-
|
|
1182
|
+
while (hiddenDays.includes(date.getUTCDay())) {
|
|
1183
|
+
addDay(date);
|
|
1177
1184
|
}
|
|
1185
|
+
tick().then(() => {
|
|
1186
|
+
mainState.setOption("date", date);
|
|
1187
|
+
});
|
|
1178
1188
|
}
|
|
1179
1189
|
});
|
|
1180
1190
|
return dates;
|
|
@@ -1459,7 +1469,7 @@ function Buttons($$anchor, $$props) {
|
|
|
1459
1469
|
mainState.setOption("date", prevDate(cloneDate($.get(date)), $.get(duration), $.get(hiddenDays)));
|
|
1460
1470
|
}
|
|
1461
1471
|
function next() {
|
|
1462
|
-
mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(duration)));
|
|
1472
|
+
mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(duration), $.get(hiddenDays)));
|
|
1463
1473
|
}
|
|
1464
1474
|
function setToday() {
|
|
1465
1475
|
mainState.setOption("date", cloneDate($.get(today)));
|
|
@@ -1690,7 +1700,7 @@ function Calendar($$anchor, $$props) {
|
|
|
1690
1700
|
let plugins = $.prop($$props, "plugins", 19, () => []), options = $.prop($$props, "options", 19, () => ({}));
|
|
1691
1701
|
let mainState = new State(plugins(), options());
|
|
1692
1702
|
setContext("state", mainState);
|
|
1693
|
-
let auxComponents = $.derived(() => mainState.auxComponents), features = $.derived(() => mainState.features), events = $.derived(() => mainState.events), interaction = $.derived(() => mainState.interaction), iClass = $.derived(() => mainState.iClass), view2 = $.derived(() => mainState.view), View2 = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), duration = $.derived(() => mainState.options.duration), height2 = $.derived(() => mainState.options.height), hiddenDays = $.derived(() => mainState.options.hiddenDays), theme = $.derived(() => mainState.options.theme);
|
|
1703
|
+
let auxComponents = $.derived(() => mainState.auxComponents), features = $.derived(() => mainState.features), events = $.derived(() => mainState.events), interaction = $.derived(() => mainState.interaction), iClass = $.derived(() => mainState.iClass), view2 = $.derived(() => mainState.view), View2 = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), duration = $.derived(() => mainState.options.duration), height2 = $.derived(() => mainState.options.height), hiddenDays = $.derived(() => mainState.options.hiddenDays), customScrollbars = $.derived(() => mainState.options.customScrollbars), theme = $.derived(() => mainState.options.theme);
|
|
1694
1704
|
let prevOptions = { ...options() };
|
|
1695
1705
|
$.user_pre_effect(() => {
|
|
1696
1706
|
for (let [name, value] of diff(options(), prevOptions)) {
|
|
@@ -1773,7 +1783,7 @@ function Calendar($$anchor, $$props) {
|
|
|
1773
1783
|
return null;
|
|
1774
1784
|
}
|
|
1775
1785
|
function next() {
|
|
1776
|
-
mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(duration)));
|
|
1786
|
+
mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(duration), $.get(hiddenDays)));
|
|
1777
1787
|
return this;
|
|
1778
1788
|
}
|
|
1779
1789
|
function prev() {
|
|
@@ -1828,7 +1838,8 @@ function Calendar($$anchor, $$props) {
|
|
|
1828
1838
|
$.set_class(div, 1, $.clsx([
|
|
1829
1839
|
$.get(theme).calendar,
|
|
1830
1840
|
$.get(theme).view,
|
|
1831
|
-
$.get(iClass) && $.get(theme)[$.get(iClass)]
|
|
1841
|
+
$.get(iClass) && $.get(theme)[$.get(iClass)],
|
|
1842
|
+
$.get(customScrollbars) && $.get(theme).customScrollbars
|
|
1832
1843
|
]));
|
|
1833
1844
|
$.set_attribute(div, "role", $0);
|
|
1834
1845
|
styles = $.set_style(div, "", styles, { height: $.get(height2) });
|
|
@@ -5108,7 +5119,7 @@ function prepareChunks(chunks) {
|
|
|
5108
5119
|
}
|
|
5109
5120
|
}
|
|
5110
5121
|
function repositionEvent(chunk, height2, monthView2) {
|
|
5111
|
-
let top =
|
|
5122
|
+
let top = 1;
|
|
5112
5123
|
let bottom = top + height2;
|
|
5113
5124
|
let dayChunks = chunk.day;
|
|
5114
5125
|
dayChunks.sort((a, b) => (a.top ?? Number.POSITIVE_INFINITY) - (b.top ?? Number.POSITIVE_INFINITY));
|
|
@@ -5378,7 +5389,7 @@ function Event($$anchor, $$props) {
|
|
|
5378
5389
|
let $$d = $.derived(() => getContext("state")), slotDuration = $.derived(() => $.get($$d).options.slotDuration), slotWidth = $.derived(() => $.get($$d).options.slotWidth);
|
|
5379
5390
|
let $$d_1 = $.derived(() => getContext("view-state")), monthView2 = $.derived(() => $.get($$d_1).monthView);
|
|
5380
5391
|
let el = $.state(void 0);
|
|
5381
|
-
let margin = $.state(
|
|
5392
|
+
let margin = $.state(1);
|
|
5382
5393
|
let event = $.derived(() => $$props.chunk.event);
|
|
5383
5394
|
let styles = $.derived(() => (style) => {
|
|
5384
5395
|
style["grid-column"] = `${$$props.chunk.gridColumn} / span ${$$props.chunk.dates.length}`;
|
package/package.json
CHANGED
package/src/Buttons.svelte
CHANGED
package/src/Calendar.svelte
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
|
|
18
18
|
let {
|
|
19
19
|
auxComponents, features, events, interaction, iClass, view, viewComponent: View,
|
|
20
|
-
options: {date, duration, height, hiddenDays, theme}
|
|
20
|
+
options: {date, duration, height, hiddenDays, customScrollbars, theme}
|
|
21
21
|
} = $derived(mainState);
|
|
22
22
|
|
|
23
23
|
// Reactively update options that did change
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
export function next() {
|
|
120
|
-
mainState.setOption('date', nextDate(cloneDate(date), duration));
|
|
120
|
+
mainState.setOption('date', nextDate(cloneDate(date), duration, hiddenDays));
|
|
121
121
|
return this;
|
|
122
122
|
}
|
|
123
123
|
|
|
@@ -131,7 +131,8 @@
|
|
|
131
131
|
class={[
|
|
132
132
|
theme.calendar,
|
|
133
133
|
theme.view,
|
|
134
|
-
iClass && theme[iClass]
|
|
134
|
+
iClass && theme[iClass],
|
|
135
|
+
customScrollbars && theme.customScrollbars
|
|
135
136
|
]}
|
|
136
137
|
style:height
|
|
137
138
|
role="{features.includes('list') ? 'list' : 'table'}"
|
package/src/lib/date.js
CHANGED
|
@@ -135,8 +135,10 @@ export function toSeconds(duration) {
|
|
|
135
135
|
/**
|
|
136
136
|
* Move the date forward (when pressing the next button)
|
|
137
137
|
*/
|
|
138
|
-
export function nextDate(date, duration) {
|
|
138
|
+
export function nextDate(date, duration, hiddenDays) {
|
|
139
139
|
addDuration(date, duration);
|
|
140
|
+
_skipHiddenDays(date, hiddenDays, addDay);
|
|
141
|
+
|
|
140
142
|
return date;
|
|
141
143
|
}
|
|
142
144
|
|
|
@@ -145,12 +147,17 @@ export function nextDate(date, duration) {
|
|
|
145
147
|
*/
|
|
146
148
|
export function prevDate(date, duration, hiddenDays) {
|
|
147
149
|
subtractDuration(date, duration);
|
|
150
|
+
_skipHiddenDays(date, hiddenDays, subtractDay);
|
|
151
|
+
|
|
152
|
+
return date;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
function _skipHiddenDays(date, hiddenDays, dateFn) {
|
|
148
156
|
if (hiddenDays.length && hiddenDays.length < 7) {
|
|
149
157
|
while (hiddenDays.includes(date.getUTCDay())) {
|
|
150
|
-
|
|
158
|
+
dateFn(date);
|
|
151
159
|
}
|
|
152
160
|
}
|
|
153
|
-
return date;
|
|
154
161
|
}
|
|
155
162
|
|
|
156
163
|
/**
|
|
@@ -68,7 +68,7 @@ export function prepareChunks(chunks) {
|
|
|
68
68
|
}
|
|
69
69
|
|
|
70
70
|
export function repositionEvent(chunk, height, monthView) {
|
|
71
|
-
let top =
|
|
71
|
+
let top = 1;
|
|
72
72
|
let bottom = top + height;
|
|
73
73
|
let dayChunks = chunk.day;
|
|
74
74
|
dayChunks.sort((a, b) => (a.top ?? Number.POSITIVE_INFINITY) - (b.top ?? Number.POSITIVE_INFINITY));
|
package/src/storage/derived.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {untrack} from 'svelte';
|
|
1
|
+
import {tick, untrack} from 'svelte';
|
|
2
2
|
import {
|
|
3
3
|
addDay, addDuration, cloneDate, createView, isFunction, prevClosestDay, subtractDay,
|
|
4
4
|
toEventWithLocalDates, toViewWithLocalDates
|
|
@@ -101,9 +101,12 @@ export function viewDates(mainState) {
|
|
|
101
101
|
}
|
|
102
102
|
if (!dates.length && hiddenDays.length && hiddenDays.length < 7) {
|
|
103
103
|
// Try to move the date
|
|
104
|
-
while (hiddenDays.includes(
|
|
105
|
-
|
|
104
|
+
while (hiddenDays.includes(date.getUTCDay())) {
|
|
105
|
+
addDay(date);
|
|
106
106
|
}
|
|
107
|
+
tick().then(() => {
|
|
108
|
+
mainState.setOption('date', date);
|
|
109
|
+
});
|
|
107
110
|
}
|
|
108
111
|
});
|
|
109
112
|
|
|
@@ -11,6 +11,7 @@ function createOptions(plugins) {
|
|
|
11
11
|
today: 'today',
|
|
12
12
|
},
|
|
13
13
|
customButtons: {},
|
|
14
|
+
customScrollbars: false, // ec option
|
|
14
15
|
date: new Date(),
|
|
15
16
|
datesSet: undefined,
|
|
16
17
|
dayHeaderFormat: {
|
|
@@ -31,7 +32,7 @@ function createOptions(plugins) {
|
|
|
31
32
|
eventColor: undefined,
|
|
32
33
|
eventContent: undefined,
|
|
33
34
|
eventDidMount: undefined,
|
|
34
|
-
eventFilter: undefined,
|
|
35
|
+
eventFilter: undefined, // ec option
|
|
35
36
|
eventMouseEnter: undefined,
|
|
36
37
|
eventMouseLeave: undefined,
|
|
37
38
|
eventOrder: undefined,
|
|
@@ -65,6 +66,7 @@ function createOptions(plugins) {
|
|
|
65
66
|
buttonGroup: 'ec-button-group',
|
|
66
67
|
calendar: 'ec',
|
|
67
68
|
colHead: 'ec-col-head',
|
|
69
|
+
customScrollbars: 'ec-custom-scrollbars',
|
|
68
70
|
day: 'ec-day',
|
|
69
71
|
dayHead: 'ec-day-head',
|
|
70
72
|
disabled: 'ec-disabled',
|
package/src/styles/index.css
CHANGED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
.ec-custom-scrollbars {
|
|
2
|
+
.ec-main {
|
|
3
|
+
&::-webkit-scrollbar {
|
|
4
|
+
background-color: transparent;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
&::-webkit-scrollbar-thumb {
|
|
8
|
+
border: 4px solid transparent;
|
|
9
|
+
box-shadow: none;
|
|
10
|
+
background-color: var(--ec-border-color);
|
|
11
|
+
background-clip: padding-box;
|
|
12
|
+
border-radius: 8px;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&::-webkit-scrollbar-thumb:hover {
|
|
16
|
+
background-color: var(--ec-color-400);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|