Allow setting a custom format for the day in the grid list (#169)

README.md

@@ -60,6 +60,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [filterResourcesWithEvents](#filterresourceswithevents)
   - [firstDay](#firstday)
   - [flexibleSlotTimeLimits](#flexibleslottimelimits)
+  - [gridDayFormat](#griddayformat)
   - [headerToolbar](#headertoolbar)
   - [height](#height)
   - [hiddenDays](#hiddendays)
@@ -1392,6 +1393,29 @@ The function must return `true` to have this event counted, or `false` to ignore
 </tr>
 </table>
 
+### gridDayFormat
+- Type `object` or `function`
+- Default `{day: 'numeric'}`
+
+Defines the day-text that is displayed on the grid 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 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>
+
 ### headerToolbar
 - Type `object`
 - Default `{start: 'title', center: '', end: 'today prev,next'}`

packages/day-grid/src/Day.svelte

@@ -12,7 +12,7 @@
     export let iChunks = [];
 
     let {date: currentDate, dayMaxEvents, highlightedDates, moreLinkContent, theme,
-        _hiddenEvents, _popupDate, _popupChunks, _interaction, _queue} = getContext('state');
+        _hiddenEvents, _intlGridDayFormat, _popupDate, _popupChunks, _interaction, _queue} = getContext('state');
 
     let el;
     let dayChunks;
@@ -111,7 +111,7 @@
     on:pointerleave={$_interaction.pointer?.leave}
     on:pointerdown={$_interaction.action?.select}
 >
-    <div class="{$theme.dayHead}">{date.getUTCDate()}</div>
+    <div class="{$theme.dayHead}">{$_intlGridDayFormat.format(date)}</div>
     <!-- Pointer -->
     {#if iChunks[1] && datesEqual(iChunks[1].date, date)}
         <div class="{$theme.events}">

packages/day-grid/src/index.js

@@ -11,6 +11,7 @@ export default {
 		// Common options
 		options.buttonText.dayGridMonth = 'month';
 		options.buttonText.close = 'Close';
+		options.gridDayFormat = {day: 'numeric'};
 		options.theme.uniform = 'ec-uniform';
 		options.theme.dayFoot = 'ec-day-foot';
 		options.theme.popup = 'ec-popup';
@@ -29,6 +30,7 @@ export default {
 	createStores(state) {
 		state._days = days(state);
 		state._intlDayPopover = intl(state.locale, state.dayPopoverFormat);
+		state._intlGridDayFormat = intl(state.locale, state.gridDayFormat);
 		state._hiddenEvents = writable({});
 		state._popupDate = writable(null);
 		state._popupChunks = writable([]);