@event-calendar/core - npm Package Compare versions

Comparing version 2.4.1 to 2.5.0

package.json

 {
   "name": "@event-calendar/core",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "title": "Event Calendar Core package",
@@ -30,4 +30,4 @@ "description": "Full-sized drag & drop event calendar with resource view",
   "dependencies": {
-    "svelte": "^4.1.1"
+    "svelte": "^4.2.8"
   }
 }

README.md

@@ -200,4 +200,4 @@ # 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)
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.1/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.1/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.5.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.5.0/event-calendar.min.js"></script>
 ```
@@ -482,2 +482,27 @@
 
+### dayHeaderAriaLabelFormat
+- Type `object` or `function`
+- Default `{dateStyle: 'long'}`
+> Views override the default value as follows:
+> - dayGridMonth `{weekday: 'long'}`
+
+Defines the text that is used inside the `aria-label` attribute in calendar column headings.
+
+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 formatted string:
+
+```js
+function (date) {
+    // return formatted date string
+}
+```
+<table>
+<tr>
+<td>
+
+`date`
+</td>
+<td>JavaScript Date object that needs to be formatted</td>
+</tr>
+</table>
+
 ### dayHeaderFormat
@@ -2227,9 +2252,2 @@ - Type `object` or `function`
 
-<details>
-  <summary>Note</summary>
-
-> In the `'listDay'`, `'listWeek'`, `'listMonth'` and `'listYear'` views, the events are rendered outside the day container, so the method will return `null` for the coordinates that are inside the events.
-
-</details>
-
 ### destroy()
@@ -2306,3 +2324,3 @@ - Return value `undefined`
 
-The text appearing on the event. See [Content](#content)</td>
+`Content` The text appearing on the event. See [Content](#content)</td>
 </tr>
@@ -2597,10 +2615,6 @@ <tr>
 </td>
-<td>The title of the resource</td>
-</tr>
-<tr>
 <td>
 
-`titleHTML`
+The title of the resource. See [Content](#content).
 </td>
-<td>The HTML version of the title</td>
 </tr>
@@ -2645,3 +2659,3 @@ <tr>
 
-`string` Text that will be displayed on the resource when it is rendered. Default `''`
+`Content` Text that will be displayed on the resource when it is rendered. See [Content](#content). Default `''`
 </td>
@@ -2652,12 +2666,2 @@ </tr>
 
-`titleHTML`
-</td>
-<td>
-
-`string` The HTML version of the title to be displayed instead of the text version. Default `''`
-</td>
-</tr>
-<tr>
-<td>
-
 `eventBackgroundColor`
@@ -2664,0 +2668,0 @@ </td>

src/lib/a11y.js

 
 export function keyEnter(fn) {
     return function (e) {
-        return e.key === 'Enter' || e.key === ' ' ? fn.call(this, e) : undefined;
+        return e.key === 'Enter' || e.key === ' ' && !e.preventDefault()  // prevent page scroll down
+            ? fn.call(this, e)
+            : undefined;
     };
 }

src/lib/date.js

@@ -90,4 +90,4 @@ export const DAY_IN_SECONDS = 86400;
 
-export function toISOString(date) {
-    return date.toISOString().substring(0, 19);
+export function toISOString(date, len = 19) {
+    return date.toISOString().substring(0, len);
 }
@@ -94,0 +94,0 @@

src/lib/dom.js

 import {symbol} from './utils.js';
 
-export function createElement(tag, className, content) {
+export function createElement(tag, className, content, attrs = []) {
     let el = document.createElement(tag);
@@ -13,2 +13,5 @@ el.className = className;
     }
+    for (let attr of attrs) {
+        el.setAttribute(...attr);
+    }
     return el;
@@ -15,0 +18,0 @@ }

src/lib/events.js

@@ -1,2 +0,2 @@
-import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, noTimePart, copyTime} from './date';
+import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, toISOString, noTimePart, copyTime} from './date';
 import {createElement} from './dom';
@@ -151,19 +151,17 @@ import {assign} from './utils';
     } else {
+        let domNodes;
         switch (chunk.event.display) {
             case 'background':
-                content = '';
+                domNodes = [];
                 break;
             case 'pointer':
-                content = {
-                    domNodes: [createElement('div', theme.eventTime, timeText)]
-                };
+                domNodes = [createTimeElement(timeText, chunk, theme)];
                 break;
             default:
-                content = {
-                    domNodes: [
-                        ...chunk.event.allDay ? [] : [createElement('div', theme.eventTime, timeText)],
-                        createElement('div', theme.eventTitle, chunk.event.title)
-                    ]
-                };
+                domNodes = [
+                    ...chunk.event.allDay ? [] : [createTimeElement(timeText, chunk, theme)],
+                    createElement('h4', theme.eventTitle, chunk.event.title)
+                ];
         }
+        content = {domNodes};
     }
@@ -174,2 +172,11 @@
 
+function createTimeElement(timeText, chunk, theme) {
+    return createElement(
+        'time',
+        theme.eventTime,
+        timeText,
+        [['datetime', toISOString(chunk.start)]]
+    );
+}
+
 export function createEventClasses(eventClassNames, event, _view) {
@@ -176,0 +183,0 @@ if (eventClassNames) {

src/lib/view.js

@@ -24,2 +24,6 @@ import {assign} from './utils';
     return view;
-}
+}
+
+export function listView(view) {
+    return view.startsWith('list');
+}

src/storage/options.js

@@ -17,2 +17,5 @@ import {assign, createDate, createDuration, keys, setMidnight, createEvents, createEventSources} from '../lib.js';
         },
+        dayHeaderAriaLabelFormat: {
+            dateStyle: 'long'
+        },
         displayEventEnd: true,
@@ -19,0 +22,0 @@ duration: {weeks: 1},

src/storage/state.js

@@ -47,2 +47,3 @@ import {get, writable} from 'svelte/store';
         this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
+        this._intlDayHeaderAL = intl(this.locale, this.dayHeaderAriaLabelFormat);
         this._intlTitle = intlRange(this.locale, this.titleFormat);
@@ -49,0 +50,0 @@ this._bodyEl = writable(undefined);

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

200054

increased by1.05%

Lines of code

3805

increased by1.44%

Number of lines in readme file

2749

increased by0.15%

Number of versions

101

increased by1%

Published versions last months

2

increased by100%

Published versions last two months

5

increased by25%

Published versions last week

1

increased byInfinity%

Published versions last year

22

increased by4.76%

Dependency changes

• Updatedsvelte@^4.2.8