@event-calendar/build 1.5.1 → 2.1.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 +85 -63
- package/event-calendar.min.css +1 -1
- package/event-calendar.min.js +2 -2
- package/event-calendar.min.js.map +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
|
|
|
4
4
|
|
|
5
5
|
Full-sized drag & drop JavaScript event calendar with resource view:
|
|
6
6
|
|
|
7
|
-
* Lightweight (
|
|
7
|
+
* Lightweight (31kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
|
|
8
8
|
* Zero-dependency (pre-built bundle)
|
|
9
9
|
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
|
|
10
10
|
|
|
@@ -124,6 +124,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
124
124
|
- [unselect](#unselect-1)
|
|
125
125
|
</td></tr>
|
|
126
126
|
</table>
|
|
127
|
+
- [Content](#content)
|
|
127
128
|
- [Event object](#event-object)
|
|
128
129
|
- [Parsing event from a plain object](#parsing-event-from-a-plain-object)
|
|
129
130
|
- [Duration object](#duration-object)
|
|
@@ -194,8 +195,8 @@ import '@event-calendar/core/index.css';
|
|
|
194
195
|
### Pre-built browser ready bundle
|
|
195
196
|
Include the following lines of code in the `<head>` section of your page:
|
|
196
197
|
```html
|
|
197
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.
|
|
198
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.
|
|
198
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.css">
|
|
199
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.js"></script>
|
|
199
200
|
```
|
|
200
201
|
|
|
201
202
|
<details>
|
|
@@ -248,16 +249,16 @@ In Svelte, you can simply update the original `options` object.
|
|
|
248
249
|
## Options
|
|
249
250
|
|
|
250
251
|
### allDayContent
|
|
251
|
-
- Type `
|
|
252
|
+
- Type `Content` or `function`
|
|
252
253
|
- Default `'all-day'`
|
|
253
254
|
|
|
254
255
|
Defines the content that is displayed as a title of the `all-day` slot.
|
|
255
256
|
|
|
256
|
-
This value can be either a
|
|
257
|
+
This value can be either a [Content](#content) or a function that returns content:
|
|
257
258
|
|
|
258
259
|
```js
|
|
259
260
|
function (arg) {
|
|
260
|
-
// return
|
|
261
|
+
// return Content
|
|
261
262
|
}
|
|
262
263
|
```
|
|
263
264
|
`arg` is an object with the following properties:
|
|
@@ -286,15 +287,15 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
|
|
|
286
287
|
- Type `object` or `function`
|
|
287
288
|
- Default `{close: 'Close', dayGridMonth: 'month', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
|
|
288
289
|
> Views override the default value as follows:
|
|
289
|
-
> - dayGridMonth `
|
|
290
|
-
> - listDay `
|
|
291
|
-
> - listMonth `
|
|
292
|
-
> - listWeek `
|
|
293
|
-
> - listYear `
|
|
294
|
-
> - resourceTimeGridDay `
|
|
295
|
-
> - resourceTimeGridWeek `
|
|
296
|
-
> - timeGridDay `
|
|
297
|
-
> - timeGridWeek `
|
|
290
|
+
> - dayGridMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
|
|
291
|
+
> - listDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
|
|
292
|
+
> - listMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
|
|
293
|
+
> - listWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
|
|
294
|
+
> - listYear `text => ({...text, next: 'Next year', prev: 'Previous year'})`
|
|
295
|
+
> - resourceTimeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
|
|
296
|
+
> - resourceTimeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
|
|
297
|
+
> - timeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
|
|
298
|
+
> - timeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
|
|
298
299
|
|
|
299
300
|
|
|
300
301
|
Text that is displayed in buttons of the header toolbar.
|
|
@@ -461,11 +462,11 @@ The current [View](#view-object) object
|
|
|
461
462
|
|
|
462
463
|
Defines the text that is displayed on the calendar’s column headings.
|
|
463
464
|
|
|
464
|
-
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:
|
|
465
|
+
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:
|
|
465
466
|
|
|
466
467
|
```js
|
|
467
468
|
function (date) {
|
|
468
|
-
// return formatted date string
|
|
469
|
+
// return Content with the formatted date string
|
|
469
470
|
}
|
|
470
471
|
```
|
|
471
472
|
<table>
|
|
@@ -494,8 +495,13 @@ Currently, only the value `true` is supported, which limits the number of events
|
|
|
494
495
|
|
|
495
496
|
Defines the date format of title of the popover created by the [dayMaxEvents](#daymaxevents) option.
|
|
496
497
|
|
|
497
|
-
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:
|
|
498
|
+
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:
|
|
498
499
|
|
|
500
|
+
```js
|
|
501
|
+
function (date) {
|
|
502
|
+
// return Content with the formatted date string
|
|
503
|
+
}
|
|
504
|
+
```
|
|
499
505
|
### displayEventEnd
|
|
500
506
|
- Type `boolean`
|
|
501
507
|
- Default `true`
|
|
@@ -645,16 +651,16 @@ The current [View](#view-object) object
|
|
|
645
651
|
This is currently an alias for the `eventBackgroundColor`.
|
|
646
652
|
|
|
647
653
|
### eventContent
|
|
648
|
-
- Type `
|
|
654
|
+
- Type `Content` or `function`
|
|
649
655
|
- Default `undefined`
|
|
650
656
|
|
|
651
657
|
Defines the content that is rendered inside an event’s element.
|
|
652
658
|
|
|
653
|
-
This value can be either a
|
|
659
|
+
This value can be either a [Content](#content) or a function that returns content:
|
|
654
660
|
|
|
655
661
|
```js
|
|
656
662
|
function (info) {
|
|
657
|
-
// return
|
|
663
|
+
// return Content
|
|
658
664
|
}
|
|
659
665
|
```
|
|
660
666
|
`info` is an object with the following properties:
|
|
@@ -1298,20 +1304,27 @@ Determines whether the events on the calendar can be dragged.
|
|
|
1298
1304
|
|
|
1299
1305
|
Defines the time-text that is displayed on each event.
|
|
1300
1306
|
|
|
1301
|
-
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:
|
|
1307
|
+
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:
|
|
1302
1308
|
|
|
1303
1309
|
```js
|
|
1304
|
-
function (
|
|
1305
|
-
// return formatted time string
|
|
1310
|
+
function (start, end) {
|
|
1311
|
+
// return Content with the formatted time string
|
|
1306
1312
|
}
|
|
1307
1313
|
```
|
|
1308
1314
|
<table>
|
|
1309
1315
|
<tr>
|
|
1310
1316
|
<td>
|
|
1311
1317
|
|
|
1312
|
-
`
|
|
1318
|
+
`start`
|
|
1313
1319
|
</td>
|
|
1314
|
-
<td>JavaScript Date object
|
|
1320
|
+
<td>JavaScript Date object containing the beginning of the time span to be formatted</td>
|
|
1321
|
+
</tr>
|
|
1322
|
+
<tr>
|
|
1323
|
+
<td>
|
|
1324
|
+
|
|
1325
|
+
`end`
|
|
1326
|
+
</td>
|
|
1327
|
+
<td>JavaScript Date object containing the end of the time span to be formatted</td>
|
|
1315
1328
|
</tr>
|
|
1316
1329
|
</table>
|
|
1317
1330
|
|
|
@@ -1462,11 +1475,11 @@ When set to `false`, the calendar will fetch events any time the view is switche
|
|
|
1462
1475
|
|
|
1463
1476
|
Defines the text on the left side of the day headings in list view.
|
|
1464
1477
|
|
|
1465
|
-
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:
|
|
1478
|
+
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:
|
|
1466
1479
|
|
|
1467
1480
|
```js
|
|
1468
1481
|
function (date) {
|
|
1469
|
-
// return formatted date string
|
|
1482
|
+
// return Content with the formatted date string
|
|
1470
1483
|
}
|
|
1471
1484
|
```
|
|
1472
1485
|
<table>
|
|
@@ -1485,11 +1498,11 @@ function (date) {
|
|
|
1485
1498
|
|
|
1486
1499
|
Defines the text on the right side of the day headings in list view.
|
|
1487
1500
|
|
|
1488
|
-
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:
|
|
1501
|
+
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:
|
|
1489
1502
|
|
|
1490
1503
|
```js
|
|
1491
1504
|
function (date) {
|
|
1492
|
-
// return formatted date string
|
|
1505
|
+
// return Content with the formatted date string
|
|
1493
1506
|
}
|
|
1494
1507
|
```
|
|
1495
1508
|
<table>
|
|
@@ -1539,16 +1552,16 @@ For touch devices, the amount of time (in milliseconds) the user must hold down
|
|
|
1539
1552
|
For a more granular configuration, see [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
|
|
1540
1553
|
|
|
1541
1554
|
### moreLinkContent
|
|
1542
|
-
- Type `
|
|
1555
|
+
- Type `Content` or `function`
|
|
1543
1556
|
- Default `undefined`
|
|
1544
1557
|
|
|
1545
1558
|
Defines the text that is displayed instead of the default `+2 more` created by the [dayMaxEvents](#daymaxevents) option.
|
|
1546
1559
|
|
|
1547
|
-
This value can be either a
|
|
1560
|
+
This value can be either a [Content](#content) or a function that returns content:
|
|
1548
1561
|
|
|
1549
1562
|
```js
|
|
1550
1563
|
function (arg) {
|
|
1551
|
-
// return
|
|
1564
|
+
// return Content
|
|
1552
1565
|
}
|
|
1553
1566
|
```
|
|
1554
1567
|
`arg` is an object with the following properties:
|
|
@@ -1603,16 +1616,16 @@ The current [View](#view-object) object
|
|
|
1603
1616
|
</table>
|
|
1604
1617
|
|
|
1605
1618
|
### noEventsContent
|
|
1606
|
-
- Type `
|
|
1619
|
+
- Type `Content` or `function`
|
|
1607
1620
|
- Default `'No events'`
|
|
1608
1621
|
|
|
1609
1622
|
Defines the text that is displayed in list view when there are no events to display.
|
|
1610
1623
|
|
|
1611
|
-
This value can be either a
|
|
1624
|
+
This value can be either a [Content](#content) or a function that returns content:
|
|
1612
1625
|
|
|
1613
1626
|
```js
|
|
1614
1627
|
function () {
|
|
1615
|
-
// return
|
|
1628
|
+
// return Content
|
|
1616
1629
|
}
|
|
1617
1630
|
```
|
|
1618
1631
|
|
|
@@ -1641,11 +1654,11 @@ Array of plain objects that will be parsed into [Resource](#resource-object) obj
|
|
|
1641
1654
|
|
|
1642
1655
|
Defines the content that is rendered inside an element with a resource title.
|
|
1643
1656
|
|
|
1644
|
-
This value can be either a
|
|
1657
|
+
This value can be either a [Content](#content) or a function that returns content:
|
|
1645
1658
|
|
|
1646
1659
|
```js
|
|
1647
1660
|
function (info) {
|
|
1648
|
-
// return
|
|
1661
|
+
// return Content
|
|
1649
1662
|
}
|
|
1650
1663
|
```
|
|
1651
1664
|
`info` is an object with the following properties:
|
|
@@ -1858,11 +1871,11 @@ Defines the time slot height in pixels. When changing the setting, you must addi
|
|
|
1858
1871
|
|
|
1859
1872
|
Defines the text that will be displayed within a time slot.
|
|
1860
1873
|
|
|
1861
|
-
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:
|
|
1874
|
+
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:
|
|
1862
1875
|
|
|
1863
1876
|
```js
|
|
1864
1877
|
function (time) {
|
|
1865
|
-
// return formatted time string
|
|
1878
|
+
// return Content with the formatted time string
|
|
1866
1879
|
}
|
|
1867
1880
|
```
|
|
1868
1881
|
<table>
|
|
@@ -1893,7 +1906,17 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
|
|
|
1893
1906
|
|
|
1894
1907
|
### theme
|
|
1895
1908
|
- Type `object` or `function`
|
|
1896
|
-
- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines',
|
|
1909
|
+
- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', view: '', withScroll: 'ec-with-scroll'}`
|
|
1910
|
+
> Views override the default value as follows:
|
|
1911
|
+
> - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-view'})`
|
|
1912
|
+
> - listDay `theme => ({...theme, view: 'ec-list ec-day-view'})`
|
|
1913
|
+
> - listMonth `theme => ({...theme, view: 'ec-list ec-month-view'})`
|
|
1914
|
+
> - listWeek `theme => ({...theme, view: 'ec-list ec-week-view'})`
|
|
1915
|
+
> - listYear `theme => ({...theme, view: 'ec-list ec-year-view'})`
|
|
1916
|
+
> - resourceTimeGridDay `theme => ({...theme, view: 'ec-time-grid ec-resource-day-view'})`
|
|
1917
|
+
> - resourceTimeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-resource-week-view'})`
|
|
1918
|
+
> - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
|
|
1919
|
+
> - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
|
|
1897
1920
|
|
|
1898
1921
|
Defines the CSS classes that the Event Calendar uses to generate HTML markup.
|
|
1899
1922
|
|
|
@@ -1923,20 +1946,27 @@ function (theme) {
|
|
|
1923
1946
|
|
|
1924
1947
|
Defines the text that is displayed in the header toolbar’s title.
|
|
1925
1948
|
|
|
1926
|
-
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:
|
|
1949
|
+
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:
|
|
1927
1950
|
|
|
1928
1951
|
```js
|
|
1929
|
-
function (
|
|
1930
|
-
// return formatted date string
|
|
1952
|
+
function (start, end) {
|
|
1953
|
+
// return Content with the formatted date string
|
|
1931
1954
|
}
|
|
1932
1955
|
```
|
|
1933
1956
|
<table>
|
|
1934
1957
|
<tr>
|
|
1935
1958
|
<td>
|
|
1936
1959
|
|
|
1937
|
-
`
|
|
1960
|
+
`start`
|
|
1938
1961
|
</td>
|
|
1939
|
-
<td>JavaScript Date object
|
|
1962
|
+
<td>JavaScript Date object containing the beginning of the time span to be formatted</td>
|
|
1963
|
+
</tr>
|
|
1964
|
+
<tr>
|
|
1965
|
+
<td>
|
|
1966
|
+
|
|
1967
|
+
`end`
|
|
1968
|
+
</td>
|
|
1969
|
+
<td>JavaScript Date object containing the end of the time span to be formatted</td>
|
|
1940
1970
|
</tr>
|
|
1941
1971
|
</table>
|
|
1942
1972
|
|
|
@@ -2189,6 +2219,13 @@ Returns the [View](#view-object) object for the current view.
|
|
|
2189
2219
|
|
|
2190
2220
|
Clears the current selection. See [selectable](#selectable).
|
|
2191
2221
|
|
|
2222
|
+
## Content
|
|
2223
|
+
The content can be presented in the following forms:
|
|
2224
|
+
|
|
2225
|
+
* a string containing text `'some text'`
|
|
2226
|
+
* an object containing the HTML string `{html: '<p>some HTML</p>'}`
|
|
2227
|
+
* an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}`
|
|
2228
|
+
|
|
2192
2229
|
## Event object
|
|
2193
2230
|
This is a JavaScript object that the Event Calendar uses to store information about a calendar event.
|
|
2194
2231
|
|
|
@@ -2236,14 +2273,9 @@ Here are all properties that exist in Event object:
|
|
|
2236
2273
|
|
|
2237
2274
|
`title`
|
|
2238
2275
|
</td>
|
|
2239
|
-
<td>The text appearing on the event</td>
|
|
2240
|
-
</tr>
|
|
2241
|
-
<tr>
|
|
2242
2276
|
<td>
|
|
2243
2277
|
|
|
2244
|
-
|
|
2245
|
-
</td>
|
|
2246
|
-
<td>The HTML version of the title</td>
|
|
2278
|
+
The text appearing on the event. See [Content](#content)</td>
|
|
2247
2279
|
</tr>
|
|
2248
2280
|
<tr>
|
|
2249
2281
|
<td>
|
|
@@ -2391,17 +2423,7 @@ Here are all admissible fields for the event’s input object:
|
|
|
2391
2423
|
</td>
|
|
2392
2424
|
<td>
|
|
2393
2425
|
|
|
2394
|
-
`
|
|
2395
|
-
</td>
|
|
2396
|
-
</tr>
|
|
2397
|
-
<tr>
|
|
2398
|
-
<td>
|
|
2399
|
-
|
|
2400
|
-
`titleHTML`
|
|
2401
|
-
</td>
|
|
2402
|
-
<td>
|
|
2403
|
-
|
|
2404
|
-
`string` The HTML version of the title to be displayed instead of the text version. Default `''`
|
|
2426
|
+
`Content` The text that will appear on the event. See [Content](#content). Default `''`
|
|
2405
2427
|
</td>
|
|
2406
2428
|
</tr>
|
|
2407
2429
|
<tr>
|
package/event-calendar.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ec-days,.ec-day,.ec-day-title,.ec-resource{flex:1 1 0;min-width:0;max-width:100%}.ec{display:flex;flex-direction:column;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ec ::-webkit-scrollbar{background:#fff}.ec ::-webkit-scrollbar-thumb{border:4px solid #fff;box-shadow:none;background:#dadce0;border-radius:8px;min-height:40px}.ec :hover::-webkit-scrollbar-thumb{background:#bdc1c6}.ec-hidden-scroll{display:none;overflow-y:scroll;visibility:hidden;flex-shrink:0}.ec-with-scroll .ec-hidden-scroll{display:block}.ec-toolbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}.ec-toolbar>*{margin-bottom:-0.5em}.ec-toolbar>*>*{margin-bottom:.5em}.ec-toolbar>*>*:not(:last-child){margin-right:.75em}.ec-title{margin:0}.ec-button{background-color:#fff;border:1px solid #ced4da;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem}.ec-button:not(:disabled){color:#212529;cursor:pointer}.ec-button:not(:disabled):hover,.ec-button.ec-active{background-color:#ececec;border-color:#b1bbc4}.ec-button-group{display:inline-flex}.ec-button-group .ec-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.ec-button-group .ec-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ec-icon{display:inline-block;width:1em}.ec-icon.ec-prev:after,.ec-icon.ec-next:after{content:"";position:relative;width:.5em;height:.5em;border-top:2px solid #212529;border-right:2px solid #212529;display:inline-block}.ec-icon.ec-prev:after{transform:rotate(-135deg) translate(-2px, 2px)}.ec-icon.ec-next:after{transform:rotate(45deg) translate(-2px, 2px)}.ec-header,.ec-all-day,.ec-body,.ec-days,.ec-day{border:1px solid #dadce0}.ec-header{display:flex;flex-shrink:0}.ec-header .ec-resource{flex-direction:column}.ec-header .ec-resource .ec-days{border-top-style:solid}.ec-header .ec-days{border-bottom:none}.ec-header .ec-day{min-height:24px;line-height:24px;text-align:center;overflow:hidden;text-overflow:ellipsis}.ec-all-day{flex-shrink:0;border-top:none}.ec-all-day .ec-days{border-bottom:none}.ec-all-day .ec-day{padding-bottom:4px}.ec-body{position:relative;overflow-x:hidden;overflow-y:auto}.ec:not(.ec-list) .ec-body{border-top:none}.ec-
|
|
1
|
+
.ec-days,.ec-day,.ec-day-title,.ec-resource{flex:1 1 0;min-width:0;max-width:100%}.ec{display:flex;flex-direction:column;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ec ::-webkit-scrollbar{background:#fff}.ec ::-webkit-scrollbar-thumb{border:4px solid #fff;box-shadow:none;background:#dadce0;border-radius:8px;min-height:40px}.ec :hover::-webkit-scrollbar-thumb{background:#bdc1c6}.ec-hidden-scroll{display:none;overflow-y:scroll;visibility:hidden;flex-shrink:0}.ec-with-scroll .ec-hidden-scroll{display:block}.ec-toolbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}.ec-toolbar>*{margin-bottom:-0.5em}.ec-toolbar>*>*{margin-bottom:.5em}.ec-toolbar>*>*:not(:last-child){margin-right:.75em}.ec-title{margin:0}.ec-button{background-color:#fff;border:1px solid #ced4da;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem}.ec-button:not(:disabled){color:#212529;cursor:pointer}.ec-button:not(:disabled):hover,.ec-button.ec-active{background-color:#ececec;border-color:#b1bbc4}.ec-button-group{display:inline-flex}.ec-button-group .ec-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.ec-button-group .ec-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ec-icon{display:inline-block;width:1em}.ec-icon.ec-prev:after,.ec-icon.ec-next:after{content:"";position:relative;width:.5em;height:.5em;border-top:2px solid #212529;border-right:2px solid #212529;display:inline-block}.ec-icon.ec-prev:after{transform:rotate(-135deg) translate(-2px, 2px)}.ec-icon.ec-next:after{transform:rotate(45deg) translate(-2px, 2px)}.ec-header,.ec-all-day,.ec-body,.ec-days,.ec-day{border:1px solid #dadce0}.ec-header{display:flex;flex-shrink:0}.ec-header .ec-resource{flex-direction:column}.ec-header .ec-resource .ec-days{border-top-style:solid}.ec-header .ec-days{border-bottom:none}.ec-header .ec-day{min-height:24px;line-height:24px;text-align:center;overflow:hidden;text-overflow:ellipsis}.ec-all-day{flex-shrink:0;border-top:none}.ec-all-day .ec-days{border-bottom:none}.ec-all-day .ec-day{padding-bottom:4px}.ec-body{position:relative;overflow-x:hidden;overflow-y:auto}.ec:not(.ec-list) .ec-body{border-top:none}.ec-day-grid .ec-body{flex:1 1 auto}.ec-sidebar{flex:0 0 auto;width:auto;max-width:100%;padding:0 4px 0 8px;display:flex;flex-direction:column;justify-content:center}.ec-sidebar-title{visibility:hidden;overflow-y:hidden;height:0;text-align:right}.ec-all-day .ec-sidebar-title{visibility:visible;height:auto;padding:8px 0}.ec-content{display:flex}.ec-day-grid .ec-content{flex-direction:column;height:100%}.ec-day-grid .ec-uniform .ec-content{overflow:hidden}.ec-list .ec-content{flex-direction:column}.ec-resource{display:flex}.ec-days{display:flex;border-style:none none solid}.ec-days:last-child{border-bottom:none}.ec-day-grid .ec-days,.ec-resource .ec-days{flex:1 0 auto}.ec-day-grid .ec-uniform .ec-days{flex:1 1 0%;min-height:0}.ec-day{border-style:none none none solid}.ec-day.ec-today{background-color:#fcf8e3}.ec-day.ec-highlight{background-color:#e5f7fe}.ec-day-grid .ec-body .ec-day{min-height:5em;position:relative}.ec-day-grid .ec-uniform .ec-day{min-height:0}.ec-day-grid .ec-day:first-child{border-left:none}.ec-day.ec-other-month .ec-day-head{opacity:.3}.ec-list .ec-day{flex:1 0 auto;background-color:#fff;border-style:solid none;padding:8px 14px;font-weight:bold;position:sticky;top:0;z-index:2}.ec-list .ec-day:first-child{border-top:none}.ec-day-grid .ec-day-head{text-align:right;padding:4px 4px 3px}.ec-day-grid .ec-day-foot{position:absolute;bottom:0;padding:2px;font-size:.85em}.ec-day-grid .ec-day-foot a{cursor:pointer}.ec-list .ec-day-side{float:right}.ec-list .ec-no-events{text-align:center;padding:5em 0}.ec-events{margin:0 6px 0 0}.ec-time-grid .ec-events,.ec-events.ec-preview{position:relative}.ec-event{display:flex;padding:2px;color:#fff;box-sizing:border-box;box-shadow:0 0 1px 0 #dadce0;background-color:#039be5;border-radius:3px;font-size:.85em;line-height:1.5;z-index:1}.ec-day-grid .ec-event,.ec-all-day .ec-event{position:relative}.ec-time-grid .ec-body .ec-event{position:absolute}.ec-list .ec-event{flex-direction:row;padding:8px 14px;color:inherit;background-color:rgba(0,0,0,0);border-radius:0}.ec-event.ec-preview{position:absolute;z-index:1000;width:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.8}.ec-event.ec-pointer{color:inherit;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;position:absolute;z-index:0;box-shadow:none;display:none}.ec-day:hover .ec-event.ec-pointer{display:flex}.ec-event-body{display:flex;flex-direction:column;width:100%}.ec-day-grid .ec-event-body,.ec-all-day .ec-event-body{flex-direction:row}.ec-event-tag{width:4px;border-radius:2px;margin-right:8px}.ec-event-time{overflow:hidden;white-space:nowrap;margin:0 0 1px 0;flex-shrink:0}.ec-day-grid .ec-event-time{margin:0 3px 0 0;max-width:100%;text-overflow:ellipsis}.ec-event-title{overflow:hidden}.ec-day-grid .ec-event-title,.ec-all-day .ec-event-title{min-height:1.5em;white-space:nowrap;text-overflow:ellipsis}.ec-time-grid .ec-body .ec-event-title{position:sticky;top:0}.ec-list .ec-event-title{font-size:1rem}.ec-draggable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ec-ghost{opacity:.5;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ec-bg-events{position:relative}.ec-bg-event{position:absolute;background-color:#dadce0;opacity:.3;width:100%;z-index:1}.ec-time,.ec-line{height:24px}.ec-time{position:relative;line-height:24px;top:-12px;text-align:right;white-space:nowrap}.ec-header .ec-time,.ec-all-day .ec-time{visibility:hidden;overflow-y:hidden;height:0}.ec-lines{width:8px}.ec-line:not(:first-child):after{content:"";position:absolute;width:100%;border-bottom:1px solid #dadce0;pointer-events:none}.ec-body:not(.ec-compact) .ec-line:nth-child(even):after{border-bottom-style:dotted}.ec-popup{position:absolute;top:0;display:flex;flex-direction:column;width:110%;min-width:180px;z-index:1010;padding:8px 10px 14px;background-color:#fff;border-radius:6px;outline:1px solid rgba(0,0,0,0);box-shadow:0 1px 3px 0 rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15)}.ec-popup .ec-day-head{text-align:left;display:flex;justify-content:space-between}.ec-popup .ec-day-head a{cursor:pointer;font-size:1.5em;line-height:.8}.ec-popup .ec-events{margin:0;min-height:0;overflow:auto}.ec-extra{position:relative;height:100%;overflow:hidden;margin-left:-6.5px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ec-now-indicator{position:absolute;z-index:1005;width:100%;border-top:#ea4335 solid 2px;pointer-events:none}.ec-now-indicator:before{background:#ea4335;border-radius:50%;content:"";position:absolute;height:12px;margin-top:-7px;width:12px;pointer-events:none}.ec-resizer{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ec-day-grid .ec-resizer,.ec-all-day .ec-resizer{top:0;right:0;bottom:0;width:50%;max-width:8px;cursor:ew-resize}.ec-time-grid .ec-body .ec-resizer{left:0;right:0;bottom:0;height:50%;max-height:8px;cursor:ns-resize}.ec-dragging{cursor:pointer !important}.ec-resizing-y{cursor:ns-resize !important}.ec-resizing-x{cursor:ew-resize !important}
|