diff --git a/README.md b/README.md index 3da4049..204a4a6 100644 --- a/README.md +++ b/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 +### 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 +} +``` + + + + + +
+ +`date` +JavaScript Date object that needs to be formatted
+ ### headerToolbar - Type `object` - Default `{start: 'title', center: '', end: 'today prev,next'}` diff --git a/packages/day-grid/src/Day.svelte b/packages/day-grid/src/Day.svelte index e6d47c6..3415aed 100644 --- a/packages/day-grid/src/Day.svelte +++ b/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} > -
{date.getUTCDate()}
+
{$_intlGridDayFormat.format(date)}
{#if iChunks[1] && datesEqual(iChunks[1].date, date)}
diff --git a/packages/day-grid/src/index.js b/packages/day-grid/src/index.js index 80d0c21..ab977ca 100644 --- a/packages/day-grid/src/index.js +++ b/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([]);