@event-calendar/core 5.4.2 → 5.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.4.2",
+  "version": "5.5.1",
   "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.53.10"
+    "svelte": "^5.54.0"
   }
 }

package/src/lib/components/ColHead.svelte

@@ -11,6 +11,7 @@
         ariaHidden = false,
         disabled = false,
         highlight = false,
+        cssSpan = false,
         children
     } = $props();
 
@@ -25,6 +26,7 @@
         highlight && theme.highlight,
         disabled && theme.disabled
     ]}
+    style:--ec-col-group-span={cssSpan ? colSpan : undefined}
     role="{ariaHidden ? null : 'columnheader'}"
     aria-colspan="{ariaHidden || colSpan <= 1 ? null : colSpan}"
     aria-colindex="{ariaHidden ? null : colIndex}"

package/src/lib/date.js

@@ -1,4 +1,4 @@
-import {isDate} from './utils.js';
+import {isDate, isFunction} from './utils.js';
 
 export const DAY_IN_SECONDS = 86400;
 
@@ -182,6 +182,16 @@ export function getWeekNumber(date, firstDay) {
     return Math.ceil((((date - yearStart) / 1000 / DAY_IN_SECONDS) + 1) / 7);
 }
 
+export function createWeekNumberContent(week, weekNumberContent, date) {
+    if (weekNumberContent) {
+        return isFunction(weekNumberContent)
+            ? weekNumberContent({date: toLocalDate(date), week})
+            : weekNumberContent;
+    }
+
+    return 'W' + String(week).padStart(2, '0');
+}
+
 /**
  * Private functions
  */

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

@@ -1,7 +1,7 @@
 <script>
     import {getContext} from 'svelte';
     import {
-        contentFrom, getWeekNumber, isFunction, keyEnter, toISOString, toLocalDate, stopPropagation
+        contentFrom, getWeekNumber, isFunction, keyEnter, toISOString, stopPropagation, createWeekNumberContent
     } from '#lib';
     import {BaseDay} from '#components';
 
@@ -19,20 +19,10 @@
 
     // Week numbers
     let showWeekNumber = $derived(weekNumbers && dayStart.getUTCDay() === (firstDay ? 1 : 0));
-    let weekNumber = $derived.by(() => {
-        let weekNumber;
-        if (showWeekNumber) {
-            let week = getWeekNumber(dayStart, firstDay);
-            if (weekNumberContent) {
-                weekNumber = isFunction(weekNumberContent)
-                    ? weekNumberContent({date: toLocalDate(dayStart), week})
-                    : weekNumberContent;
-            } else {
-                weekNumber = 'W' + String(week).padStart(2, '0');
-            }
-        }
-        return weekNumber;
-    });
+    let weekNumber = $derived(showWeekNumber
+        ? createWeekNumberContent(getWeekNumber(dayStart, firstDay), weekNumberContent, dayStart)
+        : undefined
+    );
 
     // More link
     let dayHiddenChunks = $derived(hiddenChunks.get(dayStart.getTime()));

package/src/plugins/day-grid/index.js

@@ -23,8 +23,7 @@ export default {
             uniform: 'ec-uniform',
             dayFoot: 'ec-day-foot',
             otherMonth: 'ec-other-month',
-            popup: 'ec-popup',
-            weekNumber: 'ec-week-number'
+            popup: 'ec-popup'
         });
         assign(options.views, {
             dayGridDay: {

package/src/plugins/list/index.js

@@ -12,10 +12,10 @@ export default {
             view: 'listWeek'
         });
         assign(options.buttonText, {
-            listDay: 'list',
-            listWeek: 'list',
-            listMonth: 'list',
-            listYear: 'list'
+            listDay: 'day',
+            listWeek: 'week',
+            listMonth: 'month',
+            listYear: 'year'
         });
         assign(options.theme, {
             daySide: 'ec-day-side',
@@ -27,7 +27,8 @@ export default {
                 buttonText: btnTextDay,
                 component: initViewComponent,
                 duration: {days: 1},
-                theme: themeView('ec-list ec-day-view')
+                theme: themeView('ec-list ec-day-view'),
+                titleFormat: {year: 'numeric', month: 'long', day: 'numeric'}
             },
             listWeek: {
                 buttonText: btnTextWeek,
@@ -39,13 +40,15 @@ export default {
                 buttonText: btnTextMonth,
                 component: initViewComponent,
                 duration: {months: 1},
-                theme: themeView('ec-list ec-month-view')
+                theme: themeView('ec-list ec-month-view'),
+                titleFormat: {year: 'numeric', month: 'long'}
             },
             listYear: {
                 buttonText: btnTextYear,
                 component: initViewComponent,
                 duration: {years: 1},
-                theme: themeView('ec-list ec-year-view')
+                theme: themeView('ec-list ec-year-view'),
+                titleFormat: {year: 'numeric'}
             }
         });
     }

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

@@ -15,8 +15,8 @@ export default {
             view: 'resourceTimeGridWeek'
         });
         assign(options.buttonText, {
-            resourceTimeGridDay: 'resources',
-            resourceTimeGridWeek: 'resources'
+            resourceTimeGridDay: 'day',
+            resourceTimeGridWeek: 'week'
         });
         assign(options.theme, {
             colGroup: 'ec-col-group'

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

@@ -1,7 +1,8 @@
 <script>
     import {getContext, setContext, tick} from 'svelte';
     import {
-        max, resizeObserver, runReposition, contentFrom, toSeconds, datesEqual, min, isRtl, empty, length
+        max, resizeObserver, runReposition, contentFrom, toSeconds, datesEqual, min, isRtl, empty, length, toISOString,
+        createWeekNumberContent
     } from '#lib';
     import {getSlotTimeLimits} from './lib.js';
     import ViewState from './state.svelte.js';
@@ -16,9 +17,11 @@
     let viewState = new ViewState(mainState);
     setContext('view-state', viewState);
 
-    let {mainEl, today, viewDates, options: {columnWidth, nowIndicator, scrollTime, slotDuration, slotHeight, slotWidth, theme}} = $derived(mainState);
-    let {chunks, bgChunks, iChunks, daySlots, dayTimeLimits, grid, monthView, nestedResources, sidebarWidth,
-        slotLabelPeriodicity, viewResources} = $derived(viewState);
+    let {mainEl, today, viewDates, options: {
+        columnWidth, nowIndicator, scrollTime, slotDuration, slotHeight, slotWidth, theme, weekNumberContent
+    }} = $derived(mainState);
+    let {chunks, bgChunks, iChunks, daySlots, dayTimeLimits, grid, extraHeads, intlMonthHeader, monthView,
+        nestedResources, sidebarWidth, slotLabelPeriodicity, viewResources} = $derived(viewState);
 
     let headerHeight = $state(0);
 
@@ -84,6 +87,26 @@
         <header bind:offsetHeight={headerHeight} class="{theme.header}">
             <aside class="{theme.sidebar}" bind:offsetWidth={viewState.sidebarWidth}></aside>
             <div class="{theme.grid}" role="row">
+                {#if length(extraHeads.months) > 1}
+                    {#each extraHeads.months as {date, gridColumn, span}}
+                        <ColHead className={theme.colGroup} colIndex={gridColumn} colSpan={span} cssSpan weekday={false}>
+                            <time
+                                datetime="{toISOString(date, 10)}"
+                                {@attach contentFrom(intlMonthHeader.format(date))}
+                            ></time>
+                        </ColHead>
+                    {/each}
+                {/if}
+                {#if length(extraHeads.weeks) > 1}
+                    {#each extraHeads.weeks as {number, date, gridColumn, span}}
+                        <ColHead className={theme.colGroup} colIndex={gridColumn} colSpan={span} cssSpan weekday={false}>
+                            <span
+                                class="{theme.weekNumber}"
+                                {@attach contentFrom(createWeekNumberContent(number, weekNumberContent, date))}
+                            ></span>
+                        </ColHead>
+                    {/each}
+                {/if}
                 {#each grid[0] as {dayStart: date, disabled, highlight}, i}
                     <ColHead {date} colIndex={1 + i} {disabled} {highlight}>
                         <DayHeader {date}/>

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

@@ -1,7 +1,7 @@
 import {untrack} from 'svelte';
 import {
-    addDay, addDuration, bgEvent, cloneDate, createSlots, createSlotTimeLimits, datesEqual, getPayload, outsideRange,
-    toSeconds
+    addDay, addDuration, bgEvent, cloneDate, createSlots, createSlotTimeLimits, datesEqual, empty, getPayload,
+    getWeekNumber, outsideRange, toSeconds
 } from '#lib';
 import {createChunks, prepareChunks} from './lib.js';
 
@@ -42,6 +42,45 @@ export function grid(mainState, viewState) {
     };
 }
 
+export function extraHeads(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {features, options: {firstDay, weekNumbers}} = mainState;
+        let {grid} = viewState;
+
+        let months = [];
+        let weeks = [];
+
+        untrack(() => {
+            let month;
+            let week;
+            if (!empty(grid)) {
+                for (let {dayStart, gridColumn} of grid[0]) {
+                    if (features.includes('month')) {
+                        if (month && month.date.getUTCMonth() === dayStart.getUTCMonth()) {
+                            ++month.span;
+                        } else {
+                            month = {date: dayStart, gridColumn, span: 1};
+                            months.push(month);
+                        }
+                    }
+                    if (weekNumbers) {
+                        let number = getWeekNumber(dayStart, firstDay);
+                        if (week && week.number === number) {
+                            ++week.span;
+                        } else {
+                            week = {number, date: dayStart, gridColumn, span: 1};
+                            weeks.push(week);
+                        }
+                    }
+                }
+            }
+        });
+
+        return {months, weeks};
+    };
+}
+
 export function eventChunks(mainState, viewState) {
     return () => {
         // Dependencies

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

@@ -1,4 +1,4 @@
-import {assign, btnTextDay, btnTextMonth, btnTextWeek, getPayload, themeView} from '#lib';
+import {assign, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, getPayload, themeView} from '#lib';
 import {setExtensions} from '../time-grid/lib.js';
 import {createTRROptions, createTRRParsers} from '../time-grid/options.js';
 import {createRROptions} from '../resource-time-grid/options.js';
@@ -9,17 +9,21 @@ export default {
         createTRROptions(options);
         createRROptions(options);
 		assign(options, {
-			resourceExpand: undefined,
-			slotWidth: 32,
+			monthHeaderFormat: {  // ec option
+				month: 'long'
+			},
+			resourceExpand: undefined,  // ec option
+			slotWidth: 32,  // ec option
 			// Common options
 			view: 'resourceTimelineWeek'
 		});
 		assign(options.buttonText, {
 			expand: 'Expand',
 			collapse: 'Collapse',
-			resourceTimelineDay:  'timeline',
-			resourceTimelineWeek: 'timeline',
-			resourceTimelineMonth: 'timeline'
+			resourceTimelineDay:  'day',
+			resourceTimelineWeek: 'week',
+			resourceTimelineMonth: 'month',
+			resourceTimelineYear: 'year'
 		});
 		assign(options.icons, {
 			collapse: {html: '−'},
@@ -59,6 +63,19 @@ export default {
 				slotDuration: {days: 1},
 				theme: themeView('ec-resource ec-timeline ec-month-view'),
 				titleFormat: {year: 'numeric', month: 'long'}
+			},
+			resourceTimelineYear: {
+				buttonText: btnTextYear,
+				component: initMonthViewComponent,
+				displayEventEnd: false,
+				dayHeaderFormat: {
+					weekday: 'short',
+					day: 'numeric'
+				},
+				duration: {years: 1},
+				slotDuration: {days: 1},
+				theme: themeView('ec-resource ec-timeline ec-year-view'),
+				titleFormat: {year: 'numeric'}
 			}
 		});
 	},
@@ -70,11 +87,15 @@ export default {
 
 function initViewComponent(mainState) {
 	setExtensions(mainState);
-	return initMonthViewComponent(mainState);
+	return _initViewComponent(mainState);
 }
 
 function initMonthViewComponent(mainState) {
-	mainState.features = ['timeline'];
+	return _initViewComponent(mainState, ['month']);
+}
+
+function _initViewComponent(mainState, extraFeatures = []) {
+	mainState.features = ['timeline', ...extraFeatures];
 	mainState.extensions.viewResources = resources => resources.filter(resource => !getPayload(resource).hidden);
 	return View;
 }

package/src/plugins/resource-timeline/state.svelte.js

@@ -1,6 +1,9 @@
+import {intl} from '#lib';
 import {TRRState} from '../time-grid/state.svelte.js';
 import {RRState} from '../resource-time-grid/state.svelte.js';
-import {daySlots, dayTimeLimits, eventChunks, grid, iEventChunks, monthView, nestedResources} from './derived.js';
+import {
+    daySlots, dayTimeLimits, eventChunks, extraHeads, grid, iEventChunks, monthView, nestedResources
+} from './derived.js';
 
 export default class ViewState extends RRState(TRRState()) {
     constructor(mainState) {
@@ -8,6 +11,8 @@ export default class ViewState extends RRState(TRRState()) {
         this.dayTimeLimits = $derived.by(dayTimeLimits(mainState));  // flexible time limits per day
         this.daySlots = $derived.by(daySlots(mainState, this));
         this.grid = $derived.by(grid(mainState, this));
+        this.extraHeads = $derived.by(extraHeads(mainState, this));
+        this.intlMonthHeader = $derived.by(intl(mainState, 'monthHeaderFormat'));
         this.monthView = $derived.by(monthView(mainState));
         let {chunks, bgChunks} = $derived.by(eventChunks(mainState, this));
         this.chunks = $derived(chunks);

package/src/storage/derived.js

@@ -13,7 +13,10 @@ export function currentRange(mainState) {
 
         untrack(() => {
             start = cloneDate(date);
-            if (duration.months) {
+            if (duration.years) {
+                start.setUTCMonth(0);
+                start.setUTCDate(1);
+            } else if (duration.months) {
                 start.setUTCDate(1);
             } else if (duration.inWeeks) {
                 // First day of week

package/src/storage/options.js

@@ -90,6 +90,7 @@ function createOptions(plugins) {
             toolbar: 'ec-toolbar',
             view: '',
             weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'],
+            weekNumber: 'ec-week-number'
         },
         titleFormat: {
             year: 'numeric',

package/src/storage/state.svelte.js

@@ -1,5 +1,5 @@
 import {SvelteMap} from 'svelte/reactivity';
-import {createDate, identity, intl, intlRange, setMidnight} from '#lib';
+import {cloneDate, createDate, identity, intl, intlRange, isArray, setMidnight} from '#lib';
 import {optionsState} from './options.js';
 import {
     createLoadingInvoker, loadEvents, loadResources, runDatesSet, runEventAllUpdated, runViewDidMount, setNowAndToday,
@@ -27,8 +27,8 @@ export default class State {
         this.filteredEvents = $derived.by(filteredEvents(this));
         this.mainEl = $state();
         this.now = $state(createDate());
-        this.resources = $state.raw(arrayProxy(this.options.resources));
-        this.today = $state(setMidnight(createDate()));
+        this.resources = $state.raw(arrayProxy(isArray(this.options.resources) ? this.options.resources : []));
+        this.today = $state(setMidnight(cloneDate(this.now)));
         this.intlEventTime = $derived.by(intlRange(this, 'eventTimeFormat'));
         this.intlDayHeader = $derived.by(intl(this, 'dayHeaderFormat'));
         this.intlDayHeaderAL = $derived.by(intl(this, 'dayHeaderAriaLabelFormat'));

package/src/styles/days.css

@@ -26,7 +26,7 @@
                 100% var(--ec-slot-height);
     }
 
-    .ec-timeline:not(.ec-month-view) .ec-body & {
+    .ec-timeline:not(.ec-month-view, .ec-year-view) .ec-body & {
         --ec-last-line-color: transparent;
         --ec-direction: to left;
         [dir="rtl"] & {

package/src/styles/index.css

@@ -42,7 +42,7 @@
         flex-grow: 1;
     }
 
-    .ec-timeline.ec-month-view & {
+    .ec-timeline:is(.ec-month-view, .ec-year-view) & {
         grid-template-columns: max-content repeat(var(--ec-grid-cols), var(--ec-col-width));
     }