@event-calendar/build 3.5.0 → 3.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -25
- package/event-calendar.min.js +2 -2
- package/event-calendar.min.js.map +1 -1
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -144,7 +144,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
144
144
|
- [Browser support](#browser-support)
|
|
145
145
|
|
|
146
146
|
## Usage
|
|
147
|
-
###
|
|
147
|
+
### Pure JavaScript / Svelte component
|
|
148
148
|
The first step is to install the Event Calendar `core` package:
|
|
149
149
|
```bash
|
|
150
150
|
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
|
|
|
162
162
|
* `@event-calendar/time-grid`
|
|
163
163
|
* `@event-calendar/interaction` (doesn't provide a view)
|
|
164
164
|
|
|
165
|
-
Then, in your
|
|
166
|
-
```html
|
|
167
|
-
<script>
|
|
168
|
-
import Calendar from '@event-calendar/core';
|
|
169
|
-
import TimeGrid from '@event-calendar/time-grid';
|
|
170
|
-
|
|
171
|
-
let plugins = [TimeGrid];
|
|
172
|
-
let options = {
|
|
173
|
-
view: 'timeGridWeek',
|
|
174
|
-
events: [
|
|
175
|
-
// your list of events
|
|
176
|
-
]
|
|
177
|
-
};
|
|
178
|
-
</script>
|
|
179
|
-
|
|
180
|
-
<Calendar {plugins} {options} />
|
|
181
|
-
```
|
|
182
|
-
Or in ES6 module:
|
|
165
|
+
Then, in your JavaScript module:
|
|
183
166
|
```js
|
|
184
167
|
import Calendar from '@event-calendar/core';
|
|
185
168
|
import TimeGrid from '@event-calendar/time-grid';
|
|
169
|
+
// Import CSS if your build tool supports it
|
|
170
|
+
import '@event-calendar/core/index.css';
|
|
186
171
|
|
|
187
172
|
let ec = new Calendar({
|
|
188
173
|
target: document.getElementById('ec'),
|
|
@@ -197,16 +182,29 @@ let ec = new Calendar({
|
|
|
197
182
|
}
|
|
198
183
|
});
|
|
199
184
|
```
|
|
200
|
-
|
|
201
|
-
```
|
|
202
|
-
|
|
185
|
+
Or in your Svelte component, use the calendar like this:
|
|
186
|
+
```html
|
|
187
|
+
<script>
|
|
188
|
+
import Calendar from '@event-calendar/core';
|
|
189
|
+
import TimeGrid from '@event-calendar/time-grid';
|
|
190
|
+
|
|
191
|
+
let plugins = [TimeGrid];
|
|
192
|
+
let options = {
|
|
193
|
+
view: 'timeGridWeek',
|
|
194
|
+
events: [
|
|
195
|
+
// your list of events
|
|
196
|
+
]
|
|
197
|
+
};
|
|
198
|
+
</script>
|
|
199
|
+
|
|
200
|
+
<Calendar {plugins} {options} />
|
|
203
201
|
```
|
|
204
202
|
|
|
205
203
|
### Pre-built browser ready bundle
|
|
206
204
|
Include the following lines of code in the `<head>` section of your page:
|
|
207
205
|
```html
|
|
208
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.
|
|
209
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.
|
|
206
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.6.0/event-calendar.min.css">
|
|
207
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.6.0/event-calendar.min.js"></script>
|
|
210
208
|
```
|
|
211
209
|
|
|
212
210
|
<details>
|
|
@@ -221,7 +219,7 @@ Include the following lines of code in the `<head>` section of your page:
|
|
|
221
219
|
|
|
222
220
|
</details>
|
|
223
221
|
|
|
224
|
-
Then initialize the calendar
|
|
222
|
+
Then initialize the calendar like this:
|
|
225
223
|
```js
|
|
226
224
|
let ec = new EventCalendar(document.getElementById('ec'), {
|
|
227
225
|
view: 'timeGridWeek',
|
|
@@ -2394,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
|
|
|
2394
2392
|
|
|
2395
2393
|
### destroy()
|
|
2396
2394
|
- Return value `undefined`
|
|
2395
|
+
- Not available in Svelte
|
|
2397
2396
|
|
|
2398
2397
|
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
|
|
2399
2398
|
|
|
2399
|
+
Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
|
|
2400
|
+
|
|
2400
2401
|
### getView()
|
|
2401
2402
|
- Return value `View`
|
|
2402
2403
|
|