@event-calendar/day-grid
Advanced tools
Comparing version 1.5.1 to 2.0.0
50
index.js
import { derived, writable } from 'svelte/store'; | ||
import { cloneDate, subtractDay, addDay, setContent, helperEvent, toEventWithLocalDates, toViewWithLocalDates, createEventClasses, createEventContent, previewEvent, repositionEvent, height, ancestor, max, keyEnter, outsideEvent, rect, datesEqual, setMidnight, createDate, debounce, assign, createEventChunk, setPayload, bgEvent, eventIntersects, prepareEventChunks, btnTextMonth, intl } from '@event-calendar/core'; | ||
import { SvelteComponent, init, safe_not_equal, ensure_array_like, element, space, attr, insert, append, noop, detach, destroy_each, component_subscribe, text, set_data, create_slot, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, binding_callbacks, construct_svelte_component, is_function, create_component, mount_component, action_destroyer, listen, group_outros, destroy_component, check_outros, run_all, stop_propagation, update_keyed_each, outro_and_destroy_block, empty, set_store_value, bubble } from 'svelte/internal'; | ||
import { SvelteComponent, init, safe_not_equal, ensure_array_like, element, space, attr, insert, append, noop, detach, destroy_each, component_subscribe, action_destroyer, is_function, create_slot, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, binding_callbacks, construct_svelte_component, create_component, mount_component, listen, group_outros, destroy_component, check_outros, run_all, text, stop_propagation, update_keyed_each, outro_and_destroy_block, empty, set_store_value, bubble, set_data } from 'svelte/internal'; | ||
import { getContext, onMount, tick, afterUpdate } from 'svelte'; | ||
@@ -35,8 +35,9 @@ | ||
// (9:8) {#each $_days as day} | ||
// (10:8) {#each $_days as day} | ||
function create_each_block$4(ctx) { | ||
let div; | ||
let t_value = /*$_intlDayHeader*/ ctx[2].format(/*day*/ ctx[6]) + ""; | ||
let t; | ||
let div_class_value; | ||
let setContent_action; | ||
let mounted; | ||
let dispose; | ||
@@ -46,3 +47,2 @@ return { | ||
div = element("div"); | ||
t = text(t_value); | ||
attr(div, "class", div_class_value = /*$theme*/ ctx[0].day); | ||
@@ -52,6 +52,10 @@ }, | ||
insert(target, div, anchor); | ||
append(div, t); | ||
if (!mounted) { | ||
dispose = action_destroyer(setContent_action = setContent.call(null, div, /*$_intlDayHeader*/ ctx[2].format(/*day*/ ctx[6]))); | ||
mounted = true; | ||
} | ||
}, | ||
p(ctx, dirty) { | ||
if (dirty & /*$_intlDayHeader, $_days*/ 6 && t_value !== (t_value = /*$_intlDayHeader*/ ctx[2].format(/*day*/ ctx[6]) + "")) set_data(t, t_value); | ||
p(new_ctx, dirty) { | ||
ctx = new_ctx; | ||
@@ -61,2 +65,4 @@ if (dirty & /*$theme*/ 1 && div_class_value !== (div_class_value = /*$theme*/ ctx[0].day)) { | ||
} | ||
if (setContent_action && is_function(setContent_action.update) && dirty & /*$_intlDayHeader, $_days*/ 6) setContent_action.update.call(null, /*$_intlDayHeader*/ ctx[2].format(/*day*/ ctx[6])); | ||
}, | ||
@@ -67,2 +73,5 @@ d(detaching) { | ||
} | ||
mounted = false; | ||
dispose(); | ||
} | ||
@@ -771,10 +780,10 @@ }; | ||
let div0; | ||
let t0_value = /*$_intlDayPopover*/ ctx[5].format(/*$_popupDate*/ ctx[3]) + ""; | ||
let span; | ||
let setContent_action; | ||
let t0; | ||
let a; | ||
let t1; | ||
let a; | ||
let t2; | ||
let a_aria_label_value; | ||
let div0_class_value; | ||
let t3; | ||
let t2; | ||
let div1; | ||
@@ -801,7 +810,7 @@ let each_blocks = []; | ||
div0 = element("div"); | ||
t0 = text(t0_value); | ||
t1 = space(); | ||
span = element("span"); | ||
t0 = space(); | ||
a = element("a"); | ||
t2 = text("×"); | ||
t3 = space(); | ||
t1 = text("×"); | ||
t2 = space(); | ||
div1 = element("div"); | ||
@@ -824,7 +833,7 @@ | ||
append(div2, div0); | ||
append(div0, span); | ||
append(div0, t0); | ||
append(div0, t1); | ||
append(div0, a); | ||
append(a, t2); | ||
append(div2, t3); | ||
append(a, t1); | ||
append(div2, t2); | ||
append(div2, div1); | ||
@@ -843,2 +852,3 @@ | ||
dispose = [ | ||
action_destroyer(setContent_action = setContent.call(null, span, /*$_intlDayPopover*/ ctx[5].format(/*$_popupDate*/ ctx[3]))), | ||
listen(a, "click", stop_propagation(/*close*/ ctx[13])), | ||
@@ -855,3 +865,3 @@ listen(a, "keydown", keyEnter(/*close*/ ctx[13])), | ||
p(ctx, [dirty]) { | ||
if ((!current || dirty & /*$_intlDayPopover, $_popupDate*/ 40) && t0_value !== (t0_value = /*$_intlDayPopover*/ ctx[5].format(/*$_popupDate*/ ctx[3]) + "")) set_data(t0, t0_value); | ||
if (setContent_action && is_function(setContent_action.update) && dirty & /*$_intlDayPopover, $_popupDate*/ 40) setContent_action.update.call(null, /*$_intlDayPopover*/ ctx[5].format(/*$_popupDate*/ ctx[3])); | ||
@@ -858,0 +868,0 @@ if (!current || dirty & /*$buttonText*/ 64 && a_aria_label_value !== (a_aria_label_value = /*$buttonText*/ ctx[6].close)) { |
{ | ||
"name": "@event-calendar/day-grid", | ||
"version": "1.5.1", | ||
"version": "2.0.0", | ||
"title": "Event Calendar DayGrid plugin", | ||
@@ -29,5 +29,5 @@ "description": "Full-sized drag & drop event calendar with resource view", | ||
"dependencies": { | ||
"@event-calendar/core": "~1.5.1", | ||
"@event-calendar/core": "~2.0.0", | ||
"svelte": "^4.1.1" | ||
} | ||
} |
127
README.md
@@ -7,3 +7,3 @@ # Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![npm](https://img.shields.io/npm/dm/@event-calendar/core?color=red&label=npm&style=flat-square)](https://www.npmjs.com/package/@event-calendar/core) | ||
* Lightweight (28kb [br](https://en.wikipedia.org/wiki/Brotli) compressed) | ||
* Lightweight (31kb [br](https://en.wikipedia.org/wiki/Brotli) compressed) | ||
* Zero-dependency (pre-built bundle) | ||
@@ -198,4 +198,4 @@ * Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/) | ||
```html | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.5.1/event-calendar.min.css"> | ||
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.5.1/event-calendar.min.js"></script> | ||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.0.0/event-calendar.min.css"> | ||
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.0.0/event-calendar.min.js"></script> | ||
``` | ||
@@ -253,3 +253,3 @@ | ||
### allDayContent | ||
- Type `string`, `object`or `function` | ||
- Type `Content` or `function` | ||
- Default `'all-day'` | ||
@@ -259,7 +259,7 @@ | ||
This value can be either a string containing text `'...'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats: | ||
This value can be either a [Content](#content) or a function that returns content: | ||
```js | ||
function (arg) { | ||
// return string or object | ||
// return Content | ||
} | ||
@@ -468,7 +468,7 @@ ``` | ||
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 formatted string: | ||
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 formatted date string | ||
// return Content with the formatted date string | ||
} | ||
@@ -502,4 +502,9 @@ ``` | ||
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 formatted string: | ||
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 | ||
} | ||
``` | ||
### displayEventEnd | ||
@@ -654,3 +659,3 @@ - Type `boolean` | ||
### eventContent | ||
- Type `string`, `object` or `function` | ||
- Type `Content` or `function` | ||
- Default `undefined` | ||
@@ -660,7 +665,7 @@ | ||
This value can be either a string containing text `'...'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats: | ||
This value can be either a [Content](#content) or a function that returns content: | ||
```js | ||
function (info) { | ||
// return string or object | ||
// return Content | ||
} | ||
@@ -1309,7 +1314,7 @@ ``` | ||
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 formatted string: | ||
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 formatted string: | ||
```js | ||
function (time) { | ||
// return formatted time string | ||
function (start, end) { | ||
// return Content with the formatted time string | ||
} | ||
@@ -1321,6 +1326,13 @@ ``` | ||
`time` | ||
`start` | ||
</td> | ||
<td>JavaScript Date object that needs to be formatted</td> | ||
<td>JavaScript Date object containing the beginning of the time span to be formatted</td> | ||
</tr> | ||
<tr> | ||
<td> | ||
`end` | ||
</td> | ||
<td>JavaScript Date object containing the end of the time span to be formatted</td> | ||
</tr> | ||
</table> | ||
@@ -1475,7 +1487,7 @@ | ||
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 formatted string: | ||
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 formatted date string | ||
// return Content with the formatted date string | ||
} | ||
@@ -1499,7 +1511,7 @@ ``` | ||
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 formatted string: | ||
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 formatted date string | ||
// return Content with the formatted date string | ||
} | ||
@@ -1554,3 +1566,3 @@ ``` | ||
### moreLinkContent | ||
- Type `string`, `object`or `function` | ||
- Type `Content` or `function` | ||
- Default `undefined` | ||
@@ -1560,7 +1572,7 @@ | ||
This value can be either a string containing text `'...'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats: | ||
This value can be either a [Content](#content) or a function that returns content: | ||
```js | ||
function (arg) { | ||
// return string or object | ||
// return Content | ||
} | ||
@@ -1620,3 +1632,3 @@ ``` | ||
### noEventsContent | ||
- Type `string`, `object`or `function` | ||
- Type `Content` or `function` | ||
- Default `'No events'` | ||
@@ -1626,7 +1638,7 @@ | ||
This value can be either a string containing text `'...'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats: | ||
This value can be either a [Content](#content) or a function that returns content: | ||
```js | ||
function () { | ||
// return string or object | ||
// return Content | ||
} | ||
@@ -1660,7 +1672,7 @@ ``` | ||
This value can be either a string containing text `'...'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats: | ||
This value can be either a [Content](#content) or a function that returns content: | ||
```js | ||
function (info) { | ||
// return string or object | ||
// return Content | ||
} | ||
@@ -1878,7 +1890,7 @@ ``` | ||
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 formatted string: | ||
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 (time) { | ||
// return formatted time string | ||
// return Content with the formatted time string | ||
} | ||
@@ -1944,7 +1956,7 @@ ``` | ||
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 formatted string: | ||
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 formatted date string | ||
function (start, end) { | ||
// return Content with the formatted date string | ||
} | ||
@@ -1956,8 +1968,25 @@ ``` | ||
`date` | ||
`start` | ||
</td> | ||
<td>JavaScript Date object that needs to be formatted</td> | ||
<td>JavaScript Date object containing the beginning of the time span to be formatted</td> | ||
</tr> | ||
<tr> | ||
<td> | ||
`end` | ||
</td> | ||
<td>JavaScript Date object containing the end of the time span to be formatted</td> | ||
</tr> | ||
</table> | ||
The callback function can return HTML markup. If you want to use HTML entities in the title, you must use the callback function: | ||
```js | ||
function (date) { | ||
let month = date.toLocaleDateString('en-US', { month: 'long' }) | ||
let year = date.toLocaleDateString('en-US', { year: 'numeric' }) | ||
return `<span class="month">${month}</span> <span class="year">${year}</span>` | ||
} | ||
``` | ||
### unselect | ||
@@ -2212,2 +2241,9 @@ - Type `function` | ||
## Content | ||
The content can be presented in the following forms: | ||
* a string containing text `'some text'` | ||
* an object containing the HTML string `{html: '<p>some HTML</p>'}` | ||
* an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` | ||
## Event object | ||
@@ -2260,10 +2296,5 @@ This is a JavaScript object that the Event Calendar uses to store information about a calendar event. | ||
</td> | ||
<td>The text appearing on the event</td> | ||
</tr> | ||
<tr> | ||
<td> | ||
`titleHTML` | ||
</td> | ||
<td>The HTML version of the title</td> | ||
The text appearing on the event. See [Content](#content)</td> | ||
</tr> | ||
@@ -2416,3 +2447,3 @@ <tr> | ||
`string` The text that will appear on the event. Default `''` | ||
`Content` The text that will appear on the event. See [Content](#content). Default `''` | ||
</td> | ||
@@ -2423,12 +2454,2 @@ </tr> | ||
`titleHTML` | ||
</td> | ||
<td> | ||
`string` The HTML version of the title to be displayed instead of the text version. Default `''` | ||
</td> | ||
</tr> | ||
<tr> | ||
<td> | ||
`editable` | ||
@@ -2435,0 +2456,0 @@ </td> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
139353
2049
2702
+ Added@event-calendar/core@2.0.0(transitive)
- Removed@event-calendar/core@1.5.1(transitive)
Updated@event-calendar/core@~2.0.0