+ - [noEventsClick](#noeventsclick)
- [noEventsContent](#noeventscontent)
- [nowIndicator](#nowindicator)
- [pointer](#pointer)
@@ -199,8 +200,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
-
-
+
+
```
@@ -321,6 +322,54 @@ function (text) {
+### customButtons
+- Type `object`
+- Default `undefined`
+
+Defines custom buttons that can be used in the [headerToolbar](#headertoolbar).
+
+First, specify the custom buttons as key-value pairs. Then reference them from the `headerToolbar` option.
+
+
+ Example
+
+```js
+let options = {
+ customButtons: {
+ myCustomButton: {
+ text: 'custom!',
+ click: function() {
+ alert('clicked the custom button!');
+ }
+ }
+ },
+ headerToolbar: {
+ start: 'title myCustomButton',
+ center: '',
+ end: 'today prev,next'
+ }
+};
+```
+
+
+Each `customButton` entry accepts the following properties:
+
+
+
+
+`text `
+
+
The text to be display on the button itself
+
+
+
+
+`click`
+
+
A callback function that is called when the button is clicked. Accepts one argument mouseEvent
+
+
+
### date
- Type `Date` or `string`
- Default `new Date()`
@@ -1288,7 +1337,7 @@ This option is used instead of the `events` option.
-A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data
+A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data:
+### customButtons
+- Type `object`
+- Default `undefined`
+
+Defines custom buttons that can be used in the [headerToolbar](#headertoolbar).
+
+First, specify the custom buttons as key-value pairs. Then reference them from the `headerToolbar` option.
+
+
+ Example
+
+```js
+let options = {
+ customButtons: {
+ myCustomButton: {
+ text: 'custom!',
+ click: function() {
+ alert('clicked the custom button!');
+ }
+ }
+ },
+ headerToolbar: {
+ start: 'title myCustomButton',
+ center: '',
+ end: 'today prev,next'
+ }
+};
+```
+
+
+Each `customButton` entry accepts the following properties:
+
+
+
+
+`text `
+
+
The text to be display on the button itself
+
+
+
+
+`click`
+
+
A callback function that is called when the button is clicked. Accepts one argument mouseEvent
+
+
+
### date
- Type `Date` or `string`
- Default `new Date()`
@@ -1288,7 +1337,7 @@ This option is used instead of the `events` option.
-A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data
+A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data:
+ - [noEventsClick](#noeventsclick)
- [noEventsContent](#noeventscontent)
- [nowIndicator](#nowindicator)
- [pointer](#pointer)
@@ -199,8 +200,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
-
-
+
+
```
@@ -321,6 +322,54 @@ function (text) {
+### customButtons
+- Type `object`
+- Default `undefined`
+
+Defines custom buttons that can be used in the [headerToolbar](#headertoolbar).
+
+First, specify the custom buttons as key-value pairs. Then reference them from the `headerToolbar` option.
+
+
+ Example
+
+```js
+let options = {
+ customButtons: {
+ myCustomButton: {
+ text: 'custom!',
+ click: function() {
+ alert('clicked the custom button!');
+ }
+ }
+ },
+ headerToolbar: {
+ start: 'title myCustomButton',
+ center: '',
+ end: 'today prev,next'
+ }
+};
+```
+
+
+Each `customButton` entry accepts the following properties:
+
+
+
+
+`text `
+
+
The text to be display on the button itself
+
+
+
+
+`click`
+
+
A callback function that is called when the button is clicked. Accepts one argument mouseEvent
+
+
+
### date
- Type `Date` or `string`
- Default `new Date()`
@@ -1288,7 +1337,7 @@ This option is used instead of the `events` option.
-A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data
+A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data:
diff --git a/packages/core/package.json b/packages/core/package.json
index 8294dcb..9677388 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/core",
- "version": "2.6.1",
+ "version": "2.7.0",
"title": "Event Calendar Core package",
"description": "Full-sized drag & drop event calendar with resource view",
"keywords": [
@@ -27,6 +27,6 @@
"./package.json": "./package.json"
},
"dependencies": {
- "svelte": "^4.2.8"
+ "svelte": "^4.2.16"
}
}
\ No newline at end of file
diff --git a/packages/core/src/Buttons.svelte b/packages/core/src/Buttons.svelte
index 566b3f8..6dd2051 100644
--- a/packages/core/src/Buttons.svelte
+++ b/packages/core/src/Buttons.svelte
@@ -4,7 +4,7 @@
export let buttons;
- let {_currentRange, _viewTitle, buttonText, date, duration, hiddenDays, theme, view} = getContext('state');
+ let {_currentRange, _viewTitle, buttonText, customButtons, date, duration, hiddenDays, theme, view} = getContext('state');
let today = setMidnight(createDate()), isToday;
@@ -49,6 +49,11 @@
on:click={() => $date = cloneDate(today)}
disabled={isToday}
>{$buttonText[button]}
+ {:else if $customButtons[button]}
+
{:else if button != ''}
+### customButtons
+- Type `object`
+- Default `undefined`
+
+Defines custom buttons that can be used in the [headerToolbar](#headertoolbar).
+
+First, specify the custom buttons as key-value pairs. Then reference them from the `headerToolbar` option.
+
+
+ Example
+
+```js
+let options = {
+ customButtons: {
+ myCustomButton: {
+ text: 'custom!',
+ click: function() {
+ alert('clicked the custom button!');
+ }
+ }
+ },
+ headerToolbar: {
+ start: 'title myCustomButton',
+ center: '',
+ end: 'today prev,next'
+ }
+};
+```
+
+
+Each `customButton` entry accepts the following properties:
+
+
+
+
+`text `
+
+
The text to be display on the button itself
+
+
+
+
+`click`
+
+
A callback function that is called when the button is clicked. Accepts one argument mouseEvent
+
+
+
### date
- Type `Date` or `string`
- Default `new Date()`
@@ -1288,7 +1337,7 @@ This option is used instead of the `events` option.
-A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data
+A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data:
+ - [noEventsClick](#noeventsclick)
- [noEventsContent](#noeventscontent)
- [nowIndicator](#nowindicator)
- [pointer](#pointer)
@@ -199,8 +200,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
-
-
+
+
```
@@ -321,6 +322,54 @@ function (text) {
+### customButtons
+- Type `object`
+- Default `undefined`
+
+Defines custom buttons that can be used in the [headerToolbar](#headertoolbar).
+
+First, specify the custom buttons as key-value pairs. Then reference them from the `headerToolbar` option.
+
+
+ Example
+
+```js
+let options = {
+ customButtons: {
+ myCustomButton: {
+ text: 'custom!',
+ click: function() {
+ alert('clicked the custom button!');
+ }
+ }
+ },
+ headerToolbar: {
+ start: 'title myCustomButton',
+ center: '',
+ end: 'today prev,next'
+ }
+};
+```
+
+
+Each `customButton` entry accepts the following properties:
+
+
+
+
+`text `
+
+
The text to be display on the button itself
+
+
+
+
+`click`
+
+
A callback function that is called when the button is clicked. Accepts one argument mouseEvent
+
+
+
### date
- Type `Date` or `string`
- Default `new Date()`
@@ -1288,7 +1337,7 @@ This option is used instead of the `events` option.
-A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data
+A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data:
+ - [noEventsClick](#noeventsclick)
- [noEventsContent](#noeventscontent)
- [nowIndicator](#nowindicator)
- [pointer](#pointer)
@@ -199,8 +200,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
-
-
+
+
```
@@ -321,6 +322,54 @@ function (text) {
+### customButtons
+- Type `object`
+- Default `undefined`
+
+Defines custom buttons that can be used in the [headerToolbar](#headertoolbar).
+
+First, specify the custom buttons as key-value pairs. Then reference them from the `headerToolbar` option.
+
+
+ Example
+
+```js
+let options = {
+ customButtons: {
+ myCustomButton: {
+ text: 'custom!',
+ click: function() {
+ alert('clicked the custom button!');
+ }
+ }
+ },
+ headerToolbar: {
+ start: 'title myCustomButton',
+ center: '',
+ end: 'today prev,next'
+ }
+};
+```
+
+
+Each `customButton` entry accepts the following properties:
+
+
+
+
+`text `
+
+
The text to be display on the button itself
+
+
+
+
+`click`
+
+
A callback function that is called when the button is clicked. Accepts one argument mouseEvent
+
+
+
### date
- Type `Date` or `string`
- Default `new Date()`
@@ -1288,7 +1337,7 @@ This option is used instead of the `events` option.
-A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data
+A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data:
diff --git a/packages/list/package.json b/packages/list/package.json
index 66b678a..abe162d 100644
--- a/packages/list/package.json
+++ b/packages/list/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/list",
- "version": "2.6.1",
+ "version": "2.7.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.6.1",
- "svelte": "^4.2.8"
+ "@event-calendar/core": "~2.7.0",
+ "svelte": "^4.2.16"
}
}
\ No newline at end of file
diff --git a/packages/resource-time-grid/README.md b/packages/resource-time-grid/README.md
index 5c15ba7..828b495 100644
--- a/packages/resource-time-grid/README.md
+++ b/packages/resource-time-grid/README.md
@@ -22,6 +22,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
- [allDayContent](#alldaycontent)
- [allDaySlot](#alldayslot)
- [buttonText](#buttontext)
+ - [customButtons](#custombuttons)
- [date](#date)
- [dateClick](#dateclick)
- [datesAboveResources](#datesaboveresources)
@@ -45,9 +46,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
- [eventDidMount](#eventdidmount)
- [eventDragMinDistance](#eventdragmindistance)
- [eventDragStart](#eventdragstart)
- - [eventDragStop](#eventdragstop)
+ - [noEventsClick](#noeventsclick)
- [noEventsContent](#noeventscontent)
- [nowIndicator](#nowindicator)
- [pointer](#pointer)
@@ -199,8 +200,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
-
-
+
+
```
@@ -321,6 +322,54 @@ function (text) {
+### customButtons
+- Type `object`
+- Default `undefined`
+
+Defines custom buttons that can be used in the [headerToolbar](#headertoolbar).
+
+First, specify the custom buttons as key-value pairs. Then reference them from the `headerToolbar` option.
+
+
+ Example
+
+```js
+let options = {
+ customButtons: {
+ myCustomButton: {
+ text: 'custom!',
+ click: function() {
+ alert('clicked the custom button!');
+ }
+ }
+ },
+ headerToolbar: {
+ start: 'title myCustomButton',
+ center: '',
+ end: 'today prev,next'
+ }
+};
+```
+
+
+Each `customButton` entry accepts the following properties:
+
+
+
+
+`text `
+
+
The text to be display on the button itself
+
+
+
+
+`click`
+
+
A callback function that is called when the button is clicked. Accepts one argument mouseEvent
+
+
+
### date
- Type `Date` or `string`
- Default `new Date()`
@@ -1288,7 +1337,7 @@ This option is used instead of the `events` option.
-A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data
+A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data:
+ - [noEventsClick](#noeventsclick)
- [noEventsContent](#noeventscontent)
- [nowIndicator](#nowindicator)
- [pointer](#pointer)
@@ -199,8 +200,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
-
-
+
+
```
@@ -321,6 +322,54 @@ function (text) {
+### customButtons
+- Type `object`
+- Default `undefined`
+
+Defines custom buttons that can be used in the [headerToolbar](#headertoolbar).
+
+First, specify the custom buttons as key-value pairs. Then reference them from the `headerToolbar` option.
+
+
+ Example
+
+```js
+let options = {
+ customButtons: {
+ myCustomButton: {
+ text: 'custom!',
+ click: function() {
+ alert('clicked the custom button!');
+ }
+ }
+ },
+ headerToolbar: {
+ start: 'title myCustomButton',
+ center: '',
+ end: 'today prev,next'
+ }
+};
+```
+
+
+Each `customButton` entry accepts the following properties:
+
+
+
+
+`text `
+
+
The text to be display on the button itself
+
+
+
+
+`click`
+
+
A callback function that is called when the button is clicked. Accepts one argument mouseEvent
+
+
+
### date
- Type `Date` or `string`
- Default `new Date()`
@@ -1288,7 +1337,7 @@ This option is used instead of the `events` option.
-A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data
+A URL that the calendar will fetch [Event](#event-object) objects from. HTTP requests with the following parameters will be sent to this URL whenever the calendar needs new event data: