v2.5.0

A11y improvements: events are now accessible from the keyboard, added dayHeaderAriaLabelFormat option All dates and times are now rendered using <time> tag Events are now rendered using <article> and <h4> tags instead of <div> dateFromPoint now works for events in list view
vkurko · Dec 9, 2023 · 03a78f5 · 03a78f5
1 parent d5ec4b2
commit 03a78f5
Show file tree

Hide file tree

Showing 50 changed files with 1,004 additions and 708 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Event Calendar changelog
 
+## 2.5.0
+December 9, 2023
+
+* A11y improvements: events are now accessible from the keyboard, added `dayHeaderAriaLabelFormat` option ([161](https://github.com/vkurko/calendar/issues/161))
+* All dates and times are now rendered using `<time>` tag ([161](https://github.com/vkurko/calendar/issues/161))
+* Events are now rendered using `<article>` and `<h4>` tags instead of `<div>` ([161](https://github.com/vkurko/calendar/issues/161))
+* `dateFromPoint` now works for events in `list` view
+
 ## 2.4.1
 October 21, 2023
 

diff --git a/README.md b/README.md
@@ -27,6 +27,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [datesAboveResources](#datesaboveresources)
   - [datesSet](#datesset)
   - [dayCellFormat](#daycellformat)
+  - [dayHeaderAriaLabelFormat](#dayheaderarialabelformat)
   - [dayHeaderFormat](#dayheaderformat)
   - [dayMaxEvents](#daymaxevents)
   - [dayPopoverFormat](#daypopoverformat)
@@ -197,8 +198,8 @@ import '@event-calendar/core/index.css';
 ### Pre-built browser ready bundle
 Include the following lines of code in the `<head>` section of your page:
 ```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>
 ```
 
 <details>
@@ -478,6 +479,31 @@ function (date) {
 </tr>
 </table>
 
+### 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
 - Type `object` or `function`
 - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}`
@@ -2222,13 +2248,6 @@ If the current view is a resource view, the [Resource](#resource-object) object
 
 Using this method, you can, for example, find out on which day a click occurred inside a multi-day event. To do this, inside [eventClick](#eventclick), pass the `jsEvent.clientX` and `jsEvent.clientY` coordinates to `dateFromPoint` and get the desired date.
 
-<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()
 - Return value `undefined`
 
@@ -2300,7 +2319,7 @@ Here are all properties that exist in Event object:
 </td>
 <td>
 
-The text appearing on the event. See [Content](#content)</td>
+`Content` The text appearing on the event. See [Content](#content)</td>
 </tr>
 <tr>
 <td>
@@ -2590,14 +2609,10 @@ Here are all properties that exist in Resource object:
 
 `title`
 </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>
 <tr>
 <td>
@@ -2637,17 +2652,7 @@ Here are all admissible fields for the resource’s input object:
 </td>
 <td>
 
-`string` Text that will be displayed on the resource when it is rendered. Default `''`
-</td>
-</tr>
-<tr>
-<td>
-
-`titleHTML`
-</td>
-<td>
-
-`string` The HTML version of the title to be displayed instead of the text version. Default `''`
+`Content` Text that will be displayed on the resource when it is rendered. See [Content](#content). Default `''`
 </td>
 </tr>
 <tr>

diff --git a/docs/index.html b/docs/index.html
@@ -12,8 +12,8 @@
     <link rel="manifest" href="site.webmanifest">
     <link rel="stylesheet" href="global.css?20231021">
 
-    <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>
     <!-- Yandex.Metrika counter -->
     <script type="text/javascript" >
         (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};