From 54316bd4a71fe0db5097ae530f5162824a6ab9d0 Mon Sep 17 00:00:00 2001
From: Vladimir <1073174+vkurko@users.noreply.github.com>
Date: Tue, 1 Oct 2024 10:17:07 +0300
Subject: [PATCH] v3.6.0 Fixed some issues in Svelte 5 destroy() is no longer
available in Svelte version
---
CHANGELOG.md | 6 +
README.md | 51 ++--
docs/index.html | 4 +-
package-lock.json | 314 +++--------------------
package.json | 18 +-
packages/build/README.md | 51 ++--
packages/build/package.json | 14 +-
packages/build/src/index.js | 4 +
packages/core/README.md | 51 ++--
packages/core/package.json | 2 +-
packages/day-grid/README.md | 51 ++--
packages/day-grid/package.json | 4 +-
packages/interaction/README.md | 51 ++--
packages/interaction/package.json | 4 +-
packages/list/README.md | 51 ++--
packages/list/package.json | 4 +-
packages/resource-time-grid/README.md | 51 ++--
packages/resource-time-grid/package.json | 6 +-
packages/resource-timeline/README.md | 51 ++--
packages/resource-timeline/package.json | 4 +-
packages/time-grid/README.md | 51 ++--
packages/time-grid/package.json | 4 +-
22 files changed, 307 insertions(+), 540 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index e0436b9..0ad4930 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
# Event Calendar changelog
+## 3.6.0
+October 1, 2024
+
+* Fixed some issues in Svelte 5 ([235](https://github.com/vkurko/calendar/issues/235))
+* :warning: `destroy()` is no longer available in Svelte version
+
## 3.5.0
September 20, 2024
diff --git a/README.md b/README.md
index f6c9b30..25ba01b 100644
--- a/README.md
+++ b/README.md
@@ -144,7 +144,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
- [Browser support](#browser-support)
## Usage
-### Svelte component / ES6 module
+### Pure JavaScript / Svelte component
The first step is to install the Event Calendar `core` package:
```bash
npm install --save-dev @event-calendar/core
@@ -162,27 +162,12 @@ You must use at least one plugin that provides a view. The following plugins are
* `@event-calendar/time-grid`
* `@event-calendar/interaction` (doesn't provide a view)
-Then, in your Svelte component, use the calendar something like this:
-```html
-
-
-
-```
-Or in ES6 module:
+Then, in your JavaScript module:
```js
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
+// Import CSS if your build tool supports it
+import '@event-calendar/core/index.css';
let ec = new Calendar({
target: document.getElementById('ec'),
@@ -197,16 +182,29 @@ let ec = new Calendar({
}
});
```
-The CSS is located at `@event-calendar/core/index.css`. If your build tool supports CSS processing, you can import it like this:
-```js
-import '@event-calendar/core/index.css';
+Or in your Svelte component, use the calendar like this:
+```html
+
+
+
```
### Pre-built browser ready bundle
Include the following lines of code in the `
` section of your page:
```html
-
-
+
+
```
@@ -221,7 +219,7 @@ Include the following lines of code in the `` section of your page:
-Then initialize the calendar with something like this:
+Then initialize the calendar like this:
```js
let ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
@@ -2394,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
### destroy()
- Return value `undefined`
+- Not available in Svelte
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
+Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
+
### getView()
- Return value `View`
diff --git a/docs/index.html b/docs/index.html
index c13bfe4..444353f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -12,8 +12,8 @@
-
-
+
+
-
-
-```
-Or in ES6 module:
+Then, in your JavaScript module:
```js
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
+// Import CSS if your build tool supports it
+import '@event-calendar/core/index.css';
let ec = new Calendar({
target: document.getElementById('ec'),
@@ -197,16 +182,29 @@ let ec = new Calendar({
}
});
```
-The CSS is located at `@event-calendar/core/index.css`. If your build tool supports CSS processing, you can import it like this:
-```js
-import '@event-calendar/core/index.css';
+Or in your Svelte component, use the calendar like this:
+```html
+
+
+
```
### Pre-built browser ready bundle
Include the following lines of code in the `` section of your page:
```html
-
-
+
+
```
@@ -221,7 +219,7 @@ Include the following lines of code in the `` section of your page:
-Then initialize the calendar with something like this:
+Then initialize the calendar like this:
```js
let ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
@@ -2394,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
### destroy()
- Return value `undefined`
+- Not available in Svelte
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
+Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
+
### getView()
- Return value `View`
diff --git a/packages/build/package.json b/packages/build/package.json
index 81e9f8e..77c060d 100644
--- a/packages/build/package.json
+++ b/packages/build/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/build",
- "version": "3.5.0",
+ "version": "3.6.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.5.0",
- "@event-calendar/interaction": "~3.5.0",
- "@event-calendar/list": "~3.5.0",
- "@event-calendar/time-grid": "~3.5.0",
- "@event-calendar/resource-time-grid": "~3.5.0",
- "@event-calendar/resource-timeline": "~3.5.0"
+ "@event-calendar/day-grid": "~3.6.0",
+ "@event-calendar/interaction": "~3.6.0",
+ "@event-calendar/list": "~3.6.0",
+ "@event-calendar/time-grid": "~3.6.0",
+ "@event-calendar/resource-time-grid": "~3.6.0",
+ "@event-calendar/resource-timeline": "~3.6.0"
}
}
\ No newline at end of file
diff --git a/packages/build/src/index.js b/packages/build/src/index.js
index 1519138..aba70ef 100644
--- a/packages/build/src/index.js
+++ b/packages/build/src/index.js
@@ -21,4 +21,8 @@ export default class extends Calendar {
get view() {
return this.getView();
}
+
+ destroy() {
+ this.$destroy();
+ }
}
diff --git a/packages/core/README.md b/packages/core/README.md
index f6c9b30..25ba01b 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -144,7 +144,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
- [Browser support](#browser-support)
## Usage
-### Svelte component / ES6 module
+### Pure JavaScript / Svelte component
The first step is to install the Event Calendar `core` package:
```bash
npm install --save-dev @event-calendar/core
@@ -162,27 +162,12 @@ You must use at least one plugin that provides a view. The following plugins are
* `@event-calendar/time-grid`
* `@event-calendar/interaction` (doesn't provide a view)
-Then, in your Svelte component, use the calendar something like this:
-```html
-
-
-
-```
-Or in ES6 module:
+Then, in your JavaScript module:
```js
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
+// Import CSS if your build tool supports it
+import '@event-calendar/core/index.css';
let ec = new Calendar({
target: document.getElementById('ec'),
@@ -197,16 +182,29 @@ let ec = new Calendar({
}
});
```
-The CSS is located at `@event-calendar/core/index.css`. If your build tool supports CSS processing, you can import it like this:
-```js
-import '@event-calendar/core/index.css';
+Or in your Svelte component, use the calendar like this:
+```html
+
+
+
```
### Pre-built browser ready bundle
Include the following lines of code in the `` section of your page:
```html
-
-
+
+
```
@@ -221,7 +219,7 @@ Include the following lines of code in the `` section of your page:
-Then initialize the calendar with something like this:
+Then initialize the calendar like this:
```js
let ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
@@ -2394,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
### destroy()
- Return value `undefined`
+- Not available in Svelte
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
+Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
+
### getView()
- Return value `View`
diff --git a/packages/core/package.json b/packages/core/package.json
index fdbfbb9..43f5aed 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/core",
- "version": "3.5.0",
+ "version": "3.6.0",
"title": "Event Calendar Core package",
"description": "Full-sized drag & drop event calendar with resource & timeline views",
"keywords": [
diff --git a/packages/day-grid/README.md b/packages/day-grid/README.md
index f6c9b30..25ba01b 100644
--- a/packages/day-grid/README.md
+++ b/packages/day-grid/README.md
@@ -144,7 +144,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
- [Browser support](#browser-support)
## Usage
-### Svelte component / ES6 module
+### Pure JavaScript / Svelte component
The first step is to install the Event Calendar `core` package:
```bash
npm install --save-dev @event-calendar/core
@@ -162,27 +162,12 @@ You must use at least one plugin that provides a view. The following plugins are
* `@event-calendar/time-grid`
* `@event-calendar/interaction` (doesn't provide a view)
-Then, in your Svelte component, use the calendar something like this:
-```html
-
-
-
-```
-Or in ES6 module:
+Then, in your JavaScript module:
```js
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
+// Import CSS if your build tool supports it
+import '@event-calendar/core/index.css';
let ec = new Calendar({
target: document.getElementById('ec'),
@@ -197,16 +182,29 @@ let ec = new Calendar({
}
});
```
-The CSS is located at `@event-calendar/core/index.css`. If your build tool supports CSS processing, you can import it like this:
-```js
-import '@event-calendar/core/index.css';
+Or in your Svelte component, use the calendar like this:
+```html
+
+
+
```
### Pre-built browser ready bundle
Include the following lines of code in the `` section of your page:
```html
-
-
+
+
```
@@ -221,7 +219,7 @@ Include the following lines of code in the `` section of your page:
-Then initialize the calendar with something like this:
+Then initialize the calendar like this:
```js
let ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
@@ -2394,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
### destroy()
- Return value `undefined`
+- Not available in Svelte
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
+Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
+
### getView()
- Return value `View`
diff --git a/packages/day-grid/package.json b/packages/day-grid/package.json
index 8337069..d6b576d 100644
--- a/packages/day-grid/package.json
+++ b/packages/day-grid/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/day-grid",
- "version": "3.5.0",
+ "version": "3.6.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.5.0",
+ "@event-calendar/core": "~3.6.0",
"svelte": "^4.2.19"
}
}
\ No newline at end of file
diff --git a/packages/interaction/README.md b/packages/interaction/README.md
index f6c9b30..25ba01b 100644
--- a/packages/interaction/README.md
+++ b/packages/interaction/README.md
@@ -144,7 +144,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
- [Browser support](#browser-support)
## Usage
-### Svelte component / ES6 module
+### Pure JavaScript / Svelte component
The first step is to install the Event Calendar `core` package:
```bash
npm install --save-dev @event-calendar/core
@@ -162,27 +162,12 @@ You must use at least one plugin that provides a view. The following plugins are
* `@event-calendar/time-grid`
* `@event-calendar/interaction` (doesn't provide a view)
-Then, in your Svelte component, use the calendar something like this:
-```html
-
-
-
-```
-Or in ES6 module:
+Then, in your JavaScript module:
```js
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
+// Import CSS if your build tool supports it
+import '@event-calendar/core/index.css';
let ec = new Calendar({
target: document.getElementById('ec'),
@@ -197,16 +182,29 @@ let ec = new Calendar({
}
});
```
-The CSS is located at `@event-calendar/core/index.css`. If your build tool supports CSS processing, you can import it like this:
-```js
-import '@event-calendar/core/index.css';
+Or in your Svelte component, use the calendar like this:
+```html
+
+
+
```
### Pre-built browser ready bundle
Include the following lines of code in the `` section of your page:
```html
-
-
+
+
```
@@ -221,7 +219,7 @@ Include the following lines of code in the `` section of your page:
-Then initialize the calendar with something like this:
+Then initialize the calendar like this:
```js
let ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
@@ -2394,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
### destroy()
- Return value `undefined`
+- Not available in Svelte
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
+Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
+
### getView()
- Return value `View`
diff --git a/packages/interaction/package.json b/packages/interaction/package.json
index 322c28d..96ac5b8 100644
--- a/packages/interaction/package.json
+++ b/packages/interaction/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/interaction",
- "version": "3.5.0",
+ "version": "3.6.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.5.0",
+ "@event-calendar/core": "~3.6.0",
"svelte": "^4.2.19"
}
}
\ No newline at end of file
diff --git a/packages/list/README.md b/packages/list/README.md
index f6c9b30..25ba01b 100644
--- a/packages/list/README.md
+++ b/packages/list/README.md
@@ -144,7 +144,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
- [Browser support](#browser-support)
## Usage
-### Svelte component / ES6 module
+### Pure JavaScript / Svelte component
The first step is to install the Event Calendar `core` package:
```bash
npm install --save-dev @event-calendar/core
@@ -162,27 +162,12 @@ You must use at least one plugin that provides a view. The following plugins are
* `@event-calendar/time-grid`
* `@event-calendar/interaction` (doesn't provide a view)
-Then, in your Svelte component, use the calendar something like this:
-```html
-
-
-
-```
-Or in ES6 module:
+Then, in your JavaScript module:
```js
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
+// Import CSS if your build tool supports it
+import '@event-calendar/core/index.css';
let ec = new Calendar({
target: document.getElementById('ec'),
@@ -197,16 +182,29 @@ let ec = new Calendar({
}
});
```
-The CSS is located at `@event-calendar/core/index.css`. If your build tool supports CSS processing, you can import it like this:
-```js
-import '@event-calendar/core/index.css';
+Or in your Svelte component, use the calendar like this:
+```html
+
+
+
```
### Pre-built browser ready bundle
Include the following lines of code in the `` section of your page:
```html
-
-
+
+
```
@@ -221,7 +219,7 @@ Include the following lines of code in the `` section of your page:
-Then initialize the calendar with something like this:
+Then initialize the calendar like this:
```js
let ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
@@ -2394,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
### destroy()
- Return value `undefined`
+- Not available in Svelte
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
+Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
+
### getView()
- Return value `View`
diff --git a/packages/list/package.json b/packages/list/package.json
index 76c190e..e94a43b 100644
--- a/packages/list/package.json
+++ b/packages/list/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/list",
- "version": "3.5.0",
+ "version": "3.6.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.5.0",
+ "@event-calendar/core": "~3.6.0",
"svelte": "^4.2.19"
}
}
\ No newline at end of file
diff --git a/packages/resource-time-grid/README.md b/packages/resource-time-grid/README.md
index f6c9b30..25ba01b 100644
--- a/packages/resource-time-grid/README.md
+++ b/packages/resource-time-grid/README.md
@@ -144,7 +144,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
- [Browser support](#browser-support)
## Usage
-### Svelte component / ES6 module
+### Pure JavaScript / Svelte component
The first step is to install the Event Calendar `core` package:
```bash
npm install --save-dev @event-calendar/core
@@ -162,27 +162,12 @@ You must use at least one plugin that provides a view. The following plugins are
* `@event-calendar/time-grid`
* `@event-calendar/interaction` (doesn't provide a view)
-Then, in your Svelte component, use the calendar something like this:
-```html
-
-
-
-```
-Or in ES6 module:
+Then, in your JavaScript module:
```js
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
+// Import CSS if your build tool supports it
+import '@event-calendar/core/index.css';
let ec = new Calendar({
target: document.getElementById('ec'),
@@ -197,16 +182,29 @@ let ec = new Calendar({
}
});
```
-The CSS is located at `@event-calendar/core/index.css`. If your build tool supports CSS processing, you can import it like this:
-```js
-import '@event-calendar/core/index.css';
+Or in your Svelte component, use the calendar like this:
+```html
+
+
+
```
### Pre-built browser ready bundle
Include the following lines of code in the `` section of your page:
```html
-
-
+
+
```
@@ -221,7 +219,7 @@ Include the following lines of code in the `` section of your page:
-Then initialize the calendar with something like this:
+Then initialize the calendar like this:
```js
let ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
@@ -2394,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
### destroy()
- Return value `undefined`
+- Not available in Svelte
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
+Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
+
### getView()
- Return value `View`
diff --git a/packages/resource-time-grid/package.json b/packages/resource-time-grid/package.json
index fcc2abd..6be7fca 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.5.0",
+ "version": "3.6.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.5.0",
- "@event-calendar/time-grid": "~3.5.0",
+ "@event-calendar/core": "~3.6.0",
+ "@event-calendar/time-grid": "~3.6.0",
"svelte": "^4.2.19"
}
}
\ No newline at end of file
diff --git a/packages/resource-timeline/README.md b/packages/resource-timeline/README.md
index f6c9b30..25ba01b 100644
--- a/packages/resource-timeline/README.md
+++ b/packages/resource-timeline/README.md
@@ -144,7 +144,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
- [Browser support](#browser-support)
## Usage
-### Svelte component / ES6 module
+### Pure JavaScript / Svelte component
The first step is to install the Event Calendar `core` package:
```bash
npm install --save-dev @event-calendar/core
@@ -162,27 +162,12 @@ You must use at least one plugin that provides a view. The following plugins are
* `@event-calendar/time-grid`
* `@event-calendar/interaction` (doesn't provide a view)
-Then, in your Svelte component, use the calendar something like this:
-```html
-
-
-
-```
-Or in ES6 module:
+Then, in your JavaScript module:
```js
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
+// Import CSS if your build tool supports it
+import '@event-calendar/core/index.css';
let ec = new Calendar({
target: document.getElementById('ec'),
@@ -197,16 +182,29 @@ let ec = new Calendar({
}
});
```
-The CSS is located at `@event-calendar/core/index.css`. If your build tool supports CSS processing, you can import it like this:
-```js
-import '@event-calendar/core/index.css';
+Or in your Svelte component, use the calendar like this:
+```html
+
+
+
```
### Pre-built browser ready bundle
Include the following lines of code in the `` section of your page:
```html
-
-
+
+
```
@@ -221,7 +219,7 @@ Include the following lines of code in the `` section of your page:
-Then initialize the calendar with something like this:
+Then initialize the calendar like this:
```js
let ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
@@ -2394,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
### destroy()
- Return value `undefined`
+- Not available in Svelte
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
+Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
+
### getView()
- Return value `View`
diff --git a/packages/resource-timeline/package.json b/packages/resource-timeline/package.json
index 59e5881..9ef09cc 100644
--- a/packages/resource-timeline/package.json
+++ b/packages/resource-timeline/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/resource-timeline",
- "version": "3.5.0",
+ "version": "3.6.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.5.0",
+ "@event-calendar/core": "~3.6.0",
"svelte": "^4.2.19"
}
}
\ No newline at end of file
diff --git a/packages/time-grid/README.md b/packages/time-grid/README.md
index f6c9b30..25ba01b 100644
--- a/packages/time-grid/README.md
+++ b/packages/time-grid/README.md
@@ -144,7 +144,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
- [Browser support](#browser-support)
## Usage
-### Svelte component / ES6 module
+### Pure JavaScript / Svelte component
The first step is to install the Event Calendar `core` package:
```bash
npm install --save-dev @event-calendar/core
@@ -162,27 +162,12 @@ You must use at least one plugin that provides a view. The following plugins are
* `@event-calendar/time-grid`
* `@event-calendar/interaction` (doesn't provide a view)
-Then, in your Svelte component, use the calendar something like this:
-```html
-
-
-
-```
-Or in ES6 module:
+Then, in your JavaScript module:
```js
import Calendar from '@event-calendar/core';
import TimeGrid from '@event-calendar/time-grid';
+// Import CSS if your build tool supports it
+import '@event-calendar/core/index.css';
let ec = new Calendar({
target: document.getElementById('ec'),
@@ -197,16 +182,29 @@ let ec = new Calendar({
}
});
```
-The CSS is located at `@event-calendar/core/index.css`. If your build tool supports CSS processing, you can import it like this:
-```js
-import '@event-calendar/core/index.css';
+Or in your Svelte component, use the calendar like this:
+```html
+
+
+
```
### Pre-built browser ready bundle
Include the following lines of code in the `` section of your page:
```html
-
-
+
+
```
@@ -221,7 +219,7 @@ Include the following lines of code in the `` section of your page:
-Then initialize the calendar with something like this:
+Then initialize the calendar like this:
```js
let ec = new EventCalendar(document.getElementById('ec'), {
view: 'timeGridWeek',
@@ -2394,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
### destroy()
- Return value `undefined`
+- Not available in Svelte
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
+Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
+
### getView()
- Return value `View`
diff --git a/packages/time-grid/package.json b/packages/time-grid/package.json
index afe6b77..ffa10dd 100644
--- a/packages/time-grid/package.json
+++ b/packages/time-grid/package.json
@@ -1,6 +1,6 @@
{
"name": "@event-calendar/time-grid",
- "version": "3.5.0",
+ "version": "3.6.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.5.0",
+ "@event-calendar/core": "~3.6.0",
"svelte": "^4.2.19"
}
}
\ No newline at end of file