@event-calendar/core 4.7.1 → 5.0.1

package/src/plugins/time-grid/stores.js

@@ -1,16 +1,49 @@
-import {derived} from 'svelte/store';
-import {createDate, createSlotTimeLimits, createTimes, setMidnight} from '#lib';
+import {derived, writable} from 'svelte/store';
+import {ceil, createDate, createSlotTimeLimits, createSlots, intl, setMidnight, toSeconds} from '#lib';
 
-export function times(state) {
+function slotTimeLimits(state) {
     return derived(
-        [state.slotDuration, state.slotLabelInterval, state._slotTimeLimits, state._intlSlotLabel],
-        args => createTimes(setMidnight(createDate()), ...args)
+        [state.slotMinTime, state.slotMaxTime, state.flexibleSlotTimeLimits, state._viewDates, state._filteredEvents],
+        args => createSlotTimeLimits(...args)
     );
 }
 
-export function slotTimeLimits(state) {
+function slotLabelPeriodicity(state) {
     return derived(
-        [state.slotMinTime, state.slotMaxTime, state.flexibleSlotTimeLimits, state._viewDates, state._filteredEvents],
-        args => createSlotTimeLimits(...args)
+        [state.slotDuration, state.slotLabelInterval],
+        ([$slotDuration, $slotLabelInterval]) => {
+            if ($slotLabelInterval === undefined) {
+                return toSeconds($slotDuration) < 3600 ? 2 : 1;
+            }
+            return ceil(toSeconds($slotLabelInterval) / toSeconds($slotDuration)) || 1;
+        }
+    );
+}
+
+function slots(state) {
+    return derived(
+        [state.slotDuration, state._slotLabelPeriodicity, state._slotTimeLimits, state._intlSlotLabel],
+        args => createSlots(setMidnight(createDate()), ...args)
     );
 }
+
+/**
+ * TimeGrid + ResourceTimeGrid + ResourceTimeline
+ */
+export function createTRRStores(state) {
+    if (!('_sidebarWidth' in state)) {
+        state._intlSlotLabel = intl(state.locale, state.slotLabelFormat);
+        state._slotLabelPeriodicity = slotLabelPeriodicity(state);
+        state._sidebarWidth = writable(0);
+    }
+}
+
+/**
+ * TimeGrid + ResourceTimeGrid
+ */
+export function createTRStores(state) {
+    if (!('_slots' in state)) {
+        state._slotTimeLimits = slotTimeLimits(state);  // flexible limits
+        state._slots = slots(state);
+    }
+}

package/src/storage/options.js

@@ -7,8 +7,6 @@ export const specialOptions = ['buttonText', 'customButtons', 'theme'];
 
 export function createOptions(plugins) {
     let options = {
-        allDayContent: undefined,
-        allDaySlot: true,
         buttonText: {
             today: 'today',
         },
@@ -44,9 +42,7 @@ export function createOptions(plugins) {
             minute: '2-digit'
         },
         filterEventsWithResources: false,
-        filterResourcesWithEvents: false,
         firstDay: 0,
-        flexibleSlotTimeLimits: false,  // ec option
         headerToolbar: {
             start: 'title',
             center: '',
@@ -58,23 +54,8 @@ export function createOptions(plugins) {
         lazyFetching: true,
         loading: undefined,
         locale: undefined,
-        nowIndicator: false,
-        resourceLabelContent: undefined,
-        resourceLabelDidMount: undefined,
         resources: [],
         selectable: false,
-        scrollTime: '06:00:00',
-        slotDuration: '00:30:00',
-        slotEventOverlap: true,
-        slotHeight: 24,  // ec option
-        slotLabelInterval: undefined,
-        slotLabelFormat: {
-            hour: 'numeric',
-            minute: '2-digit'
-        },
-        slotMaxTime: '24:00:00',
-        slotMinTime: '00:00:00',
-        slotWidth: 72,
         theme: {
             allDay: 'ec-all-day',
             active: 'ec-active',
@@ -84,37 +65,26 @@ export function createOptions(plugins) {
             button: 'ec-button',
             buttonGroup: 'ec-button-group',
             calendar: 'ec',
-            content: 'ec-content',
+            colHead: 'ec-col-head',
             day: 'ec-day',
             dayHead: 'ec-day-head',
-            days: 'ec-days',
             disabled: 'ec-disabled',
             event: 'ec-event',
             eventBody: 'ec-event-body',
             eventTime: 'ec-event-time',
             eventTitle: 'ec-event-title',
             events: 'ec-events',
-            extra: 'ec-extra',
-            handle: 'ec-handle',
+            grid: 'ec-grid',
             header: 'ec-header',
-            hiddenScroll: 'ec-hidden-scroll',
+            hidden: 'ec-hidden',
             highlight: 'ec-highlight',
             icon: 'ec-icon',
-            line: 'ec-line',
-            lines: 'ec-lines',
-            minor: 'ec-minor',
-            nowIndicator: 'ec-now-indicator',
-            otherMonth: 'ec-other-month',
-            resource: 'ec-resource',
-            sidebar: 'ec-sidebar',
-            sidebarTitle: 'ec-sidebar-title',
+            main: 'ec-main',
             today: 'ec-today',
-            time: 'ec-time',
             title: 'ec-title',
             toolbar: 'ec-toolbar',
             view: '',
             weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'],
-            withScroll: 'ec-with-scroll'
         },
         titleFormat: {
             year: 'numeric',
@@ -143,11 +113,6 @@ export function createParsers(plugins) {
         hiddenDays: days => [...new Set(days)],
         highlightedDates: dates => dates.map(date => setMidnight(createDate(date))),
         resources: createResources,
-        scrollTime: createDuration,
-        slotDuration: createDuration,
-        slotLabelInterval: input => input !== undefined ? createDuration(input) : undefined,
-        slotMaxTime: createDuration,
-        slotMinTime: createDuration,
         validRange: createDateRange
     };
 

package/src/storage/state.js

@@ -30,16 +30,13 @@ export default class {
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
         this._events = events(this);
+        this._mainEl = writable(undefined);
         this._now = now();
         this._today = today(this);
         this._intlEventTime = intlRange(this.locale, this.eventTimeFormat);
-        this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
         this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
         this._intlDayHeaderAL = intl(this.locale, this.dayHeaderAriaLabelFormat);
         this._intlTitle = intlRange(this.locale, this.titleFormat);
-        this._bodyEl = writable(undefined);
-        this._scrollable = writable(false);
-        this._recheckScrollable = writable(false);
         this._viewTitle = viewTitle(this);
         this._viewDates = viewDates(this);
         this._view = view2(this);

package/src/storage/stores.js

@@ -1,7 +1,8 @@
 import {derived, get, readable, writable} from 'svelte/store';
 import {
-    addDay, addDuration, assign, cloneDate, createDate, createEvents, createView, DAY_IN_SECONDS, debounce,
-    isFunction, nextClosestDay, prevClosestDay, setMidnight, subtractDay, toISOString, toLocalDate
+    addDay, addDuration, assign, cloneDate, createDate, createEvents, createView, datesEqual, DAY_IN_SECONDS, debounce,
+    isFunction, nextClosestDay, prevClosestDay, setMidnight, subtractDay, toEventWithLocalDates, toISOString,
+    toLocalDate
 } from '#lib';
 
 export function dayGrid(state) {
@@ -184,19 +185,40 @@ export function filteredEvents(state){
     state._view.subscribe($_view => view = $_view);
     let debounceHandle = {};
     return derived(
-        [state._events, state.eventFilter],
+        [state._events, state.eventFilter, state.eventOrder, state.filterEventsWithResources, state.resources],
         (values, set) => debounce(() => {
-            let [$_events, $eventFilter] = values;
-            set(
-                isFunction($eventFilter)
-                    ? $_events.filter((event, index, events) => $eventFilter({
-                        event,
+            let [$_events, $eventFilter, $eventOrder, $filterEventsWithResources, $resources] = values;
+
+            let result = [...$_events];
+
+            // Filter events
+            if (isFunction($eventFilter)) {
+                let events = $_events.map(toEventWithLocalDates);
+                result = result
+                    .filter((event, index) => $eventFilter({
+                        event: toEventWithLocalDates(event),
                         index,
                         events,
                         view
-                    }))
-                    : $_events
-            );
+                    }));
+            }
+            if ($filterEventsWithResources) {
+                result = result.filter(event => $resources.some(resource => event.resourceIds.includes(resource.id)));
+            }
+
+            // Sort events
+            if (isFunction($eventOrder)) {
+                result.sort((a, b) => $eventOrder(
+                    toEventWithLocalDates(a),
+                    toEventWithLocalDates(b)
+                ));
+            } else {
+                // Sort by start date (all-day events always on top)
+                result.sort((a, b) => a.start - b.start || b.allDay - a.allDay);
+            }
+
+            set(result);
+
         }, debounceHandle, state._queue),
         []
     );
@@ -213,5 +235,14 @@ export function now() {
 }
 
 export function today(state) {
-    return derived(state._now, $_now => setMidnight(cloneDate($_now)));
+    let $today = createDate();
+    let today = writable($today);
+    derived(state._now, $_now => setMidnight(cloneDate($_now))).subscribe(newToday => {
+        if (!datesEqual($today, newToday)) {
+            $today = newToday;
+            today.set(newToday);
+        }
+    });
+
+    return today;
 }

package/src/styles/days.css

@@ -0,0 +1,91 @@
+.ec-day {
+    --ec-day-bg-color: var(--ec-bg-color);
+    background-color: var(--ec-day-bg-color);
+
+    &.ec-today {
+        --ec-day-bg-color: var(--ec-today-bg-color);
+    }
+
+    &.ec-highlight {
+        --ec-day-bg-color: var(--ec-highlight-color);
+    }
+
+    .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 right, var(--ec-day-bg-color) 1px, transparent 1px),
+                linear-gradient(var(--ec-border-color) 1px, transparent 1px);
+        background-size:
+                100% 100%,
+                100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)),
+                2px 100%,
+                100% var(--ec-slot-height);
+    }
+
+    .ec-timeline:not(.ec-month-view) .ec-body & {
+        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-day-bg-color) 1px, transparent 1px),
+                linear-gradient(to right, 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%;
+    }
+
+    .ec-day-grid & {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        min-block-size: 5em;
+    }
+
+    .ec-day-grid .ec-uniform & {
+        min-block-size: auto;
+    }
+}
+
+.ec-day-head {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    padding: .375rem;
+
+    .ec-day.ec-other-month & time {
+        opacity: .3;
+    }
+
+    .ec-list & {
+        background-color: var(--ec-day-bg-color);
+        border-block-end: 1px solid var(--ec-border-color);
+        flex-direction: unset;
+        margin: 0 0 -1px;
+        padding: .5em 1.5em;
+        position: sticky;
+        inset-block-start: 0;
+        z-index: 2;
+    }
+}
+
+.ec-day-foot {
+    padding: .18rem;
+    font-size: .85em;
+
+    a {
+        cursor: pointer;
+    }
+}
+
+.ec-disabled {
+    position: relative;
+    &:after {
+        content: '';
+        position: absolute;
+        inset: 0 0 0 0;
+        background-color: var(--ec-bg-event-color);
+        opacity: var(--ec-bg-event-opacity);
+    }
+}

package/src/styles/events.css

@@ -0,0 +1,180 @@
+.ec-events {
+    grid-area: 1 / 2 / -1 / -1;
+    display: grid;
+    grid-template: subgrid / subgrid;
+    isolation: isolate;
+    pointer-events: none;
+
+    .ec-day-grid & {
+        grid-column-start: 1;
+    }
+}
+
+.ec-event {
+    display: flex;
+    position: relative;
+    padding: 2px;
+    color: var(--ec-event-text-color);
+    box-sizing: border-box;
+    box-shadow: 0 0 1px 0 var(--ec-border-color);
+    background-color: var(--ec-event-bg-color);
+    border-radius: 3px;
+    font-size: .85em;
+    line-height: 1.5;
+    z-index: 1;
+    pointer-events: all;
+    inline-size: calc(100% - var(--ec-event-col-gap));
+
+    .ec-time-grid & {
+        grid-row: 1;
+    }
+
+    .ec-day-grid &,
+    .ec-all-day &,
+    .ec-timeline & {
+        block-size: fit-content;
+        margin-block-end: var(--ec-event-col-gap);
+    }
+
+    .ec-list & {
+        flex-direction: row;
+        padding: .5em 1.5em;
+        color: inherit;
+        background-color: var(--ec-day-bg-color);
+        border-radius: 0;
+    }
+
+    &.ec-preview {
+        z-index: 1000;
+        user-select: none;
+        opacity: .8;
+    }
+
+    &.ec-pointer {
+        color: inherit;
+        pointer-events: none;
+        user-select: none;
+        z-index: 0;
+        box-shadow: none;
+    }
+}
+
+.ec-bg-event {
+    grid-row: 1;
+    position: relative;
+    background-color: var(--ec-bg-event-color);
+    opacity: var(--ec-bg-event-opacity);
+}
+
+.ec-draggable {
+    cursor: pointer;
+    user-select: none;
+}
+
+.ec-ghost {
+    opacity: .5;
+    user-select: none;
+    pointer-events: none;
+}
+
+.ec-event-body {
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+
+    .ec-day-grid &,
+    .ec-all-day &,
+    .ec-timeline & {
+        flex-direction: row;
+    }
+}
+
+.ec-event-tag {
+    inline-size: 4px;
+    border-radius: 2px;
+    margin-inline-end: 8px;
+}
+
+.ec-event-time {
+    overflow: hidden;
+    white-space: nowrap;
+    margin: 0 0 1px 0;
+    flex-shrink: 0;
+    max-block-size: 100%;
+
+    .ec-day-grid &,
+    .ec-timeline & {
+        margin: 0 3px 0 0;
+        max-inline-size: 100%;
+        text-overflow: ellipsis;
+    }
+}
+
+.ec-event-title {
+    overflow: hidden;
+    margin: 0;
+    font-weight: inherit;
+
+    .ec-time-grid & {
+        position: sticky;
+        inset-block-start: var(--ec-header-height);
+    }
+
+    .ec-day-grid &,
+    .ec-all-day &,
+    .ec-timeline & {
+        min-block-size: 1.5em;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        position: sticky;
+        inset-inline-start: calc(var(--ec-sidebar-width) + .18em);
+    }
+
+    .ec-list & {
+        font-size: 1rem;
+    }
+}
+
+.ec-resizer {
+    position: absolute;
+    user-select: none;
+
+    .ec-time-grid .ec-body & {
+        inset: auto 0 0 0;
+        block-size: 50%;
+        max-block-size: 8px;
+        cursor: ns-resize;
+
+        &.ec-start {
+            inset: 0 0 auto 0;
+        }
+    }
+    .ec-day-grid &,
+    .ec-all-day &,
+    .ec-timeline & {
+        inset: 0 0 0 auto;
+        inline-size: 50%;
+        max-inline-size: 8px;
+        cursor: ew-resize;
+
+        &.ec-start {
+            inset: 0 auto 0 0;
+        }
+    }
+}
+
+.ec-dragging, .ec-dragging * {
+    cursor: pointer!important;
+}
+.ec-resizing-y, .ec-resizing-y * {
+    cursor: ns-resize!important;
+}
+.ec-resizing-x, .ec-resizing-x * {
+    cursor: ew-resize!important;
+}
+
+.ec-no-events {
+    text-align: center;
+    padding: 5em 0;
+    background-color: var(--ec-bg-color);
+}

package/src/styles/index.css

@@ -0,0 +1,126 @@
+@import "theme.css";
+@import "days.css";
+@import "toolbar.css";
+@import "sidebar.css";
+@import "slots.css";
+@import "events.css";
+@import "now-indicator.css";
+@import "popup.css";
+
+.ec {
+    display: flex;
+    flex-direction: column;
+}
+
+.ec-main {
+    display: grid;
+    gap: 1px;
+    background-color: var(--ec-border-color);
+    border: 1px solid var(--ec-border-color);
+    overflow: auto;
+    /*scrollbar-width: thin;*/
+
+    .ec-time-grid & {
+        grid-template-columns: max-content repeat(var(--ec-grid-cols), var(--ec-col-width));
+        grid-template-rows: repeat(2, max-content);
+    }
+
+    .ec-day-grid & {
+        --ec-row-height: auto;
+        grid-template-columns: repeat(var(--ec-grid-cols), minmax(0, 1fr));
+        grid-template-rows: max-content repeat(var(--ec-grid-rows), var(--ec-row-height));
+
+        &.ec-uniform {
+            --ec-row-height: minmax(0, 1fr);
+            overflow: hidden;
+            flex-grow: 1;
+        }
+    }
+
+    .ec-timeline & {
+        grid-template-columns: max-content repeat(var(--ec-grid-cols), min-content);
+        grid-template-rows: max-content repeat(calc(var(--ec-grid-rows) - 1), auto) minmax(auto, 1fr);
+        flex-grow: 1;
+    }
+
+    .ec-timeline.ec-month-view & {
+        grid-template-columns: max-content repeat(var(--ec-grid-cols), var(--ec-col-width));
+    }
+
+    .ec-list & {
+
+    }
+}
+
+.ec-header {
+    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;
+    }
+
+    .ec-time-grid &,
+    .ec-timeline & {
+        grid-column-start: 2;
+    }
+}
+
+.ec-all-day {
+    grid-area: 2 / 1 / auto / -1;
+    display: grid;
+    grid-template-columns: subgrid;
+    min-block-size: var(--ec-slot-height);
+}
+
+.ec-col-group {
+    grid-column: span  var(--ec-col-group-span);
+}
+
+.ec-col-group,
+.ec-col-head {
+    text-align: center;
+    padding: .375rem .18em;
+    background-color: var(--ec-bg-color);
+    overflow: clip;
+    text-overflow: ellipsis;
+
+    &.ec-today {
+        background-color: var(--ec-today-bg-color);
+    }
+
+    &.ec-highlight {
+        background-color: var(--ec-highlight-color);
+    }
+}
+
+.ec-col-group > *,
+.ec-timeline .ec-col-head > * {
+    position: sticky;
+    inset-inline-start: calc(var(--ec-sidebar-width) + .18em);
+}
+
+.ec-body {
+    grid-area: 2 / 1 / -1 / -1;
+    display: grid;
+    grid-template: subgrid / subgrid;
+}
+
+.ec-hidden {
+    visibility: hidden;
+}

package/src/styles/now-indicator.css

@@ -0,0 +1,35 @@
+.ec-now-indicator {
+    grid-row: 2;
+    position: relative;
+    pointer-events: none;
+    will-change: inset;
+
+    .ec-time-grid & {
+        inline-size: 100%;
+        block-size: 0;
+        border-block-start: var(--ec-now-indicator-color) solid 2px;
+    }
+
+    .ec-timeline & {
+        inline-size: 0;
+        border-inline-start: var(--ec-now-indicator-color) solid 2px;
+
+        &:before {
+            inset-block-start: calc(var(--ec-header-height) - 6.5px);
+            z-index: 2;
+        }
+    }
+
+    &:before {
+        background: var(--ec-now-indicator-color);
+        border-radius: 50%;
+        content: "";
+        display: block;
+        block-size: 12px;
+        inline-size: 12px;
+        margin: -7px 0 0 -7px;
+        position: sticky;
+        inset-inline-start: calc(var(--ec-sidebar-width) - 6.5px);
+        z-index: 1;
+    }
+}