@event-calendar/core - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

package.json

 {
   "name": "@event-calendar/core",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "title": "Event Calendar Core package",
@@ -5,0 +5,0 @@ "description": "Full-sized drag & drop event calendar with resource view",

README.md

@@ -127,2 +127,3 @@ # Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![npm](https://img.shields.io/npm/dm/@event-calendar/core?color=red&label=npm&style=flat-square)](https://www.npmjs.com/package/@event-calendar/core)
   </table>
+- [Content](#content)
 - [Event object](#event-object)
@@ -198,4 +199,4 @@ - [Parsing event from a plain object](#parsing-event-from-a-plain-object)
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.0.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.0.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.js"></script>
 ```
@@ -291,11 +292,11 @@
 > Views override the default value as follows:
-> - dayGridMonth `function (text) { return {...text, next: 'Next month', prev: 'Previous month'}; }`
-> - listDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - listMonth `function (text) { return {...text, next: 'Next month', prev: 'Previous month'}; }`
-> - listWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
-> - listYear `function (text) { return {...text, next: 'Next year', prev: 'Previous year'}; }`
-> - resourceTimeGridDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - resourceTimeGridWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
-> - timeGridDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - timeGridWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
+> - dayGridMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
+> - listDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
+> - listMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
+> - listWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
+> - listYear `text => ({...text, next: 'Next year', prev: 'Previous year'})`
+> - resourceTimeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
+> - resourceTimeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
+> - timeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
+> - timeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
 
@@ -1309,3 +1310,3 @@
 
-This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with formatted string:
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
 
@@ -1912,3 +1913,13 @@ ```js
 - Type `object` or `function`
-- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', list: 'ec-list', month: 'ec-month', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', week: 'ec-week', withScroll: 'ec-with-scroll'}`
+- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', view: '', withScroll: 'ec-with-scroll'}`
+> Views override the default value as follows:
+> - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-view'})`
+> - listDay `theme => ({...theme, view: 'ec-list ec-day-view'})`
+> - listMonth `theme => ({...theme, view: 'ec-list ec-month-view'})`
+> - listWeek `theme => ({...theme, view: 'ec-list ec-week-view'})`
+> - listYear `theme => ({...theme, view: 'ec-list ec-year-view'})`
+> - resourceTimeGridDay `theme => ({...theme, view: 'ec-time-grid ec-resource-day-view'})`
+> - resourceTimeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-resource-week-view'})`
+> - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
+> - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
 
@@ -1967,12 +1978,2 @@ Defines the CSS classes that the Event Calendar uses to generate HTML markup.
 
-The callback function can return HTML markup. If you want to use HTML entities in the title, you must use the callback function:
-
-```js
-function (date) {
-  let month = date.toLocaleDateString('en-US', { month: 'long' })
-  let year = date.toLocaleDateString('en-US', { year: 'numeric' })
-  return `<span class="month">${month}</span> <span class="year">${year}</span>`
-}
-```
-
 ### unselect
@@ -1979,0 +1980,0 @@ - Type `function`

src/lib.js

@@ -7,4 +7,5 @@ export * from './lib/a11y.js';
 export * from './lib/events';
+export * from './lib/options';
 export * from './lib/stores';
 export * from './lib/utils';
 export * from './lib/view';

src/lib/a11y.js

@@ -7,25 +7,1 @@
 }
-
-export function btnTextDay(text) {
-    return btnText(text, 'day');
-}
-
-export function btnTextWeek(text) {
-    return btnText(text, 'week');
-}
-
-export function btnTextMonth(text) {
-    return btnText(text, 'month');
-}
-
-export function btnTextYear(text) {
-    return btnText(text, 'year');
-}
-
-function btnText(text, period) {
-    return {
-        ...text,
-        next: 'Next ' + period,
-        prev: 'Previous ' + period
-    };
-}

src/storage/options.js

 import {assign, createDate, createDuration, setMidnight, createEvents, createEventSources} from '../lib.js';
-import {is_function} from 'svelte/internal';
 
@@ -95,3 +94,3 @@ export function createOptions(plugins) {
             toolbar: 'ec-toolbar',
-            week: 'ec-week',
+            view: '',
             withScroll: 'ec-with-scroll'
@@ -116,5 +115,4 @@ },
 
-export function createParsers(options, plugins) {
+export function createParsers(plugins) {
     let parsers = {
-        buttonText: input => is_function(input) ? input(options.buttonText) : input,
         date: date => setMidnight(createDate(date)),
@@ -129,8 +127,7 @@ duration: createDuration,
         slotMaxTime: createDuration,
-        slotMinTime: createDuration,
-        theme: input => is_function(input) ? input(options.theme) : input
+        slotMinTime: createDuration
     };
 
     for (let plugin of plugins) {
-        plugin.createParsers?.(parsers, options);
+        plugin.createParsers?.(parsers);
     }
@@ -137,0 +134,0 @@

src/storage/state.js

@@ -7,4 +7,4 @@ import {writable} from 'svelte/store';
     currentRange,
+    dayGrid,
     events,
-    monthMode,
     now,
@@ -16,3 +16,3 @@ today,
 } from './stores';
-import {assign, keys, writable2, intl, intlRange} from '../lib.js';
+import {keys, writable2, intl, intlRange} from '../lib.js';
 
@@ -24,4 +24,4 @@ export default class {
         // Create options
-        let options= createOptions(plugins);
-        let parsers = createParsers(options, plugins);
+        let options = createOptions(plugins);
+        let parsers = createParsers(plugins);
 
@@ -40,3 +40,3 @@ // Parse options
         this._auxiliary = writable([]);  // auxiliary components
-        this._monthMode = monthMode(this);
+        this._dayGrid = dayGrid(this);
         this._currentRange = currentRange(this);
@@ -57,3 +57,2 @@ this._activeRange = activeRange(this);
         this._view = view2(this);
-        this._viewClass = writable(undefined);
         this._viewComponent = writable(undefined);
@@ -82,3 +81,3 @@ // Resources
         for (let view of views) {
-            let opts = assign({}, options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
+            let opts = mergeOpts(options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
             // Change view component when view changes
@@ -134,1 +133,12 @@ this.view.subscribe(newView => {
 }
+
+function mergeOpts(...args) {
+    let mergable = ['buttonText', 'theme'];
+    let result = {};
+    for (let opts of args) {
+        for (let key of keys(opts)) {
+            result[key] = mergable.includes(key) && is_function(opts[key]) ? opts[key](result[key]) : opts[key];
+        }
+    }
+    return result;
+}

src/storage/stores.js

@@ -22,3 +22,3 @@ import {derived, writable, readable} from 'svelte/store';
 
-export function monthMode(state) {
+export function dayGrid(state) {
     return derived(state.view, $view => $view?.startsWith('dayGrid'));
@@ -29,8 +29,8 @@ }
     return derived(
-        [state._currentRange, state.firstDay, state.slotMaxTime, state._monthMode],
-        ([$_currentRange, $firstDay, $slotMaxTime, $_monthMode]) => {
+        [state._currentRange, state.firstDay, state.slotMaxTime, state._dayGrid],
+        ([$_currentRange, $firstDay, $slotMaxTime, $_dayGrid]) => {
             let start = cloneDate($_currentRange.start);
             let end = cloneDate($_currentRange.end);
 
-            if ($_monthMode) {
+            if ($_dayGrid) {
                 // First day of week
@@ -54,6 +54,6 @@ prevClosestDay(start, $firstDay);
     return derived(
-        [state.date, state.duration, state.firstDay, state._monthMode],
-        ([$date, $duration, $firstDay, $_monthMode]) => {
+        [state.date, state.duration, state.firstDay, state._dayGrid],
+        ([$date, $duration, $firstDay, $_dayGrid]) => {
             let start = cloneDate($date), end;
-            if ($_monthMode) {
+            if ($_dayGrid) {
                 start.setUTCDate(1);
@@ -99,5 +99,5 @@ } else if ($duration.inWeeks) {
     return derived(
-        [state.date, state._activeRange, state._intlTitle, state._monthMode],
-        ([$date, $_activeRange, $_intlTitle, $_monthMode]) => {
-            return $_monthMode
+        [state.date, state._activeRange, state._intlTitle, state._dayGrid],
+        ([$date, $_activeRange, $_intlTitle, $_dayGrid]) => {
+            return $_dayGrid
                 ? $_intlTitle.formatRange($date, $date)
@@ -104,0 +104,0 @@ : $_intlTitle.formatRange($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

190216

increased by0.54%

Number of package files

24

increased by4.35%

Lines of code

3678

increased by0.6%

Number of lines in readme file

2703

increased by0.04%

Worsened metrics

Number of versions

100

decreased by-0.99%

Published versions last months

1

decreased by-50%

Published versions last two months

4

decreased by-20%

Published versions last week

0

decreased by-100%

Published versions last year

21

decreased by-4.55%

No dependency changes