@event-calendar/core 5.5.1 → 5.6.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.
Files changed (12) hide show
  1. package/README.md +70 -4
  2. package/dist/index.css +1 -1
  3. package/dist/index.js +92 -81
  4. package/package.json +2 -2
  5. package/src/Buttons.svelte +4 -4
  6. package/src/Calendar.svelte +3 -3
  7. package/src/lib/components/BaseDay.svelte +15 -4
  8. package/src/lib/utils.js +4 -0
  9. package/src/plugins/day-grid/Day.svelte +27 -27
  10. package/src/plugins/list/Day.svelte +10 -8
  11. package/src/plugins/time-grid/options.js +3 -3
  12. package/src/storage/options.js +4 -1
package/README.md CHANGED
@@ -48,8 +48,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
48
48
  - [customScrollbars](#customscrollbars)
49
49
  - [date](#date)
50
50
  - [dateClick](#dateclick)
51
+ - [dateIncrement](#dateincrement)
51
52
  - [datesAboveResources](#datesaboveresources)
52
53
  - [datesSet](#datesset)
54
+ - [dayCellContent](#daycellcontent)
53
55
  - [dayCellFormat](#daycellformat)
54
56
  - [dayHeaderAriaLabelFormat](#dayheaderarialabelformat)
55
57
  - [dayHeaderFormat](#dayheaderformat)
@@ -72,9 +74,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
72
74
  - [eventDragStart](#eventdragstart)
73
75
  - [eventDragStop](#eventdragstop)
74
76
  - [eventDrop](#eventdrop)
75
- - [eventDurationEditable](#eventdurationeditable)
76
77
  </td><td>
77
78
 
79
+ - [eventDurationEditable](#eventdurationeditable)
78
80
  - [eventFilter](#eventfilter)
79
81
  - [eventLongPressDelay](#eventlongpressdelay)
80
82
  - [eventMouseEnter](#eventmouseenter)
@@ -108,9 +110,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
108
110
  - [noEventsClick](#noeventsclick)
109
111
  - [noEventsContent](#noeventscontent)
110
112
  - [nowIndicator](#nowindicator)
111
- - [pointer](#pointer)
112
113
  </td><td>
113
114
 
115
+ - [pointer](#pointer)
114
116
  - [refetchResourcesOnNavigate](#refetchresourcesonnavigate)
115
117
  - [resizeConstraint](#resizeconstraint)
116
118
  - [resourceExpand](#resourceexpand)
@@ -258,8 +260,8 @@ This bundle contains a version of the calendar that includes all plugins and is
258
260
 
259
261
  The first step is to include the following lines of code in the `<head>` section of your page:
260
262
  ```html
261
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.5.1/dist/event-calendar.min.css">
262
- <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.5.1/dist/event-calendar.min.js"></script>
263
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.6.0/dist/event-calendar.min.css">
264
+ <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.6.0/dist/event-calendar.min.js"></script>
263
265
  ```
264
266
 
265
267
  <details>
@@ -570,6 +572,16 @@ If the current view is a resource view, the [Resource](#resource-object) object
570
572
  </tr>
571
573
  </table>
572
574
 
575
+ ### dateIncrement
576
+ - Type `string`, `integer` or `object`
577
+ - Default `undefined`
578
+
579
+ Defines the interval by which the displayed view is shifted when pressing the prev/next buttons or when the [prev()](#prev)/[next()](#next) methods are called.
580
+
581
+ This should be a value that can be parsed into a [Duration](#duration-object) object.
582
+
583
+ If not specified, then equal to [duration](#duration).
584
+
573
585
  ### datesAboveResources
574
586
  - Type `boolean`
575
587
  - Default `false`
@@ -627,6 +639,60 @@ The current [View](#view-object) object
627
639
  </tr>
628
640
  </table>
629
641
 
642
+ ### dayCellContent
643
+ - Type `Content` or `function`
644
+ - Default `undefined`
645
+
646
+ Defines the content that is rendered inside the day cell.
647
+
648
+ This value can be either a [Content](#content) or a function that returns content:
649
+
650
+ ```js
651
+ function (arg) {
652
+ // return Content
653
+ }
654
+ ```
655
+ `arg` is an object with the following properties:
656
+ <table>
657
+ <tr>
658
+ <td>
659
+
660
+ `allDay`
661
+ </td>
662
+ <td>
663
+
664
+ `true` or `false`. Determines if the cell is within `all-day` slot. Month and list views are also considered as all-day slots
665
+ </td>
666
+ </tr>
667
+ <tr>
668
+ <td>
669
+
670
+ `date`
671
+ </td>
672
+ <td>JavaScript Date object corresponding to the day</td>
673
+ </tr>
674
+ <tr>
675
+ <td>
676
+
677
+ `isToday`
678
+ </td>
679
+ <td>
680
+
681
+ `true` or `false`. Determines if the cell is for today
682
+ </td>
683
+ </tr>
684
+ <tr>
685
+ <td>
686
+
687
+ `resource`
688
+ </td>
689
+ <td>
690
+
691
+ If the current view is a resource view, the [Resource](#resource-object) object that owns this cell
692
+ </td>
693
+ </tr>
694
+ </table>
695
+
630
696
  ### dayCellFormat
631
697
  - Type `object` or `function`
632
698
  - Default `{day: 'numeric'}`
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * EventCalendar v5.5.1
2
+ * EventCalendar v5.6.0
3
3
  * https://github.com/vkurko/calendar
4
4
  */
5
5
  .ec {
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * EventCalendar v5.5.1
2
+ * EventCalendar v5.6.0
3
3
  * https://github.com/vkurko/calendar
4
4
  */
5
5
  import { getAbortSignal, getContext, mount, onMount, setContext, tick, unmount, untrack } from "svelte";
@@ -115,6 +115,9 @@ var identity = (x) => x;
115
115
  function isRtl() {
116
116
  return window.getComputedStyle(document.documentElement).direction === "rtl";
117
117
  }
118
+ function undefinedOr(fn) {
119
+ return (input) => input === void 0 ? void 0 : fn(input);
120
+ }
118
121
  //#endregion
119
122
  //#region packages/core/src/lib/date.js
120
123
  var DAY_IN_SECONDS = 86400;
@@ -796,7 +799,9 @@ function createOptions(plugins) {
796
799
  customButtons: {},
797
800
  customScrollbars: false,
798
801
  date: /* @__PURE__ */ new Date(),
802
+ dateIncrement: void 0,
799
803
  datesSet: void 0,
804
+ dayCellContent: void 0,
800
805
  dayHeaderFormat: {
801
806
  weekday: "short",
802
807
  month: "numeric",
@@ -897,6 +902,7 @@ function createOptions(plugins) {
897
902
  function createParsers(plugins) {
898
903
  let parsers = {
899
904
  date: (input) => setMidnight(createDate(input)),
905
+ dateIncrement: undefinedOr(createDuration),
900
906
  duration: createDuration,
901
907
  events: createEvents,
902
908
  eventSources: createEventSources,
@@ -1444,14 +1450,14 @@ var State = class {
1444
1450
  //#region packages/core/src/Buttons.svelte
1445
1451
  var root_2$5 = $.from_html(`<h2></h2>`);
1446
1452
  var root_3$2 = $.from_html(`<button><i></i></button>`);
1447
- var root_4$2 = $.from_html(`<button><i></i></button>`);
1453
+ var root_4$1 = $.from_html(`<button><i></i></button>`);
1448
1454
  var root_5 = $.from_html(`<button> </button>`);
1449
1455
  var root_6$1 = $.from_html(`<button></button>`);
1450
1456
  var root_7$1 = $.from_html(`<button> </button>`);
1451
1457
  function Buttons($$anchor, $$props) {
1452
1458
  $.push($$props, true);
1453
1459
  let mainState = getContext("state");
1454
- let currentRange = $.derived(() => mainState.currentRange), today = $.derived(() => mainState.today), viewTitle = $.derived(() => mainState.viewTitle), viewDates = $.derived(() => mainState.viewDates), buttonText = $.derived(() => mainState.options.buttonText), customButtons = $.derived(() => mainState.options.customButtons), date = $.derived(() => mainState.options.date), duration = $.derived(() => mainState.options.duration), hiddenDays = $.derived(() => mainState.options.hiddenDays), theme = $.derived(() => mainState.options.theme), validRange = $.derived(() => mainState.options.validRange), view = $.derived(() => mainState.options.view);
1460
+ let currentRange = $.derived(() => mainState.currentRange), today = $.derived(() => mainState.today), viewTitle = $.derived(() => mainState.viewTitle), viewDates = $.derived(() => mainState.viewDates), buttonText = $.derived(() => mainState.options.buttonText), customButtons = $.derived(() => mainState.options.customButtons), date = $.derived(() => mainState.options.date), dateIncrement = $.derived(() => mainState.options.dateIncrement), duration = $.derived(() => mainState.options.duration), hiddenDays = $.derived(() => mainState.options.hiddenDays), theme = $.derived(() => mainState.options.theme), validRange = $.derived(() => mainState.options.validRange), view = $.derived(() => mainState.options.view);
1455
1461
  let prevDisabled = $.state(false);
1456
1462
  let nextDisabled = $.state(false);
1457
1463
  let todayDisabled = $.state(false);
@@ -1487,10 +1493,10 @@ function Buttons($$anchor, $$props) {
1487
1493
  return result;
1488
1494
  }
1489
1495
  function prev() {
1490
- mainState.setOption("date", prevDate(cloneDate($.get(date)), $.get(duration), $.get(hiddenDays)));
1496
+ mainState.setOption("date", prevDate(cloneDate($.get(date)), $.get(dateIncrement) ?? $.get(duration), $.get(hiddenDays)));
1491
1497
  }
1492
1498
  function next() {
1493
- mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(duration), $.get(hiddenDays)));
1499
+ mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(dateIncrement) ?? $.get(duration), $.get(hiddenDays)));
1494
1500
  }
1495
1501
  function setToday() {
1496
1502
  mainState.setOption("date", cloneDate($.get(today)));
@@ -1521,7 +1527,7 @@ function Buttons($$anchor, $$props) {
1521
1527
  $.append($$anchor, button_1);
1522
1528
  };
1523
1529
  var consequent_2 = ($$anchor) => {
1524
- var button_2 = root_4$2();
1530
+ var button_2 = root_4$1();
1525
1531
  var i_1 = $.child(button_2);
1526
1532
  $.reset(button_2);
1527
1533
  $.template_effect(() => {
@@ -1648,7 +1654,7 @@ function Calendar($$anchor, $$props) {
1648
1654
  let plugins = $.prop($$props, "plugins", 19, () => []), options = $.prop($$props, "options", 19, () => ({}));
1649
1655
  let mainState = new State(plugins(), options());
1650
1656
  setContext("state", mainState);
1651
- let auxComponents = $.derived(() => mainState.auxComponents), features = $.derived(() => mainState.features), events = $.derived(() => mainState.events), interaction = $.derived(() => mainState.interaction), iClass = $.derived(() => mainState.iClass), view = $.derived(() => mainState.view), View = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), duration = $.derived(() => mainState.options.duration), height = $.derived(() => mainState.options.height), hiddenDays = $.derived(() => mainState.options.hiddenDays), customScrollbars = $.derived(() => mainState.options.customScrollbars), theme = $.derived(() => mainState.options.theme);
1657
+ let auxComponents = $.derived(() => mainState.auxComponents), features = $.derived(() => mainState.features), events = $.derived(() => mainState.events), interaction = $.derived(() => mainState.interaction), iClass = $.derived(() => mainState.iClass), view = $.derived(() => mainState.view), View = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), dateIncrement = $.derived(() => mainState.options.dateIncrement), duration = $.derived(() => mainState.options.duration), height = $.derived(() => mainState.options.height), hiddenDays = $.derived(() => mainState.options.hiddenDays), customScrollbars = $.derived(() => mainState.options.customScrollbars), theme = $.derived(() => mainState.options.theme);
1652
1658
  let prevOptions = { ...options() };
1653
1659
  $.user_pre_effect(() => {
1654
1660
  for (let [name, value] of diff(options(), prevOptions)) untrack(() => {
@@ -1718,11 +1724,11 @@ function Calendar($$anchor, $$props) {
1718
1724
  return null;
1719
1725
  }
1720
1726
  function next() {
1721
- mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(duration), $.get(hiddenDays)));
1727
+ mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(dateIncrement) ?? $.get(duration), $.get(hiddenDays)));
1722
1728
  return this;
1723
1729
  }
1724
1730
  function prev() {
1725
- mainState.setOption("date", prevDate(cloneDate($.get(date)), $.get(duration), $.get(hiddenDays)));
1731
+ mainState.setOption("date", prevDate(cloneDate($.get(date)), $.get(dateIncrement) ?? $.get(duration), $.get(hiddenDays)));
1726
1732
  return this;
1727
1733
  }
1728
1734
  var $$exports = {
@@ -1931,9 +1937,15 @@ var root$9 = $.from_html(`<div><!></div>`);
1931
1937
  function BaseDay($$anchor, $$props) {
1932
1938
  $.push($$props, true);
1933
1939
  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);
1934
- let $$d = $.derived(() => getContext("state")), today = $.derived(() => $.get($$d).today), action = $.derived(() => $.get($$d).interaction.action), theme = $.derived(() => $.get($$d).options.theme);
1940
+ let $$d = $.derived(() => getContext("state")), today = $.derived(() => $.get($$d).today), action = $.derived(() => $.get($$d).interaction.action), dayCellContent = $.derived(() => $.get($$d).options.dayCellContent), theme = $.derived(() => $.get($$d).options.theme);
1935
1941
  let $$d_1 = $.derived(() => getContext("view-state")), snap = $.derived(() => $.get($$d_1).snap);
1936
1942
  let isToday = $.derived(() => datesEqual($$props.date, $.get(today)));
1943
+ let dayContent = $.derived(() => isFunction($.get(dayCellContent)) ? $.get(dayCellContent)({
1944
+ allDay: allDay(),
1945
+ date: toLocalDate($$props.date),
1946
+ isToday: $.get(isToday),
1947
+ resource: resource()
1948
+ }) : $.get(dayCellContent));
1937
1949
  let classNames = $.derived(() => classes()([
1938
1950
  $.get(theme).day,
1939
1951
  $.get(theme).weekdays?.[$$props.date.getUTCDay()],
@@ -1957,9 +1969,10 @@ function BaseDay($$anchor, $$props) {
1957
1969
  let onpointerdown = $.derived(() => !disabled() && $.get(action) ? (jsEvent) => $.get(action).select(jsEvent, $.get(snap)) : void 0);
1958
1970
  var div = root$9();
1959
1971
  var node = $.child(div);
1960
- $.snippet(node, () => $$props.children ?? $.noop);
1972
+ $.snippet(node, () => $$props.content ?? $.noop, () => $.get(dayContent));
1961
1973
  $.reset(div);
1962
1974
  $.bind_this(div, ($$value) => el($$value), () => el());
1975
+ $.attach(div, () => $$props.content ? null : contentFrom($.get(dayContent)));
1963
1976
  $.template_effect(() => {
1964
1977
  $.set_class(div, 1, $.clsx($.get(classNames)));
1965
1978
  $.set_attribute(div, "role", role());
@@ -2193,15 +2206,15 @@ function InteractableEvent($$anchor, $$props) {
2193
2206
  }
2194
2207
  //#endregion
2195
2208
  //#region packages/core/src/plugins/day-grid/Day.svelte
2196
- var root_2$4 = $.from_html(`<time></time>`);
2197
- var root_3 = $.from_html(`<span></span>`);
2198
- var root_4$1 = $.from_html(`<a role="button" tabindex="0" aria-haspopup="dialog"></a>`);
2199
- var root_1$10 = $.from_html(`<div><!> <!></div> <div><!></div>`, 1);
2209
+ var root_2$4 = $.from_html(`<span></span>`);
2210
+ var root_3 = $.from_html(`<a role="button" tabindex="0" aria-haspopup="dialog"></a>`);
2211
+ var root_1$10 = $.from_html(`<div><time></time> <!></div> <div><!></div>`, 1);
2200
2212
  function Day$3($$anchor, $$props) {
2201
2213
  $.push($$props, true);
2202
2214
  let mainState = getContext("state");
2203
2215
  let viewState = getContext("view-state");
2204
- let features = $.derived(() => mainState.features), date = $.derived(() => mainState.options.date), firstDay = $.derived(() => mainState.options.firstDay), moreLinkContent = $.derived(() => mainState.options.moreLinkContent), theme = $.derived(() => mainState.options.theme), weekNumbers = $.derived(() => mainState.options.weekNumbers), weekNumberContent = $.derived(() => mainState.options.weekNumberContent);
2216
+ $.derived(() => mainState.features);
2217
+ let date = $.derived(() => mainState.options.date), firstDay = $.derived(() => mainState.options.firstDay), moreLinkContent = $.derived(() => mainState.options.moreLinkContent), theme = $.derived(() => mainState.options.theme), weekNumbers = $.derived(() => mainState.options.weekNumbers), weekNumberContent = $.derived(() => mainState.options.weekNumberContent);
2205
2218
  let hiddenChunks = $.derived(() => viewState.hiddenChunks), intlDayCell = $.derived(() => viewState.intlDayCell);
2206
2219
  let dayStart = $.derived(() => $$props.day.dayStart), disabled = $.derived(() => $$props.day.disabled), highlight = $.derived(() => $$props.day.highlight);
2207
2220
  let otherMonth = $.derived(() => $.get(dayStart).getUTCMonth() !== $.get(date).getUTCMonth());
@@ -2224,55 +2237,27 @@ function Day$3($$anchor, $$props) {
2224
2237
  function showMore() {
2225
2238
  viewState.popupDay = $$props.day;
2226
2239
  }
2227
- BaseDay($$anchor, {
2228
- get date() {
2229
- return $.get(dayStart);
2230
- },
2231
- allDay: true,
2232
- get classes() {
2233
- return $.get(classes);
2234
- },
2235
- get disabled() {
2236
- return $.get(disabled);
2237
- },
2238
- get highlight() {
2239
- return $.get(highlight);
2240
- },
2241
- get noIeb() {
2242
- return $$props.noIeb;
2243
- },
2244
- get noBeb() {
2245
- return $$props.noBeb;
2246
- },
2247
- children: ($$anchor, $$slotProps) => {
2240
+ {
2241
+ const content = ($$anchor, dayContent = $.noop) => {
2248
2242
  var fragment_1 = root_1$10();
2249
2243
  var div = $.first_child(fragment_1);
2250
- var node = $.child(div);
2244
+ var time = $.child(div);
2245
+ $.attach(time, () => contentFrom(dayContent() ?? $.get(intlDayCell).format($.get(dayStart))));
2246
+ var node = $.sibling(time, 2);
2251
2247
  var consequent = ($$anchor) => {
2252
- var time = root_2$4();
2253
- $.attach(time, () => contentFrom($.get(intlDayCell).format($.get(dayStart))));
2254
- $.template_effect(($0) => $.set_attribute(time, "datetime", $0), [() => toISOString($.get(dayStart), 10)]);
2255
- $.append($$anchor, time);
2256
- };
2257
- var d = $.derived(() => $.get(features).includes("dayNumber"));
2258
- $.if(node, ($$render) => {
2259
- if ($.get(d)) $$render(consequent);
2260
- });
2261
- var node_1 = $.sibling(node, 2);
2262
- var consequent_1 = ($$anchor) => {
2263
- var span = root_3();
2248
+ var span = root_2$4();
2264
2249
  $.attach(span, () => contentFrom($.get(weekNumber)));
2265
2250
  $.template_effect(() => $.set_class(span, 1, $.get(theme).weekNumber));
2266
2251
  $.append($$anchor, span);
2267
2252
  };
2268
- $.if(node_1, ($$render) => {
2269
- if ($.get(showWeekNumber)) $$render(consequent_1);
2253
+ $.if(node, ($$render) => {
2254
+ if ($.get(showWeekNumber)) $$render(consequent);
2270
2255
  });
2271
2256
  $.reset(div);
2272
2257
  var div_1 = $.sibling(div, 2);
2273
- var node_2 = $.child(div_1);
2274
- var consequent_2 = ($$anchor) => {
2275
- var a = root_4$1();
2258
+ var node_1 = $.child(div_1);
2259
+ var consequent_1 = ($$anchor) => {
2260
+ var a = root_3();
2276
2261
  var event_handler = $.derived(() => stopPropagation(showMore));
2277
2262
  var event_handler_1 = $.derived(() => keyEnter(showMore));
2278
2263
  var event_handler_2 = $.derived(stopPropagation);
@@ -2288,18 +2273,41 @@ function Day$3($$anchor, $$props) {
2288
2273
  });
2289
2274
  $.append($$anchor, a);
2290
2275
  };
2291
- $.if(node_2, ($$render) => {
2292
- if ($.get(dayHiddenChunks)) $$render(consequent_2);
2276
+ $.if(node_1, ($$render) => {
2277
+ if ($.get(dayHiddenChunks)) $$render(consequent_1);
2293
2278
  });
2294
2279
  $.reset(div_1);
2295
- $.template_effect(() => {
2280
+ $.template_effect(($0) => {
2296
2281
  $.set_class(div, 1, $.get(theme).dayHead);
2282
+ $.set_attribute(time, "datetime", $0);
2297
2283
  $.set_class(div_1, 1, $.get(theme).dayFoot);
2298
- });
2284
+ }, [() => toISOString($.get(dayStart), 10)]);
2299
2285
  $.append($$anchor, fragment_1);
2300
- },
2301
- $$slots: { default: true }
2302
- });
2286
+ };
2287
+ BaseDay($$anchor, {
2288
+ get date() {
2289
+ return $.get(dayStart);
2290
+ },
2291
+ allDay: true,
2292
+ get classes() {
2293
+ return $.get(classes);
2294
+ },
2295
+ get disabled() {
2296
+ return $.get(disabled);
2297
+ },
2298
+ get highlight() {
2299
+ return $.get(highlight);
2300
+ },
2301
+ get noIeb() {
2302
+ return $$props.noIeb;
2303
+ },
2304
+ get noBeb() {
2305
+ return $$props.noBeb;
2306
+ },
2307
+ content,
2308
+ $$slots: { content: true }
2309
+ });
2310
+ }
2303
2311
  $.pop();
2304
2312
  }
2305
2313
  $.delegate([
@@ -3476,23 +3484,12 @@ function Day$2($$anchor, $$props) {
3476
3484
  var fragment = $.comment();
3477
3485
  var node = $.first_child(fragment);
3478
3486
  var consequent = ($$anchor) => {
3479
- BaseDay($$anchor, {
3480
- get date() {
3481
- return $$props.date;
3482
- },
3483
- allDay: true,
3484
- role: "listitem",
3485
- get disabled() {
3486
- return $.get(disabled);
3487
- },
3488
- get highlight() {
3489
- return $.get(highlight);
3490
- },
3491
- children: ($$anchor, $$slotProps) => {
3487
+ {
3488
+ const content = ($$anchor, dayContent = $.noop) => {
3492
3489
  var fragment_2 = root_2$1();
3493
3490
  var h4 = $.first_child(fragment_2);
3494
3491
  var time = $.child(h4);
3495
- $.attach(time, () => contentFrom($.get(intlListDay).format($$props.date)));
3492
+ $.attach(time, () => contentFrom(dayContent() ?? $.get(intlListDay).format($$props.date)));
3496
3493
  var time_1 = $.sibling(time, 2);
3497
3494
  $.attach(time_1, () => contentFrom($.get(intlListDaySide).format($$props.date)));
3498
3495
  $.reset(h4);
@@ -3509,9 +3506,23 @@ function Day$2($$anchor, $$props) {
3509
3506
  $.set_attribute(time_1, "datetime", $.get(datetime));
3510
3507
  });
3511
3508
  $.append($$anchor, fragment_2);
3512
- },
3513
- $$slots: { default: true }
3514
- });
3509
+ };
3510
+ BaseDay($$anchor, {
3511
+ get date() {
3512
+ return $$props.date;
3513
+ },
3514
+ allDay: true,
3515
+ role: "listitem",
3516
+ get disabled() {
3517
+ return $.get(disabled);
3518
+ },
3519
+ get highlight() {
3520
+ return $.get(highlight);
3521
+ },
3522
+ content,
3523
+ $$slots: { content: true }
3524
+ });
3525
+ }
3515
3526
  };
3516
3527
  $.if(node, ($$render) => {
3517
3528
  if ($.get(chunks).length) $$render(consequent);
@@ -3755,10 +3766,10 @@ function createTRRParsers(parsers) {
3755
3766
  if (!("scrollTime" in parsers)) assign(parsers, {
3756
3767
  scrollTime: createDuration,
3757
3768
  slotDuration: createDuration,
3758
- slotLabelInterval: (input) => input !== void 0 ? createDuration(input) : void 0,
3769
+ slotLabelInterval: undefinedOr(createDuration),
3759
3770
  slotMaxTime: createDuration,
3760
3771
  slotMinTime: createDuration,
3761
- snapDuration: (input) => input !== void 0 ? createDuration(input) : void 0
3772
+ snapDuration: undefinedOr(createDuration)
3762
3773
  });
3763
3774
  }
3764
3775
  //#endregion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@event-calendar/core",
3
- "version": "5.5.1",
3
+ "version": "5.6.0",
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.54.0"
35
+ "svelte": "^5.55.0"
36
36
  }
37
37
  }
package/src/Buttons.svelte CHANGED
@@ -5,8 +5,8 @@
5
5
  let {buttons} = $props();
6
6
 
7
7
  let mainState = getContext('state');
8
- let {currentRange, today, viewTitle, viewDates, options: {buttonText, customButtons, date, duration, hiddenDays,
9
- theme, validRange, view}} = $derived(mainState);
8
+ let {currentRange, today, viewTitle, viewDates, options: {buttonText, customButtons, date, dateIncrement, duration,
9
+ hiddenDays, theme, validRange, view}} = $derived(mainState);
10
10
 
11
11
  let prevDisabled = $state(false);
12
12
  let nextDisabled = $state(false);
@@ -52,11 +52,11 @@
52
52
  }
53
53
 
54
54
  function prev() {
55
- mainState.setOption('date', prevDate(cloneDate(date), duration, hiddenDays));
55
+ mainState.setOption('date', prevDate(cloneDate(date), dateIncrement ?? duration, hiddenDays));
56
56
  }
57
57
 
58
58
  function next() {
59
- mainState.setOption('date', nextDate(cloneDate(date), duration, hiddenDays));
59
+ mainState.setOption('date', nextDate(cloneDate(date), dateIncrement ?? duration, hiddenDays));
60
60
  }
61
61
 
62
62
  function setToday() {
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, customScrollbars, theme}
20
+ options: {date, dateIncrement, duration, height, hiddenDays, customScrollbars, theme}
21
21
  } = $derived(mainState);
22
22
 
23
23
  // Reactively update options that did change
@@ -113,12 +113,12 @@
113
113
  }
114
114
 
115
115
  export function next() {
116
- mainState.setOption('date', nextDate(cloneDate(date), duration, hiddenDays));
116
+ mainState.setOption('date', nextDate(cloneDate(date), dateIncrement ?? duration, hiddenDays));
117
117
  return this;
118
118
  }
119
119
 
120
120
  export function prev() {
121
- mainState.setOption('date', prevDate(cloneDate(date), duration, hiddenDays));
121
+ mainState.setOption('date', prevDate(cloneDate(date), dateIncrement ?? duration, hiddenDays));
122
122
  return this;
123
123
  }
124
124
  </script>
package/src/lib/components/BaseDay.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import {getContext, onMount} from 'svelte';
3
- import {datesEqual, identity, setPayload} from '#lib';
3
+ import {contentFrom, datesEqual, identity, isFunction, setPayload, toLocalDate} from '#lib';
4
4
 
5
5
  let {
6
6
  el = $bindable(),
@@ -14,13 +14,23 @@
14
14
  role = 'cell',
15
15
  noIeb = false,
16
16
  noBeb = false,
17
- children
17
+ content
18
18
  } = $props();
19
19
 
20
- let {today, interaction: {action}, options: {theme}} = $derived(getContext('state'));
20
+ let {today, interaction: {action}, options: {dayCellContent, theme}} = $derived(getContext('state'));
21
21
  let {snap} = $derived(getContext('view-state')); // timeGrid has snap, others don't
22
22
 
23
23
  let isToday = $derived(datesEqual(date, today));
24
+ let dayContent = $derived(
25
+ isFunction(dayCellContent)
26
+ ? dayCellContent({
27
+ allDay,
28
+ date: toLocalDate(date),
29
+ isToday,
30
+ resource
31
+ })
32
+ : dayCellContent
33
+ );
24
34
 
25
35
  // Class
26
36
  let classNames = $derived(classes([
@@ -54,4 +64,5 @@
54
64
  class={classNames}
55
65
  {role}
56
66
  {onpointerdown}
57
- >{@render children?.()}</div>
67
+ {@attach content ? null : contentFrom(dayContent)}
68
+ >{@render content?.(dayContent)}</div>
package/src/lib/utils.js CHANGED
@@ -77,3 +77,7 @@ export const identity = (x) => x;
77
77
  export function isRtl() {
78
78
  return window.getComputedStyle(document.documentElement).direction === 'rtl';
79
79
  }
80
+
81
+ export function undefinedOr(fn) {
82
+ return input => input === undefined ? undefined : fn(input);
83
+ }
package/src/plugins/day-grid/Day.svelte CHANGED
@@ -48,35 +48,35 @@
48
48
  </script>
49
49
 
50
50
  <BaseDay date={dayStart} allDay {classes} {disabled} {highlight} {noIeb} {noBeb}>
51
- <div class="{theme.dayHead}">
52
- {#if features.includes('dayNumber')}
51
+ {#snippet content(dayContent)}
52
+ <div class="{theme.dayHead}">
53
53
  <time
54
54
  datetime="{toISOString(dayStart, 10)}"
55
- {@attach contentFrom(intlDayCell.format(dayStart))}
55
+ {@attach contentFrom(dayContent ?? intlDayCell.format(dayStart))}
56
56
  ></time>
57
- {/if}
58
- {#if showWeekNumber}
59
- <span
60
- class="{theme.weekNumber}"
61
- {@attach contentFrom(weekNumber)}
62
- ></span>
63
- {/if}
64
- </div>
57
+ {#if showWeekNumber}
58
+ <span
59
+ class="{theme.weekNumber}"
60
+ {@attach contentFrom(weekNumber)}
61
+ ></span>
62
+ {/if}
63
+ </div>
65
64
 
66
- <div class="{theme.dayFoot}">
67
- {#if dayHiddenChunks}
68
- <!-- svelte-ignore a11y_missing_attribute -->
69
- <!-- svelte-ignore a11y_missing_content -->
70
- <!-- svelte-ignore a11y_consider_explicit_label -->
71
- <a
72
- role="button"
73
- tabindex="0"
74
- aria-haspopup="dialog"
75
- onclick={stopPropagation(showMore)}
76
- onkeydown={keyEnter(showMore)}
77
- onpointerdown={stopPropagation()}
78
- {@attach contentFrom(moreLink)}
79
- ></a>
80
- {/if}
81
- </div>
65
+ <div class="{theme.dayFoot}">
66
+ {#if dayHiddenChunks}
67
+ <!-- svelte-ignore a11y_missing_attribute -->
68
+ <!-- svelte-ignore a11y_missing_content -->
69
+ <!-- svelte-ignore a11y_consider_explicit_label -->
70
+ <a
71
+ role="button"
72
+ tabindex="0"
73
+ aria-haspopup="dialog"
74
+ onclick={stopPropagation(showMore)}
75
+ onkeydown={keyEnter(showMore)}
76
+ onpointerdown={stopPropagation()}
77
+ {@attach contentFrom(moreLink)}
78
+ ></a>
79
+ {/if}
80
+ </div>
81
+ {/snippet}
82
82
  </BaseDay>
package/src/plugins/list/Day.svelte CHANGED
@@ -33,13 +33,15 @@
33
33
 
34
34
  {#if chunks.length}
35
35
  <BaseDay {date} allDay role="listitem" {disabled} {highlight}>
36
- <!-- svelte-ignore a11y_missing_content -->
37
- <h4 class="{theme.dayHead}">
38
- <time {datetime} {@attach contentFrom(intlListDay.format(date))}></time>
39
- <time class="{theme.daySide}" {datetime} {@attach contentFrom(intlListDaySide.format(date))}></time>
40
- </h4>
41
- {#each chunks as chunk (chunk.event)}
42
- <Event {chunk}/>
43
- {/each}
36
+ {#snippet content(dayContent)}
37
+ <!-- svelte-ignore a11y_missing_content -->
38
+ <h4 class="{theme.dayHead}">
39
+ <time {datetime} {@attach contentFrom(dayContent ?? intlListDay.format(date))}></time>
40
+ <time class="{theme.daySide}" {datetime} {@attach contentFrom(intlListDaySide.format(date))}></time>
41
+ </h4>
42
+ {#each chunks as chunk (chunk.event)}
43
+ <Event {chunk}/>
44
+ {/each}
45
+ {/snippet}
44
46
  </BaseDay>
45
47
  {/if}
package/src/plugins/time-grid/options.js CHANGED
@@ -1,4 +1,4 @@
1
- import {assign, createDuration} from '#lib';
1
+ import {assign, createDuration, undefinedOr} from '#lib';
2
2
 
3
3
  /**
4
4
  * TimeGrid + ResourceTimeGrid + ResourceTimeline
@@ -53,10 +53,10 @@ export function createTRRParsers(parsers) {
53
53
  assign(parsers, {
54
54
  scrollTime: createDuration,
55
55
  slotDuration: createDuration,
56
- slotLabelInterval: input => input !== undefined ? createDuration(input) : undefined,
56
+ slotLabelInterval: undefinedOr(createDuration),
57
57
  slotMaxTime: createDuration,
58
58
  slotMinTime: createDuration,
59
- snapDuration: input => input !== undefined ? createDuration(input) : undefined
59
+ snapDuration: undefinedOr(createDuration)
60
60
  });
61
61
  }
62
62
  }
package/src/storage/options.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import {untrack} from 'svelte';
2
2
  import {
3
3
  assign, createDate, createDateRange, createDuration, createEvents, createEventSources, createResources, hasOwn,
4
- isArray, isFunction, isPlainObject, keys, setMidnight
4
+ isArray, isFunction, isPlainObject, keys, setMidnight, undefinedOr
5
5
  } from '#lib';
6
6
  import {objectProxy} from './proxy.svelte.js';
7
7
 
@@ -13,7 +13,9 @@ function createOptions(plugins) {
13
13
  customButtons: {},
14
14
  customScrollbars: false, // ec option
15
15
  date: new Date(),
16
+ dateIncrement: undefined,
16
17
  datesSet: undefined,
18
+ dayCellContent: undefined,
17
19
  dayHeaderFormat: {
18
20
  weekday: 'short',
19
21
  month: 'numeric',
@@ -114,6 +116,7 @@ function createOptions(plugins) {
114
116
  function createParsers(plugins) {
115
117
  let parsers = {
116
118
  date: input => setMidnight(createDate(input)),
119
+ dateIncrement: undefinedOr(createDuration),
117
120
  duration: createDuration,
118
121
  events: createEvents,
119
122
  eventSources: createEventSources,