@@ -363,9 +363,12 @@ Each `customButton` entry accepts the following properties:
|
-`text `
+`text`
+ |
+
+
+The text to be display on the button itself. See [Content](#content)
|
-The text to be display on the button itself |
|
@@ -374,6 +377,16 @@ Each `customButton` entry accepts the following properties:
|
A callback function that is called when the button is clicked. Accepts one argument mouseEvent |
+
+|
+
+`active`
+ |
+
+
+If `true`, the button will appear pressed/active
+ |
+
### date
@@ -2743,7 +2756,7 @@ Here are all properties that exist in Resource object:
-The title of the resource. See [Content](#content).
+The title of the resource. See [Content](#content)
|
diff --git a/docs/index.html b/docs/index.html
index 75f7a9d..1f05c1e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,8 +12,8 @@
-
-
+
+
+
+
```
@@ -363,9 +363,12 @@ Each `customButton` entry accepts the following properties:
|
-`text `
+`text`
+ |
+
+
+The text to be display on the button itself. See [Content](#content)
|
-The text to be display on the button itself |
|
@@ -374,6 +377,16 @@ Each `customButton` entry accepts the following properties:
|
A callback function that is called when the button is clicked. Accepts one argument mouseEvent |
+
+|
+
+`active`
+ |
+
+
+If `true`, the button will appear pressed/active
+ |
+
### date
@@ -2743,7 +2756,7 @@ Here are all properties that exist in Resource object:
-The title of the resource. See [Content](#content).
+The title of the resource. See [Content](#content)
|
diff --git a/packages/build/package.json b/packages/build/package.json
index 8b3cf3d..5d8d651 100644
--- a/packages/build/package.json
+++ b/packages/build/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/build",
- "version": "3.1.0",
+ "version": "3.2.0",
"title": "Event Calendar",
"description": "Full-sized drag & drop event calendar with resource & timeline views",
"keywords": [
@@ -20,11 +20,11 @@
"jsdelivr": "event-calendar.min.js",
"style": "event-calendar.min.css",
"devDependencies": {
- "@event-calendar/day-grid": "~3.1.0",
- "@event-calendar/interaction": "~3.1.0",
- "@event-calendar/list": "~3.1.0",
- "@event-calendar/time-grid": "~3.1.0",
- "@event-calendar/resource-time-grid": "~3.1.0",
- "@event-calendar/resource-timeline": "~3.1.0"
+ "@event-calendar/day-grid": "~3.2.0",
+ "@event-calendar/interaction": "~3.2.0",
+ "@event-calendar/list": "~3.2.0",
+ "@event-calendar/time-grid": "~3.2.0",
+ "@event-calendar/resource-time-grid": "~3.2.0",
+ "@event-calendar/resource-timeline": "~3.2.0"
}
}
\ No newline at end of file
diff --git a/packages/core/README.md b/packages/core/README.md
index 32b0ba0..3fc5a81 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
Full-sized drag & drop JavaScript event calendar with resource & timeline views:
-* Lightweight (39kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
+* Lightweight (35kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
* Zero-dependency (pre-built bundle)
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
@@ -204,8 +204,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
-
-
+
+
```
@@ -363,9 +363,12 @@ Each `customButton` entry accepts the following properties:
|
-`text `
+`text`
+ |
+
+
+The text to be display on the button itself. See [Content](#content)
|
-The text to be display on the button itself |
|
@@ -374,6 +377,16 @@ Each `customButton` entry accepts the following properties:
|
A callback function that is called when the button is clicked. Accepts one argument mouseEvent |
+
+|
+
+`active`
+ |
+
+
+If `true`, the button will appear pressed/active
+ |
+
### date
@@ -2743,7 +2756,7 @@ Here are all properties that exist in Resource object:
-The title of the resource. See [Content](#content).
+The title of the resource. See [Content](#content)
|
diff --git a/packages/core/package.json b/packages/core/package.json
index c672eb6..f9b8fac 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/core",
- "version": "3.1.0",
+ "version": "3.2.0",
"title": "Event Calendar Core package",
"description": "Full-sized drag & drop event calendar with resource & timeline views",
"keywords": [
diff --git a/packages/core/src/Buttons.svelte b/packages/core/src/Buttons.svelte
index 7bbcdbc..0c147d5 100644
--- a/packages/core/src/Buttons.svelte
+++ b/packages/core/src/Buttons.svelte
@@ -45,9 +45,10 @@
>{$buttonText[button]}
{:else if $customButtons[button]}
+ use:setContent={$customButtons[button].text}
+ >
{:else if button != ''}
diff --git a/packages/day-grid/package.json b/packages/day-grid/package.json
index 4f6b303..77550a6 100644
--- a/packages/day-grid/package.json
+++ b/packages/day-grid/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/day-grid",
- "version": "3.1.0",
+ "version": "3.2.0",
"title": "Event Calendar DayGrid plugin",
"description": "Full-sized drag & drop event calendar with resource & timeline views",
"keywords": [
@@ -27,7 +27,7 @@
"./package.json": "./package.json"
},
"dependencies": {
- "@event-calendar/core": "~3.1.0",
+ "@event-calendar/core": "~3.2.0",
"svelte": "^4.2.16"
}
}
\ No newline at end of file
diff --git a/packages/day-grid/src/Event.svelte b/packages/day-grid/src/Event.svelte
index 87ba0ff..e0fef1b 100644
--- a/packages/day-grid/src/Event.svelte
+++ b/packages/day-grid/src/Event.svelte
@@ -11,9 +11,12 @@
toViewWithLocalDates,
setContent,
repositionEvent,
+ resourceBackgroundColor,
+ resourceTextColor,
helperEvent,
keyEnter,
- task, rect
+ task,
+ rect
} from '@event-calendar/core';
export let chunk;
@@ -22,9 +25,8 @@
export let dates = [];
let {dayMaxEvents, displayEventEnd, eventAllUpdated, eventBackgroundColor, eventTextColor, eventClick, eventColor,
- eventContent, eventClassNames, eventDidMount, eventMouseEnter, eventMouseLeave, theme,
- _view, _intlEventTime, _interaction, _iClasses, _resBgColor, _resTxtColor, _hiddenEvents, _popupDate,
- _tasks} = getContext('state');
+ eventContent, eventClassNames, eventDidMount, eventMouseEnter, eventMouseLeave, resources, theme,
+ _view, _intlEventTime, _interaction, _iClasses, _hiddenEvents, _popupDate, _tasks} = getContext('state');
let el;
let event;
@@ -43,8 +45,8 @@
display = event.display;
// Class & Style
- let bgColor = event.backgroundColor || $_resBgColor(event) || $eventBackgroundColor || $eventColor;
- let txtColor = event.textColor || $_resTxtColor(event) || $eventTextColor;
+ let bgColor = event.backgroundColor || resourceBackgroundColor(event, $resources) || $eventBackgroundColor || $eventColor;
+ let txtColor = event.textColor || resourceTextColor(event, $resources) || $eventTextColor;
let marginTop = margin;
if (event._margin) {
// Force margin for helper events
diff --git a/packages/interaction/README.md b/packages/interaction/README.md
index 32b0ba0..3fc5a81 100644
--- a/packages/interaction/README.md
+++ b/packages/interaction/README.md
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
Full-sized drag & drop JavaScript event calendar with resource & timeline views:
-* Lightweight (39kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
+* Lightweight (35kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
* Zero-dependency (pre-built bundle)
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
@@ -204,8 +204,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
-
-
+
+
```
@@ -363,9 +363,12 @@ Each `customButton` entry accepts the following properties:
|
-`text `
+`text`
+ |
+
+
+The text to be display on the button itself. See [Content](#content)
|
-The text to be display on the button itself |
|
@@ -374,6 +377,16 @@ Each `customButton` entry accepts the following properties:
|
A callback function that is called when the button is clicked. Accepts one argument mouseEvent |
+
+|
+
+`active`
+ |
+
+
+If `true`, the button will appear pressed/active
+ |
+
### date
@@ -2743,7 +2756,7 @@ Here are all properties that exist in Resource object:
-The title of the resource. See [Content](#content).
+The title of the resource. See [Content](#content)
|
diff --git a/packages/interaction/package.json b/packages/interaction/package.json
index cc30292..90a418d 100644
--- a/packages/interaction/package.json
+++ b/packages/interaction/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/interaction",
- "version": "3.1.0",
+ "version": "3.2.0",
"title": "Event Calendar Interaction plugin",
"description": "Full-sized drag & drop event calendar with resource & timeline views",
"keywords": [
@@ -27,7 +27,7 @@
"./package.json": "./package.json"
},
"dependencies": {
- "@event-calendar/core": "~3.1.0",
+ "@event-calendar/core": "~3.2.0",
"svelte": "^4.2.16"
}
}
\ No newline at end of file
diff --git a/packages/list/README.md b/packages/list/README.md
index 32b0ba0..3fc5a81 100644
--- a/packages/list/README.md
+++ b/packages/list/README.md
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
Full-sized drag & drop JavaScript event calendar with resource & timeline views:
-* Lightweight (39kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
+* Lightweight (35kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
* Zero-dependency (pre-built bundle)
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
@@ -204,8 +204,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
-
-
+
+
```
@@ -363,9 +363,12 @@ Each `customButton` entry accepts the following properties:
|
-`text `
+`text`
+ |
+
+
+The text to be display on the button itself. See [Content](#content)
|
-The text to be display on the button itself |
|
@@ -374,6 +377,16 @@ Each `customButton` entry accepts the following properties:
|
A callback function that is called when the button is clicked. Accepts one argument mouseEvent |
+
+|
+
+`active`
+ |
+
+
+If `true`, the button will appear pressed/active
+ |
+
### date
@@ -2743,7 +2756,7 @@ Here are all properties that exist in Resource object:
-The title of the resource. See [Content](#content).
+The title of the resource. See [Content](#content)
|
diff --git a/packages/list/package.json b/packages/list/package.json
index 7078e25..918ce0e 100644
--- a/packages/list/package.json
+++ b/packages/list/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/list",
- "version": "3.1.0",
+ "version": "3.2.0",
"title": "Event Calendar List plugin",
"description": "Full-sized drag & drop event calendar with resource & timeline views",
"keywords": [
@@ -27,7 +27,7 @@
"./package.json": "./package.json"
},
"dependencies": {
- "@event-calendar/core": "~3.1.0",
+ "@event-calendar/core": "~3.2.0",
"svelte": "^4.2.16"
}
}
\ No newline at end of file
diff --git a/packages/list/src/Event.svelte b/packages/list/src/Event.svelte
index 02c06ff..52dae55 100644
--- a/packages/list/src/Event.svelte
+++ b/packages/list/src/Event.svelte
@@ -8,14 +8,16 @@
setContent,
createEventClasses,
keyEnter,
+ resourceBackgroundColor,
+ resourceTextColor,
task
} from '@event-calendar/core';
export let chunk;
let {displayEventEnd, eventAllUpdated, eventBackgroundColor, eventTextColor, eventColor, eventContent,
- eventClassNames, eventClick, eventDidMount, eventMouseEnter, eventMouseLeave, theme,
- _view, _intlEventTime, _resBgColor, _resTxtColor, _interaction, _tasks} = getContext('state');
+ eventClassNames, eventClick, eventDidMount, eventMouseEnter, eventMouseLeave, resources, theme,
+ _view, _intlEventTime, _interaction, _tasks} = getContext('state');
let el;
let event;
@@ -30,11 +32,11 @@
$: {
// Class & Style
style = '';
- let bgColor = event.backgroundColor || $_resBgColor(event) || $eventBackgroundColor || $eventColor;
+ let bgColor = event.backgroundColor || resourceBackgroundColor(event, $resources) || $eventBackgroundColor || $eventColor;
if (bgColor) {
style = `background-color:${bgColor};`;
}
- let txtColor = event.textColor || $_resTxtColor(event) || $eventTextColor;
+ let txtColor = event.textColor || resourceTextColor(event, $resources) || $eventTextColor;
if (txtColor) {
style += `color:${txtColor};`;
}
diff --git a/packages/resource-time-grid/README.md b/packages/resource-time-grid/README.md
index 32b0ba0..3fc5a81 100644
--- a/packages/resource-time-grid/README.md
+++ b/packages/resource-time-grid/README.md
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
Full-sized drag & drop JavaScript event calendar with resource & timeline views:
-* Lightweight (39kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
+* Lightweight (35kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
* Zero-dependency (pre-built bundle)
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
@@ -204,8 +204,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
-
-
+
+
```
@@ -363,9 +363,12 @@ Each `customButton` entry accepts the following properties:
|
-`text `
+`text`
+ |
+
+
+The text to be display on the button itself. See [Content](#content)
|
-The text to be display on the button itself |
|
@@ -374,6 +377,16 @@ Each `customButton` entry accepts the following properties:
|
A callback function that is called when the button is clicked. Accepts one argument mouseEvent |
+
+|
+
+`active`
+ |
+
+
+If `true`, the button will appear pressed/active
+ |
+
### date
@@ -2743,7 +2756,7 @@ Here are all properties that exist in Resource object:
-The title of the resource. See [Content](#content).
+The title of the resource. See [Content](#content)
|
diff --git a/packages/resource-time-grid/package.json b/packages/resource-time-grid/package.json
index 86be33d..8d721df 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": "3.1.0",
+ "version": "3.2.0",
"title": "Event Calendar ResourceTimeGrid plugin",
"description": "Full-sized drag & drop event calendar with resource & timeline views",
"keywords": [
@@ -27,8 +27,8 @@
"./package.json": "./package.json"
},
"dependencies": {
- "@event-calendar/core": "~3.1.0",
- "@event-calendar/time-grid": "~3.1.0",
+ "@event-calendar/core": "~3.2.0",
+ "@event-calendar/time-grid": "~3.2.0",
"svelte": "^4.2.16"
}
}
\ No newline at end of file
diff --git a/packages/resource-time-grid/src/Auxiliary.svelte b/packages/resource-time-grid/src/Auxiliary.svelte
deleted file mode 100644
index a1cae2d..0000000
--- a/packages/resource-time-grid/src/Auxiliary.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-
diff --git a/packages/resource-time-grid/src/index.js b/packages/resource-time-grid/src/index.js
index 6068888..b29846e 100644
--- a/packages/resource-time-grid/src/index.js
+++ b/packages/resource-time-grid/src/index.js
@@ -1,7 +1,6 @@
import {btnTextDay, btnTextWeek, themeView, viewResources} from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
import View from './View.svelte';
-import Auxiliary from './Auxiliary.svelte';
export default {
createOptions(options) {
@@ -28,7 +27,6 @@ export default {
if (!('_times' in state)) {
TimeGrid.createStores(state);
}
- state._auxiliary.update($_auxiliary => [...$_auxiliary, Auxiliary]);
if (!('_viewResources' in state)) {
state._viewResources = viewResources(state);
}
diff --git a/packages/resource-timeline/README.md b/packages/resource-timeline/README.md
index 32b0ba0..3fc5a81 100644
--- a/packages/resource-timeline/README.md
+++ b/packages/resource-timeline/README.md
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
Full-sized drag & drop JavaScript event calendar with resource & timeline views:
-* Lightweight (39kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
+* Lightweight (35kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
* Zero-dependency (pre-built bundle)
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
@@ -204,8 +204,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
-
-
+
+
```
@@ -363,9 +363,12 @@ Each `customButton` entry accepts the following properties:
|
-`text `
+`text`
+ |
+
+
+The text to be display on the button itself. See [Content](#content)
|
-The text to be display on the button itself |
|
@@ -374,6 +377,16 @@ Each `customButton` entry accepts the following properties:
|
A callback function that is called when the button is clicked. Accepts one argument mouseEvent |
+
+|
+
+`active`
+ |
+
+
+If `true`, the button will appear pressed/active
+ |
+
### date
@@ -2743,7 +2756,7 @@ Here are all properties that exist in Resource object:
-The title of the resource. See [Content](#content).
+The title of the resource. See [Content](#content)
|
diff --git a/packages/resource-timeline/package.json b/packages/resource-timeline/package.json
index 13d41c5..9cabf74 100644
--- a/packages/resource-timeline/package.json
+++ b/packages/resource-timeline/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/resource-timeline",
- "version": "3.1.0",
+ "version": "3.2.0",
"title": "Event Calendar ResourceTimeline plugin",
"description": "Full-sized drag & drop event calendar with resource & timeline views",
"keywords": [
@@ -27,7 +27,7 @@
"./package.json": "./package.json"
},
"dependencies": {
- "@event-calendar/core": "~3.1.0",
+ "@event-calendar/core": "~3.2.0",
"svelte": "^4.2.16"
}
}
\ No newline at end of file
diff --git a/packages/resource-timeline/src/Body.svelte b/packages/resource-timeline/src/Body.svelte
index e2dea4c..294520e 100644
--- a/packages/resource-timeline/src/Body.svelte
+++ b/packages/resource-timeline/src/Body.svelte
@@ -1,6 +1,7 @@
diff --git a/packages/resource-timeline/src/Day.svelte b/packages/resource-timeline/src/Day.svelte
index 10e49b7..dd7f96c 100644
--- a/packages/resource-timeline/src/Day.svelte
+++ b/packages/resource-timeline/src/Day.svelte
@@ -12,6 +12,7 @@
toSeconds,
runReposition
} from '@event-calendar/core';
+ import {getSlotTimeLimits} from './lib.js';
import Event from './Event.svelte';
export let date;
@@ -32,7 +33,7 @@
let start, end;
$: {
- slotTimeLimits = $_dayTimeLimits[date.getTime()];
+ slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, date);
start = addDuration(cloneDate(date), slotTimeLimits.min);
end = addDuration(cloneDate(date), slotTimeLimits.max);
}
diff --git a/packages/resource-timeline/src/Event.svelte b/packages/resource-timeline/src/Event.svelte
index e5ab8a7..f4d7f89 100644
--- a/packages/resource-timeline/src/Event.svelte
+++ b/packages/resource-timeline/src/Event.svelte
@@ -10,9 +10,11 @@
bgEvent,
helperEvent,
keyEnter,
+ resourceBackgroundColor,
+ resourceTextColor,
task, height, DAY_IN_SECONDS, toSeconds
} from '@event-calendar/core';
- import {repositionEvent} from './lib.js';
+ import {repositionEvent, getSlotTimeLimits} from './lib.js';
export let date;
export let chunk;
@@ -21,8 +23,8 @@
export let resource = undefined;
let {displayEventEnd, eventAllUpdated, eventBackgroundColor, eventTextColor,eventColor, eventContent, eventClick,
- eventDidMount, eventClassNames, eventMouseEnter, eventMouseLeave, slotDuration, slotWidth, theme,
- _view, _intlEventTime, _interaction, _iClasses, _resBgColor, _resTxtColor, _dayTimeLimits, _tasks} = getContext('state');
+ eventDidMount, eventClassNames, eventMouseEnter, eventMouseLeave, resources, slotDuration, slotWidth, theme,
+ _view, _intlEventTime, _interaction, _iClasses, _dayTimeLimits, _tasks} = getContext('state');
let el;
let event;
@@ -45,16 +47,16 @@
let start = (chunk.start - date) / 1000;
let end = (chunk.end - date) / 1000;
// Shift start
- start -= toSeconds($_dayTimeLimits[date.getTime()]?.min);
+ start -= toSeconds(getSlotTimeLimits($_dayTimeLimits, date).min);
if (start < 0) {
start = 0;
}
// Shift end
let cut = 0;
for (let i = 0; i < chunk.days; ++i) {
- let slotTimeLimits = $_dayTimeLimits[chunk.dates[i].getTime()];
- let offsetStart = toSeconds(slotTimeLimits?.min);
- let offsetEnd = toSeconds(slotTimeLimits?.max, DAY_IN_SECONDS);
+ let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, chunk.dates[i]);
+ let offsetStart = toSeconds(slotTimeLimits.min);
+ let offsetEnd = toSeconds(slotTimeLimits.max);
let dayStart = DAY_IN_SECONDS * i;
// Cut offsetEnd
let dayEnd = dayStart + DAY_IN_SECONDS;
@@ -83,8 +85,8 @@
`width:${chunk.days * 100}%;`
;
}
- let bgColor = event.backgroundColor || $_resBgColor(event) || $eventBackgroundColor || $eventColor;
- let txtColor = event.textColor || $_resTxtColor(event) || $eventTextColor;
+ let bgColor = event.backgroundColor || resourceBackgroundColor(event, $resources) || $eventBackgroundColor || $eventColor;
+ let txtColor = event.textColor || resourceTextColor(event, $resources) || $eventTextColor;
let marginTop = margin;
if (event._margin) {
// Force margin for helper events
diff --git a/packages/resource-timeline/src/lib.js b/packages/resource-timeline/src/lib.js
index 368f9dc..5e719c5 100644
--- a/packages/resource-timeline/src/lib.js
+++ b/packages/resource-timeline/src/lib.js
@@ -1,3 +1,5 @@
+import {createDuration} from '@event-calendar/core';
+
export function repositionEvent(chunk, dayChunks, longChunks, height, allDay) {
chunk.top = 0;
chunk.bottom = height;
@@ -20,3 +22,7 @@ export function repositionEvent(chunk, dayChunks, longChunks, height, allDay) {
return margin;
}
+
+export function getSlotTimeLimits($_dayTimeLimits, date) {
+ return $_dayTimeLimits[date.getTime()] ?? {min: createDuration(0), max: createDuration(0)};
+}
diff --git a/packages/time-grid/README.md b/packages/time-grid/README.md
index 32b0ba0..3fc5a81 100644
--- a/packages/time-grid/README.md
+++ b/packages/time-grid/README.md
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
Full-sized drag & drop JavaScript event calendar with resource & timeline views:
-* Lightweight (39kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
+* Lightweight (35kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
* Zero-dependency (pre-built bundle)
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
@@ -204,8 +204,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
-
-
+
+
```
@@ -363,9 +363,12 @@ Each `customButton` entry accepts the following properties:
|
-`text `
+`text`
+ |
+
+
+The text to be display on the button itself. See [Content](#content)
|
-The text to be display on the button itself |
|
@@ -374,6 +377,16 @@ Each `customButton` entry accepts the following properties:
|
A callback function that is called when the button is clicked. Accepts one argument mouseEvent |
+
+|
+
+`active`
+ |
+
+
+If `true`, the button will appear pressed/active
+ |
+
### date
@@ -2743,7 +2756,7 @@ Here are all properties that exist in Resource object:
-The title of the resource. See [Content](#content).
+The title of the resource. See [Content](#content)
|
diff --git a/packages/time-grid/package.json b/packages/time-grid/package.json
index f0b2def..13ceac7 100644
--- a/packages/time-grid/package.json
+++ b/packages/time-grid/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/time-grid",
- "version": "3.1.0",
+ "version": "3.2.0",
"title": "Event Calendar TimeGrid plugin",
"description": "Full-sized drag & drop event calendar with resource & timeline views",
"keywords": [
@@ -27,7 +27,7 @@
"./package.json": "./package.json"
},
"dependencies": {
- "@event-calendar/core": "~3.1.0",
+ "@event-calendar/core": "~3.2.0",
"svelte": "^4.2.16"
}
}
\ No newline at end of file
diff --git a/packages/time-grid/src/Event.svelte b/packages/time-grid/src/Event.svelte
index 6c8d8b7..4296f78 100644
--- a/packages/time-grid/src/Event.svelte
+++ b/packages/time-grid/src/Event.svelte
@@ -11,15 +11,18 @@
helperEvent,
ghostEvent,
keyEnter,
+ resourceBackgroundColor,
+ resourceTextColor,
task
} from '@event-calendar/core';
export let date;
export let chunk;
- let {displayEventEnd, eventAllUpdated, eventBackgroundColor, eventTextColor,eventColor, eventContent, eventClick,
- eventDidMount, eventClassNames, eventMouseEnter, eventMouseLeave, slotEventOverlap, slotDuration, slotHeight, theme,
- _view, _intlEventTime, _interaction, _iClasses, _resBgColor, _resTxtColor, _slotTimeLimits, _tasks} = getContext('state');
+ let {displayEventEnd, eventAllUpdated, eventBackgroundColor, eventTextColor, eventColor, eventContent, eventClick,
+ eventDidMount, eventClassNames, eventMouseEnter, eventMouseLeave, slotEventOverlap, slotDuration, slotHeight,
+ resources, theme,
+ _view, _intlEventTime, _interaction, _iClasses, _slotTimeLimits, _tasks} = getContext('state');
let el;
let event;
@@ -43,8 +46,8 @@
let top = (start - offset) / step * $slotHeight;
let height = (end - start) / step * $slotHeight;
let maxHeight = ($_slotTimeLimits.max.seconds - start) / step * $slotHeight;
- let bgColor = event.backgroundColor || $_resBgColor(event) || $eventBackgroundColor || $eventColor;
- let txtColor = event.textColor || $_resTxtColor(event) || $eventTextColor;
+ let bgColor = event.backgroundColor || resourceBackgroundColor(event, $resources) || $eventBackgroundColor || $eventColor;
+ let txtColor = event.textColor || resourceTextColor(event, $resources) || $eventTextColor;
style =
`top:${top}px;` +
`min-height:${height}px;` +
diff --git a/packages/time-grid/src/all-day/Event.svelte b/packages/time-grid/src/all-day/Event.svelte
index 1a2c476..797db19 100644
--- a/packages/time-grid/src/all-day/Event.svelte
+++ b/packages/time-grid/src/all-day/Event.svelte
@@ -9,6 +9,8 @@
toViewWithLocalDates,
setContent,
repositionEvent,
+ resourceBackgroundColor,
+ resourceTextColor,
helperEvent,
keyEnter,
task, rect, ancestor
@@ -18,8 +20,8 @@
export let longChunks = {};
let {displayEventEnd, eventAllUpdated, eventBackgroundColor, eventTextColor, eventClick, eventColor, eventContent,
- eventClassNames, eventDidMount, eventMouseEnter, eventMouseLeave, theme,
- _view, _intlEventTime, _interaction, _iClasses, _resBgColor, _resTxtColor, _tasks} = getContext('state');
+ eventClassNames, eventDidMount, eventMouseEnter, eventMouseLeave, resources, theme,
+ _view, _intlEventTime, _interaction, _iClasses, _tasks} = getContext('state');
let el;
let event;
@@ -37,8 +39,8 @@
display = event.display;
// Class & Style
- let bgColor = event.backgroundColor || $_resBgColor(event) || $eventBackgroundColor || $eventColor;
- let txtColor = event.textColor || $_resTxtColor(event) || $eventTextColor;
+ let bgColor = event.backgroundColor || resourceBackgroundColor(event, $resources) || $eventBackgroundColor || $eventColor;
+ let txtColor = event.textColor || resourceTextColor(event, $resources) || $eventTextColor;
style =
`width:calc(${chunk.days * 100}% + ${(chunk.days - 1) * 7}px);` +
`margin-top:${event._margin ?? margin}px;`