@event-calendar/core 5.0.0 → 5.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
@@ -32,6 +32,6 @@
     "#components": "./src/lib/components/index.js"
   },
   "dependencies": {
-    "svelte": "^5.45.8"
+    "svelte": "^5.46.0"
   }
 }

package/src/lib/components/BaseDay.svelte

@@ -12,6 +12,8 @@
         disabled = false,
         highlight = false,
         role = 'cell',
+        noIeb = false,
+        noBeb = false,
         children
     } = $props();
 
@@ -25,7 +27,9 @@
         $theme.weekdays?.[date.getUTCDay()],
         isToday && $theme.today,
         highlight && $theme.highlight,
-        disabled && $theme.disabled
+        disabled && $theme.disabled,
+        noIeb && $theme.noIeb,
+        noBeb && $theme.noBeb
     ]));
 
     // dateFromPoint

package/src/lib/utils.js

@@ -67,3 +67,7 @@ export function stopPropagation(fn, _this = undefined) {
         }
     };
 }
+
+export function isRtl() {
+    return window.getComputedStyle(document.documentElement).direction === 'rtl';
+}

package/src/plugins/day-grid/Day.svelte

@@ -5,7 +5,7 @@
     } from '#lib';
     import {BaseDay} from '#components';
 
-    let {day} = $props();
+    let {day, noIeb, noBeb} = $props();
 
     let {
         date, firstDay, moreLinkContent, theme, weekNumbers, weekNumberContent, _hiddenChunks, _intlDayCell, _popupDay
@@ -55,7 +55,7 @@
     }
 </script>
 
-<BaseDay date={dayStart} allDay {classes} {disabled} {highlight}>
+<BaseDay date={dayStart} allDay {classes} {disabled} {highlight} {noIeb} {noBeb}>
     <div class="{$theme.dayHead}">
         <time
             datetime="{toISOString(dayStart, 10)}"

package/src/plugins/day-grid/View.svelte

@@ -53,9 +53,9 @@
 
     <div class="{$theme.body}">
         <div bind:this={gridEl} class="{$theme.grid}">
-            {#each grid as days}
-                {#each days as day}
-                    <Day {day}/>
+            {#each grid as days, i}
+                {#each days as day, j}
+                    <Day {day} noIeb={j + 1 === days.length} noBeb={i + 1 === grid.length}/>
                 {/each}
             {/each}
         </div>

package/src/plugins/interaction/Action.svelte

@@ -27,7 +27,7 @@
     let resource, newResource;
     let fromX, fromY;
     let toX, toY;
-    let gridEl, scrollable;
+    let gridEl, allDaySlot;
     let delta;
     let allDay;
     let iClass;
@@ -180,7 +180,7 @@
         let dayEl = getElementWithPayload(toX, toY);
         ({allDay, date, resource} = getPayload(dayEl)(toX, toY));
 
-        scrollable = $_mainEl === ancestor(dayEl, 3);  // test for "all-day" slot
+        allDaySlot = $_mainEl !== ancestor(dayEl, 3);
         gridEl = ancestor(dayEl, 1);
         calcViewport();
 
@@ -285,19 +285,19 @@
             let thresholdX = 24;
             animate(() => {
                 if (viewport) {
-                    if (scrollable) {
+                    if (!allDaySlot) {
                         if (toY < viewport.top + thresholdY) {
                             $_mainEl.scrollTop += max(-8, (toY - viewport.top - thresholdY) / 3);
                         }
                         if (toY > viewport.bottom - thresholdY) {
                             $_mainEl.scrollTop += min(8, (toY - viewport.bottom + thresholdY) / 3);
                         }
-                        if (toX < viewport.left + thresholdX) {
-                            $_mainEl.scrollLeft += max(-8, (toX - viewport.left - thresholdX) / 3);
-                        }
-                        if (toX > viewport.right - thresholdX) {
-                            $_mainEl.scrollLeft += min(8, (toX - viewport.right + thresholdX) / 3);
-                        }
+                    }
+                    if (toX < viewport.left + thresholdX) {
+                        $_mainEl.scrollLeft += max(-8, (toX - viewport.left - thresholdX) / 3);
+                    }
+                    if (toX > viewport.right - thresholdX) {
+                        $_mainEl.scrollLeft += min(8, (toX - viewport.right + thresholdX) / 3);
                     }
                     if (toY < thresholdY) {
                         window.scrollBy(0, max(-8, (toY - thresholdY) / 3));
@@ -417,6 +417,13 @@
                     return findPayload(dayEl.previousElementSibling);
                 }
             } else {
+                if (selecting() && payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id)) {
+                    if (toX > fromX) {
+                        return findPayload(dayEl.previousElementSibling);
+                    } else {
+                        return findPayload(dayEl.nextElementSibling);
+                    }
+                }
                 return payload;
             }
         }
@@ -429,8 +436,8 @@
         viewport = {
             left: max(0, gridRect.left + $_mainEl.scrollLeft),
             right: min(document.documentElement.clientWidth, mainRect.left + $_mainEl.clientWidth) - 2,
-            top: max(0, gridRect.top + (scrollable ? $_mainEl.scrollTop : 0)),
-            bottom: min(document.documentElement.clientHeight, scrollable ? mainRect.top + $_mainEl.clientHeight : gridRect.bottom) - 2
+            top: max(0, gridRect.top + (!allDaySlot ? $_mainEl.scrollTop : 0)),
+            bottom: min(document.documentElement.clientHeight, !allDaySlot ? mainRect.top + $_mainEl.clientHeight : gridRect.bottom) - 2
         };
     }
 

package/src/plugins/resource-time-grid/View.svelte

@@ -4,6 +4,7 @@
     import {ColHead, DayHeader} from '#components';
     import Label from './Label.svelte';
     import View from '../time-grid/View.svelte';
+    import NowIndicator from '../time-grid/NowIndicator.svelte';
 
     let {_viewDates, _viewResources, _slotTimeLimits, datesAboveResources, highlightedDates, validRange, theme} = getContext('state');
 
@@ -14,14 +15,13 @@
     createGridFn={() => createGrid(
         $_viewDates, $_viewResources, $_slotTimeLimits, $datesAboveResources, $validRange, $highlightedDates
     )}
-    fullwidthNowIndicator={$datesAboveResources}
 >
     {#snippet header(grid)}
         {#each grid as days, i}
             {@const {dayStart: date, resource, disabled, highlight} = days[0]}
             <ColHead
                 {date}
-                className={$theme.colGroup}
+                className={grid[0].length > 1 ? $theme.colGroup : undefined}
                 weekday={$datesAboveResources}
                 colSpan={days.length}
                 colIndex={1 + i * days.length}
@@ -35,17 +35,33 @@
                 {/if}
             </ColHead>
         {/each}
-        {#each grid as days, i}
-            {#each days as day, j}
-                {@const {dayStart: date, resource, disabled, highlight} = day}
-                <ColHead {date} colIndex={1 + j + i * days.length} {disabled} {highlight}>
-                    {#if $datesAboveResources}
-                        <Label {resource} {date}/>
-                    {:else}
-                        <DayHeader {date} alPrefix={resourceLabels[i]}/>
-                    {/if}
-                </ColHead>
+        {#if grid[0].length > 1}
+            {#each grid as days, i}
+                {#each days as day, j}
+                    {@const {dayStart: date, resource, disabled, highlight} = day}
+                    <ColHead {date} colIndex={1 + j + i * days.length} {disabled} {highlight}>
+                        {#if $datesAboveResources}
+                            <Label {resource} {date}/>
+                        {:else}
+                            <DayHeader {date} alPrefix={resourceLabels[i]}/>
+                        {/if}
+                    </ColHead>
+                {/each}
             {/each}
-        {/each}
+        {/if}
+    {/snippet}
+
+    {#snippet nowIndicator(grid)}
+        {#if $datesAboveResources}
+            <NowIndicator days={grid.flat()} span={grid[0].length}/>
+        {:else}
+            {#if grid[0].length > 1}
+                {#each grid as days}
+                    <NowIndicator {days} />
+                {/each}
+            {:else}
+                <NowIndicator days={grid.flat()} span={grid.length}/>
+            {/if}
+        {/if}
     {/snippet}
 </View>

package/src/plugins/resource-time-grid/index.js

@@ -19,6 +19,7 @@ export default {
         options.views.resourceTimeGridDay = {
             buttonText: btnTextDay,
             component: View,
+            dayHeaderFormat: {weekday: 'long'},
             duration: {days: 1},
             theme: themeView('ec-resource ec-time-grid ec-day-view')
         };

package/src/plugins/resource-timeline/Day.svelte

@@ -3,7 +3,7 @@
     import {addDuration, cloneDate, floor, rect} from '#lib';
     import {BaseDay} from '#components';
 
-    let {day} = $props();
+    let {day, noIeb, noBeb} = $props();
 
     let {_monthView, slotDuration, slotWidth} = getContext('state');
 
@@ -18,4 +18,4 @@
     }
 </script>
 
-<BaseDay bind:el allDay={$_monthView} {date} {resource} {dateFromPoint} {disabled} {highlight}/>
+<BaseDay bind:el allDay={$_monthView} {date} {resource} {dateFromPoint} {disabled} {highlight} {noIeb} {noBeb}/>

package/src/plugins/resource-timeline/Event.svelte

@@ -9,7 +9,7 @@
     let {slotDuration, slotWidth, _monthView} = getContext('state');
 
     let el = $state();
-    let margin = $state(1);
+    let margin = $state(0);
     let event = $derived(chunk.event);
     // Style
     let styles = $derived(style => {
@@ -18,7 +18,7 @@
         if (!$_monthView) {
             let left = chunk.left / toSeconds($slotDuration) * $slotWidth;
             style['inset-inline-start'] = `${left}px`;
-            style['inline-size'] = `${chunk.width / toSeconds($slotDuration) * $slotWidth + chunk.dates.length - 1}px`;
+            style['inline-size'] = `${chunk.width / toSeconds($slotDuration) * $slotWidth}px`;
         }
         let marginTop = margin;
         if (event._margin) {

package/src/plugins/resource-timeline/NowIndicator.svelte

@@ -1,6 +1,6 @@
 <script>
     import {getContext} from 'svelte';
-    import {datesEqual, toSeconds, intersectionObserver} from '#lib';
+    import {datesEqual, toSeconds, intersectionObserver, isRtl} from '#lib';
 
     let {grid} = $props();
 
@@ -26,7 +26,7 @@
     // Observe intersections
     let observerOptions = $derived({
         root: $_mainEl,
-        rootMargin: `0px 0px 0px -${$_sidebarWidth + 1}px`,
+        rootMargin: isRtl() ? `0px -${$_sidebarWidth + 1}px 0px 0px` : `0px 0px 0px -${$_sidebarWidth + 1}px`,
         threshold: 0.0,
     });
     function onIntersect(el, entry) {

package/src/plugins/resource-timeline/View.svelte

@@ -30,7 +30,6 @@
             return;
         }
         let scrollLeft = 0;
-        let gaps = 0;
         let todayOutOfView = $_today < $_viewDates[0] || $_today > $_viewDates.at(-1);
         for (let date of $_viewDates) {
             let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, date);
@@ -42,10 +41,9 @@
                 break;
             } else {
                 scrollLeft += toSeconds(slotTimeLimits.max) - toSeconds(slotTimeLimits.min);
-                ++ gaps;
             }
         }
-        $_mainEl.scrollLeft = scrollLeft / toSeconds($slotDuration) * $slotWidth + gaps;
+        $_mainEl.scrollLeft = scrollLeft / toSeconds($slotDuration) * $slotWidth * (document.dir === 'rtl' ? -1 : 1);
     }
 
     // Events reposition
@@ -109,9 +107,9 @@
             {/each}
         </aside>
         <div class="{$theme.grid}" role="row">
-            {#each grid as days}
-                {#each days as day}
-                    <Day {day}/>
+            {#each grid as days, i}
+                {#each days as day, j}
+                    <Day {day} noIeb={j + 1 === days.length} noBeb={i + 1 === grid.length}/>
                 {/each}
             {/each}
         </div>

package/src/plugins/resource-timeline/lib.js

@@ -112,7 +112,7 @@ export function prepareChunks(chunks) {
 }
 
 export function repositionEvent(chunk, height, monthView) {
-    let top = 1;
+    let top = 0;
     let bottom = top + height;
     let dayChunks = chunk.day;
     dayChunks.sort((a, b) => (a.top ?? Number.POSITIVE_INFINITY) - (b.top ?? Number.POSITIVE_INFINITY));

package/src/plugins/time-grid/Day.svelte

@@ -3,7 +3,7 @@
     import {addDuration, cloneDate, floor, rect} from '#lib';
     import {BaseDay} from '#components';
 
-    let {day, allDay = false} = $props();
+    let {day, allDay = false, noIeb, noBeb} = $props();
 
     let {slotDuration, slotHeight} = getContext('state');
 
@@ -18,4 +18,4 @@
     }
 </script>
 
-<BaseDay bind:el {date} {allDay} {resource} {dateFromPoint} {disabled} {highlight}/>
+<BaseDay bind:el {date} {allDay} {resource} {dateFromPoint} {disabled} {highlight} {noIeb} {noBeb}/>

package/src/plugins/time-grid/NowIndicator.svelte

@@ -1,13 +1,13 @@
 <script>
     import {getContext} from 'svelte';
-    import {datesEqual, toSeconds, intersectionObserver} from '#lib';
+    import {datesEqual, toSeconds, intersectionObserver, isRtl} from '#lib';
 
-    let {days, fullwidth = false} = $props();
+    let {days, span = 1} = $props();
 
     let {_mainEl, _now, _today, _sidebarWidth, slotDuration, slotHeight, theme} = getContext('state');
 
     // Layout
-    let {gridColumn, start} = $derived.by(() => {
+    let {gridColumn, start, end} = $derived.by(() => {
         for (let day of days) {
             if (datesEqual(day.dayStart, $_today)) {
                 return day;
@@ -16,6 +16,9 @@
         return {};
     });
     let top = $derived.by(() => {
+        if ($_now < start || $_now > end) {
+            return null;
+        }
         let step = toSeconds($slotDuration);
         return ($_now - start) / 1000 / step * $slotHeight;
     });
@@ -23,7 +26,7 @@
     // Observe intersections
     let observerOptions = $derived({
         root: $_mainEl,
-        rootMargin: `0px 0px 0px -${$_sidebarWidth + 5.5}px`,
+        rootMargin: isRtl() ? `0px -${$_sidebarWidth + 5.5}px 0px 0px` : `0px 0px 0px -${$_sidebarWidth + 5.5}px`,
         threshold: 0.0,
     });
     function onIntersect(el, entry) {
@@ -31,10 +34,10 @@
     }
 </script>
 
-{#if gridColumn}
+{#if gridColumn && top !== null}
     <div {@attach intersectionObserver(onIntersect, observerOptions)}
         class="{$theme.nowIndicator}"
-        style:grid-column="{gridColumn + 1}{fullwidth ? ` / span ${days.length}` : ''}"
+        style:grid-column="{gridColumn + 1} / span {span}"
         style:inset-block-start="{top}px"
     ></div>
 {/if}

package/src/plugins/time-grid/View.svelte

@@ -8,11 +8,11 @@
     import AllDayEvent from './AllDayEvent.svelte';
     import NowIndicator from './NowIndicator.svelte';
 
-    let {header, createGridFn, fullwidthNowIndicator} = $props();
+    let {header, nowIndicator, createGridFn} = $props();
 
     let {_mainEl, _filteredEvents, _iEvents, _sidebarWidth, _slotLabelPeriodicity, _slotTimeLimits, _slots,
-        _viewDates, allDayContent, allDaySlot, columnWidth, highlightedDates, nowIndicator, scrollTime, slotHeight,
-        slotDuration, theme, validRange} = getContext('state');
+        _viewDates, allDayContent, allDaySlot, columnWidth, highlightedDates, nowIndicator: showNowIndicator,
+        scrollTime, slotHeight, slotDuration, theme, validRange} = getContext('state');
 
     let headerHeight = $state(0);
     let allDayText = $derived(createAllDayContent($allDayContent));
@@ -71,9 +71,9 @@
             <div class="{$theme.allDay}">
                 <aside class="{$theme.sidebar}" {@attach contentFrom(allDayText)}></aside>
                 <div class="{$theme.grid}" role="row">
-                    {#each grid as days}
-                        {#each days as day}
-                            <Day {day} allDay/>
+                    {#each grid as days, i}
+                        {#each days as day, j}
+                            <Day {day} allDay noIeb={i + 1 === grid.length && j + 1 === days.length}/>
                         {/each}
                     {/each}
                 </div>
@@ -108,9 +108,9 @@
             {/each}
         </aside>
         <div class="{$theme.grid}" role="row">
-            {#each grid as days}
-                {#each days as day}
-                    <Day {day}/>
+            {#each grid as days, i}
+                {#each days as day, j}
+                    <Day {day} noIeb={i + 1 === grid.length && j + 1 === days.length} noBeb/>
                 {/each}
             {/each}
         </div>
@@ -127,9 +127,11 @@
         </div>
     </div>
 
-    {#if $nowIndicator}
-        {#each grid as days}
-            <NowIndicator {days} fullwidth={fullwidthNowIndicator}/>
-        {/each}
+    {#if $showNowIndicator}
+        {#if nowIndicator}
+            {@render nowIndicator(grid)}
+        {:else}
+            <NowIndicator days={grid[0]}/>
+        {/if}
     {/if}
 </section>

package/src/storage/options.js

@@ -80,6 +80,8 @@ export function createOptions(plugins) {
             highlight: 'ec-highlight',
             icon: 'ec-icon',
             main: 'ec-main',
+            noBeb: 'ec-no-beb',  // no block end border
+            noIeb: 'ec-no-ieb',  // no inline end border
             today: 'ec-today',
             title: 'ec-title',
             toolbar: 'ec-toolbar',

package/src/storage/stores.js

@@ -193,10 +193,10 @@ export function filteredEvents(state){
 
             // Filter events
             if (isFunction($eventFilter)) {
+                let events = $_events.map(toEventWithLocalDates);
                 result = result
-                    .map(toEventWithLocalDates)
-                    .filter((event, index, events) => $eventFilter({
-                        event,
+                    .filter((event, index) => $eventFilter({
+                        event: toEventWithLocalDates(event),
                         index,
                         events,
                         view

package/src/styles/days.css

@@ -1,6 +1,9 @@
 .ec-day {
     --ec-day-bg-color: var(--ec-bg-color);
     background-color: var(--ec-day-bg-color);
+    border: 1px solid var(--ec-border-color);
+    border-block-start: none;
+    border-inline-start: none;
 
     &.ec-today {
         --ec-day-bg-color: var(--ec-today-bg-color);
@@ -12,10 +15,10 @@
 
     .ec-time-grid .ec-body & {
         background-image:
-                linear-gradient(var(--ec-day-bg-color) 1px, transparent 1px),
-                linear-gradient(var(--ec-border-color) 1px, transparent 1px),
+                linear-gradient(to top, var(--ec-day-bg-color) 1px, transparent 1px),
+                linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px),
                 linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px),
-                linear-gradient(var(--ec-border-color) 1px, transparent 1px);
+                linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);
         background-size:
                 100% 100%,
                 100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)),
@@ -24,16 +27,26 @@
     }
 
     .ec-timeline:not(.ec-month-view) .ec-body & {
+        --ec-last-line-color: transparent;
+        --ec-direction: to left;
+        [dir="rtl"] & {
+            --ec-direction: to right;
+        }
         background-image:
-                linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px),
-                linear-gradient(to right, var(--ec-border-color) 1px, transparent 1px),
+                linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px),
+                linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px),
                 linear-gradient(var(--ec-day-bg-color) 1px, transparent 1px),
-                linear-gradient(to right, var(--ec-border-color) 1px, transparent 1px);
+                linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);
         background-size:
                 100% 100%,
                 calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%,
                 100% 2px,
                 var(--ec-slot-width) 100%;
+        border-inline: none;
+
+        &.ec-no-ieb {
+            --ec-last-line-color: var(--ec-day-bg-color);
+        }
     }
 
     .ec-day-grid & {
@@ -46,6 +59,22 @@
     .ec-day-grid .ec-uniform & {
         min-block-size: auto;
     }
+
+    .ec-list & {
+        border-inline: none;
+
+        &:last-child {
+            border: none;
+        }
+    }
+
+    &.ec-no-ieb {
+        border-inline-end: none;
+    }
+
+    &.ec-no-beb {
+        border-block-end: none;
+    }
 }
 
 .ec-day-head {

package/src/styles/index.css

@@ -14,8 +14,6 @@
 
 .ec-main {
     display: grid;
-    gap: 1px;
-    background-color: var(--ec-border-color);
     border: 1px solid var(--ec-border-color);
     overflow: auto;
     /*scrollbar-width: thin;*/
@@ -56,20 +54,15 @@
     grid-area: 1 / 1 / 2 / -1;
     display: grid;
     grid-template-columns: subgrid;
-    gap: 1px;
-    background-color: var(--ec-border-color);
     position: sticky;
     inset-block-start: 0;
     z-index: 2;
-    border-block-end: 1px solid var(--ec-border-color);
-    margin-block-end: -1px;
 }
 
 .ec-grid {
     grid-area: 1 / 1 / -1 / -1;
     display: grid;
     grid-template-columns: subgrid;
-    gap: 1px;
 
     .ec-body & {
         grid-template-rows: subgrid;
@@ -97,6 +90,9 @@
     text-align: center;
     padding: .375rem .18em;
     background-color: var(--ec-bg-color);
+    border: 1px solid var(--ec-border-color);
+    border-block-start: none;
+    border-inline-start: none;
     overflow: clip;
     text-overflow: ellipsis;
 
@@ -109,6 +105,11 @@
     }
 }
 
+.ec-col-group:nth-last-child(1 of .ec-col-group),
+.ec-col-head:nth-last-child(1 of .ec-col-head) {
+    border-inline-end: none;
+}
+
 .ec-col-group > *,
 .ec-timeline .ec-col-head > * {
     position: sticky;

package/src/styles/now-indicator.css

@@ -27,7 +27,8 @@
         display: block;
         block-size: 12px;
         inline-size: 12px;
-        margin: -7px 0 0 -7px;
+        margin-block-start: -7px;
+        margin-inline-start: -7px;
         position: sticky;
         inset-inline-start: calc(var(--ec-sidebar-width) - 6.5px);
         z-index: 1;