From d1b3ee75745c14f22ad2de4dae65469235e2a986 Mon Sep 17 00:00:00 2001 From: mweimerskirch <362092+mweimerskirch@users.noreply.github.com> Date: Thu, 24 Aug 2023 12:39:05 +0200 Subject: [PATCH] v2.2.0 Added dayCellFormat option --- CHANGELOG.md | 7 ++- README.md | 32 ++++++++++++-- docs/global.css | 34 +++++++++++++++ docs/index.html | 6 +-- package-lock.json | 54 ++++++++++++------------ package.json | 16 +++---- packages/build/README.md | 32 ++++++++++++-- packages/build/package.json | 12 +++--- packages/core/README.md | 32 ++++++++++++-- packages/core/package.json | 2 +- packages/core/src/Calendar.svelte | 2 +- packages/day-grid/README.md | 32 ++++++++++++-- packages/day-grid/package.json | 4 +- packages/day-grid/src/Day.svelte | 4 +- packages/day-grid/src/index.js | 2 + packages/interaction/README.md | 32 ++++++++++++-- packages/interaction/package.json | 4 +- packages/list/README.md | 32 ++++++++++++-- packages/list/package.json | 4 +- packages/resource-time-grid/README.md | 32 ++++++++++++-- packages/resource-time-grid/package.json | 6 +-- packages/time-grid/README.md | 32 ++++++++++++-- packages/time-grid/package.json | 4 +- 23 files changed, 325 insertions(+), 92 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94b1146..812b15d 100644 --- 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 index 3da4049..3bf58a9 100644 --- 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) + - [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) + - [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 `` section of your page: ```html - - + + ```
@@ -453,6 +454,29 @@ The current [View](#view-object) object +### 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 +} +``` + + + + + +
+ +`date` +JavaScript Date object that needs to be formatted
+ ### dayHeaderFormat - Type `object` or `function` - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}` diff --git a/docs/global.css b/docs/global.css index a5fed42..6fe4e76 100644 --- 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; + } +} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 265413f..f16c523 100644 --- a/docs/index.html +++ b/docs/index.html @@ -12,8 +12,8 @@ - - + + + + ```
@@ -453,6 +454,29 @@ The current [View](#view-object) object +### 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 +} +``` + + + + + +
+ +`date` +JavaScript Date object that needs to be formatted
+ ### dayHeaderFormat - Type `object` or `function` - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}` diff --git a/packages/build/package.json b/packages/build/package.json index c79ca6b..5b7effd 100644 --- a/packages/build/package.json +++ b/packages/build/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/build", - "version": "2.1.0", + "version": "2.2.0", "title": "Event Calendar", "description": "Full-sized drag & drop event calendar with resource view", "keywords": [ @@ -18,10 +18,10 @@ "license": "MIT", "jsdelivr": "event-calendar.min.js", "devDependencies": { - "@event-calendar/day-grid": "~2.1.0", - "@event-calendar/interaction": "~2.1.0", - "@event-calendar/list": "~2.1.0", - "@event-calendar/time-grid": "~2.1.0", - "@event-calendar/resource-time-grid": "~2.1.0" + "@event-calendar/day-grid": "~2.2.0", + "@event-calendar/interaction": "~2.2.0", + "@event-calendar/list": "~2.2.0", + "@event-calendar/time-grid": "~2.2.0", + "@event-calendar/resource-time-grid": "~2.2.0" } } \ No newline at end of file diff --git a/packages/core/README.md b/packages/core/README.md index 3da4049..3bf58a9 100644 --- a/packages/core/README.md +++ b/packages/core/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) + - [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) + - [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 `` section of your page: ```html - - + + ```
@@ -453,6 +454,29 @@ The current [View](#view-object) object +### 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 +} +``` + + + + + +
+ +`date` +JavaScript Date object that needs to be formatted
+ ### dayHeaderFormat - Type `object` or `function` - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}` diff --git a/packages/core/package.json b/packages/core/package.json index 694dea1..f5289a5 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/core", - "version": "2.1.0", + "version": "2.2.0", "title": "Event Calendar Core package", "description": "Full-sized drag & drop event calendar with resource view", "keywords": [ diff --git a/packages/core/src/Calendar.svelte b/packages/core/src/Calendar.svelte index 98062f3..5b2c085 100644 --- a/packages/core/src/Calendar.svelte +++ b/packages/core/src/Calendar.svelte @@ -131,7 +131,7 @@
diff --git a/packages/day-grid/README.md b/packages/day-grid/README.md index 3da4049..3bf58a9 100644 --- a/packages/day-grid/README.md +++ b/packages/day-grid/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) + - [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) + - [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 `` section of your page: ```html - - + + ```
@@ -453,6 +454,29 @@ The current [View](#view-object) object +### 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 +} +``` + + + + + +
+ +`date` +JavaScript Date object that needs to be formatted
+ ### dayHeaderFormat - Type `object` or `function` - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}` diff --git a/packages/day-grid/package.json b/packages/day-grid/package.json index 3fda814..433824b 100644 --- a/packages/day-grid/package.json +++ b/packages/day-grid/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/day-grid", - "version": "2.1.0", + "version": "2.2.0", "title": "Event Calendar DayGrid plugin", "description": "Full-sized drag & drop event calendar with resource view", "keywords": [ @@ -26,7 +26,7 @@ "./package.json": "./package.json" }, "dependencies": { - "@event-calendar/core": "~2.1.0", + "@event-calendar/core": "~2.2.0", "svelte": "^4.1.1" } } \ No newline at end of file diff --git a/packages/day-grid/src/Day.svelte b/packages/day-grid/src/Day.svelte index e6d47c6..5e94221 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, _intlDayCell, _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()}
+
{#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..5f78614 100644 --- a/packages/day-grid/src/index.js +++ b/packages/day-grid/src/index.js @@ -6,6 +6,7 @@ import View from './View.svelte'; export default { createOptions(options) { options.dayMaxEvents = false; + options.dayCellFormat = {day: 'numeric'}; options.dayPopoverFormat = {month: 'long', day: 'numeric', year: 'numeric'}; options.moreLinkContent = undefined; // Common options @@ -28,6 +29,7 @@ export default { createStores(state) { state._days = days(state); + state._intlDayCell = intl(state.locale, state.dayCellFormat); state._intlDayPopover = intl(state.locale, state.dayPopoverFormat); state._hiddenEvents = writable({}); state._popupDate = writable(null); diff --git a/packages/interaction/README.md b/packages/interaction/README.md index 3da4049..3bf58a9 100644 --- a/packages/interaction/README.md +++ b/packages/interaction/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) + - [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) + - [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 `` section of your page: ```html - - + + ```
@@ -453,6 +454,29 @@ The current [View](#view-object) object +### 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 +} +``` + + + + + +
+ +`date` +JavaScript Date object that needs to be formatted
+ ### dayHeaderFormat - Type `object` or `function` - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}` diff --git a/packages/interaction/package.json b/packages/interaction/package.json index 20d9f37..c0ee8ce 100644 --- a/packages/interaction/package.json +++ b/packages/interaction/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/interaction", - "version": "2.1.0", + "version": "2.2.0", "title": "Event Calendar Interaction plugin", "description": "Full-sized drag & drop event calendar with resource view", "keywords": [ @@ -26,7 +26,7 @@ "./package.json": "./package.json" }, "dependencies": { - "@event-calendar/core": "~2.1.0", + "@event-calendar/core": "~2.2.0", "svelte": "^4.1.1" } } \ No newline at end of file diff --git a/packages/list/README.md b/packages/list/README.md index 3da4049..3bf58a9 100644 --- a/packages/list/README.md +++ b/packages/list/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) + - [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) + - [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 `` section of your page: ```html - - + + ```
@@ -453,6 +454,29 @@ The current [View](#view-object) object +### 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 +} +``` + + + + + +
+ +`date` +JavaScript Date object that needs to be formatted
+ ### dayHeaderFormat - Type `object` or `function` - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}` diff --git a/packages/list/package.json b/packages/list/package.json index 8cd0afc..feb4a48 100644 --- a/packages/list/package.json +++ b/packages/list/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/list", - "version": "2.1.0", + "version": "2.2.0", "title": "Event Calendar List plugin", "description": "Full-sized drag & drop event calendar with resource view", "keywords": [ @@ -26,7 +26,7 @@ "./package.json": "./package.json" }, "dependencies": { - "@event-calendar/core": "~2.1.0", + "@event-calendar/core": "~2.2.0", "svelte": "^4.1.1" } } \ No newline at end of file diff --git a/packages/resource-time-grid/README.md b/packages/resource-time-grid/README.md index 3da4049..3bf58a9 100644 --- a/packages/resource-time-grid/README.md +++ b/packages/resource-time-grid/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) + - [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) + - [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 `` section of your page: ```html - - + + ```
@@ -453,6 +454,29 @@ The current [View](#view-object) object +### 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 +} +``` + + + + + +
+ +`date` +JavaScript Date object that needs to be formatted
+ ### dayHeaderFormat - Type `object` or `function` - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}` diff --git a/packages/resource-time-grid/package.json b/packages/resource-time-grid/package.json index dc21e90..26d7266 100644 --- a/packages/resource-time-grid/package.json +++ b/packages/resource-time-grid/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/resource-time-grid", - "version": "2.1.0", + "version": "2.2.0", "title": "Event Calendar ResourceTimeGrid plugin", "description": "Full-sized drag & drop event calendar with resource view", "keywords": [ @@ -26,8 +26,8 @@ "./package.json": "./package.json" }, "dependencies": { - "@event-calendar/core": "~2.1.0", - "@event-calendar/time-grid": "~2.1.0", + "@event-calendar/core": "~2.2.0", + "@event-calendar/time-grid": "~2.2.0", "svelte": "^4.1.1" } } \ No newline at end of file diff --git a/packages/time-grid/README.md b/packages/time-grid/README.md index 3da4049..3bf58a9 100644 --- a/packages/time-grid/README.md +++ b/packages/time-grid/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) + - [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) + - [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 `` section of your page: ```html - - + + ```
@@ -453,6 +454,29 @@ The current [View](#view-object) object +### 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 +} +``` + + + + + +
+ +`date` +JavaScript Date object that needs to be formatted
+ ### dayHeaderFormat - Type `object` or `function` - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}` diff --git a/packages/time-grid/package.json b/packages/time-grid/package.json index 150372e..519ce9f 100644 --- a/packages/time-grid/package.json +++ b/packages/time-grid/package.json @@ -1,6 +1,6 @@ { "name": "@event-calendar/time-grid", - "version": "2.1.0", + "version": "2.2.0", "title": "Event Calendar TimeGrid plugin", "description": "Full-sized drag & drop event calendar with resource view", "keywords": [ @@ -26,7 +26,7 @@ "./package.json": "./package.json" }, "dependencies": { - "@event-calendar/core": "~2.1.0", + "@event-calendar/core": "~2.2.0", "svelte": "^4.1.1" } } \ No newline at end of file