+ - [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
+}
+```
+
+ - [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
+}
+```
+
+ - [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}
>
-
+ - [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)
+ - [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)
+ - [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
+}
+```
+
+ - [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