v2.2.0

Added dayCellFormat option
vkurko · Aug 24, 2023 · d1b3ee7 · d1b3ee7
1 parent ae13583
commit d1b3ee7
Show file tree

Hide file tree

Showing 23 changed files with 325 additions and 92 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,14 @@
 # Event Calendar changelog
 
+## 2.2.0
+August 24, 2023
+
+* Added `dayCellFormat` option ([169](https://github.com/vkurko/calendar/pull/169))
+
 ## 2.1.0
 August 22, 2023
 
-* Improved CSS class switching on view change ([155](https://github.com/vkurko/calendar/pull/155))
+* Improved CSS class switching on view change ([155](https://github.com/vkurko/calendar/issues/155))
 
 ## 2.0.0
 August 17, 2023

diff --git a/README.md b/README.md
@@ -26,6 +26,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [dateClick](#dateclick)
   - [datesAboveResources](#datesaboveresources)
   - [datesSet](#datesset)
+  - [dayCellFormat](#daycellformat)
   - [dayHeaderFormat](#dayheaderformat)
   - [dayMaxEvents](#daymaxevents)
   - [dayPopoverFormat](#daypopoverformat)
@@ -44,9 +45,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [eventDragStart](#eventdragstart)
   - [eventDragStop](#eventdragstop)
   - [eventDrop](#eventdrop)
-  - [eventDurationEditable](#eventdurationeditable)
   </td><td>
 
+  - [eventDurationEditable](#eventdurationeditable)
   - [eventLongPressDelay](#eventlongpressdelay)
   - [eventMouseEnter](#eventmouseenter)
   - [eventMouseLeave](#eventmouseleave)
@@ -72,9 +73,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [longPressDelay](#longpressdelay)
   - [moreLinkContent](#morelinkcontent)
   - [noEventsClick](#noeventsclick)
-  - [noEventsContent](#noeventscontent)
   </td><td>
 
+  - [noEventsContent](#noeventscontent)
   - [nowIndicator](#nowindicator)
   - [pointer](#pointer)
   - [resources](#resources)
@@ -195,8 +196,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.1.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.2.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.2.0/event-calendar.min.js"></script>
 ```
 
 <details>
@@ -453,6 +454,29 @@ The current [View](#view-object) object
 </tr>
 </table>
 
+### dayCellFormat
+- Type `object` or `function`
+- Default `{day: 'numeric'}`
+
+Defines the text that is displayed inside the day cell in the `dayGrid` view.
+
+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:
+
+```js
+function (date) {
+  // return Content with the 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'}`

diff --git a/docs/global.css b/docs/global.css
@@ -9,6 +9,9 @@ body {
 	html {
 		font-size: 12px;
 	}
+	h4 {
+		margin-top: 0;
+	}
 }
 .row {
 	display: flex;
@@ -18,3 +21,34 @@ body {
 	min-width: 0;
 	max-width: 100%;
 }
+
+.ec {
+	height: 640px;
+}
+.ec.ec-day-grid {
+	height: 400px;
+}
+@media (min-width: 576px) {
+	.ec {
+		height: 700px;
+	}
+	.ec.ec-day-grid {
+		height: 500px;
+	}
+}
+@media (min-width: 992px) {
+	.ec {
+		height: 800px;
+	}
+	.ec.ec-day-grid {
+		height: 700px;
+	}
+}
+@media (min-width: 1200px) {
+	.ec {
+		height: 900px;
+	}
+	.ec.ec-day-grid {
+		height: 800px;
+	}
+}
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">
 
-    <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>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.2.0/event-calendar.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.2.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)};
@@ -41,7 +41,7 @@ <h4><a href="https://github.com/vkurko/calendar">Event Calendar</a> Demo</h4>
 <script type="text/javascript">
     let ec = new EventCalendar(document.getElementById('ec'), {
         view: 'timeGridWeek',
-        height: '800px',
+        height: undefined,
         headerToolbar: {
             start: 'prev,next today',
             center: 'title',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "event-calendar",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
@@ -13,13 +13,13 @@
     "@babel/plugin-transform-runtime": "^7.22.9",
     "@babel/preset-env": "^7.22.9",
     "@babel/runtime-corejs3": "^7.22.6",
-    "@event-calendar/build": "~2.1.0",
-    "@event-calendar/core": "~2.1.0",
-    "@event-calendar/day-grid": "~2.1.0",
-    "@event-calendar/interaction": "~2.1.0",
-    "@event-calendar/list": "~2.1.0",
-    "@event-calendar/resource-time-grid": "~2.1.0",
-    "@event-calendar/time-grid": "~2.1.0",
+    "@event-calendar/build": "~2.2.0",
+    "@event-calendar/core": "~2.2.0",
+    "@event-calendar/day-grid": "~2.2.0",
+    "@event-calendar/interaction": "~2.2.0",
+    "@event-calendar/list": "~2.2.0",
+    "@event-calendar/resource-time-grid": "~2.2.0",
+    "@event-calendar/time-grid": "~2.2.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",

diff --git a/packages/build/README.md b/packages/build/README.md
@@ -26,6 +26,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [dateClick](#dateclick)
   - [datesAboveResources](#datesaboveresources)
   - [datesSet](#datesset)
+  - [dayCellFormat](#daycellformat)
   - [dayHeaderFormat](#dayheaderformat)
   - [dayMaxEvents](#daymaxevents)
   - [dayPopoverFormat](#daypopoverformat)
@@ -44,9 +45,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [eventDragStart](#eventdragstart)
   - [eventDragStop](#eventdragstop)
   - [eventDrop](#eventdrop)
-  - [eventDurationEditable](#eventdurationeditable)
   </td><td>
 
+  - [eventDurationEditable](#eventdurationeditable)
   - [eventLongPressDelay](#eventlongpressdelay)
   - [eventMouseEnter](#eventmouseenter)
   - [eventMouseLeave](#eventmouseleave)
@@ -72,9 +73,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [longPressDelay](#longpressdelay)
   - [moreLinkContent](#morelinkcontent)
   - [noEventsClick](#noeventsclick)
-  - [noEventsContent](#noeventscontent)
   </td><td>
 
+  - [noEventsContent](#noeventscontent)
   - [nowIndicator](#nowindicator)
   - [pointer](#pointer)
   - [resources](#resources)
@@ -195,8 +196,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.1.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.2.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.2.0/event-calendar.min.js"></script>
 ```
 
 <details>
@@ -453,6 +454,29 @@ The current [View](#view-object) object
 </tr>
 </table>
 
+### dayCellFormat
+- Type `object` or `function`
+- Default `{day: 'numeric'}`
+
+Defines the text that is displayed inside the day cell in the `dayGrid` view.
+
+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:
+
+```js
+function (date) {
+  // return Content with the 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'}`