@event-calendar/core 4.7.1 → 5.0.1

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.
Files changed (93) hide show
  1. package/README.md +29 -51
  2. package/dist/index.css +636 -731
  3. package/dist/index.js +2576 -3178
  4. package/package.json +2 -2
  5. package/src/Auxiliary.svelte +2 -13
  6. package/src/Buttons.svelte +62 -52
  7. package/src/Calendar.svelte +9 -3
  8. package/src/lib/a11y.js +2 -2
  9. package/src/lib/attachments.js +61 -0
  10. package/src/lib/chunks.js +117 -0
  11. package/src/lib/components/BaseDay.svelte +50 -0
  12. package/src/lib/components/BaseEvent.svelte +3 -3
  13. package/src/lib/components/ColHead.svelte +34 -0
  14. package/src/lib/components/DayHeader.svelte +14 -0
  15. package/src/lib/components/InteractableEvent.svelte +1 -3
  16. package/src/lib/components/index.js +3 -0
  17. package/src/lib/date.js +1 -1
  18. package/src/lib/dom.js +0 -4
  19. package/src/lib/events.js +10 -134
  20. package/src/lib/index.js +3 -2
  21. package/src/lib/{times.js → slots.js} +14 -19
  22. package/src/lib/stores.js +0 -33
  23. package/src/lib/utils.js +11 -2
  24. package/src/lib/view.js +0 -4
  25. package/src/plugins/day-grid/Day.svelte +36 -129
  26. package/src/plugins/day-grid/Event.svelte +42 -41
  27. package/src/plugins/day-grid/Popup.svelte +65 -48
  28. package/src/plugins/day-grid/View.svelte +76 -4
  29. package/src/plugins/day-grid/index.js +5 -5
  30. package/src/plugins/day-grid/lib.js +61 -0
  31. package/src/plugins/day-grid/stores.js +2 -20
  32. package/src/plugins/interaction/Action.svelte +44 -43
  33. package/src/plugins/interaction/Auxiliary.svelte +4 -4
  34. package/src/plugins/interaction/Pointer.svelte +8 -12
  35. package/src/plugins/interaction/Resizer.svelte +2 -2
  36. package/src/plugins/interaction/lib/utils.js +1 -5
  37. package/src/plugins/list/Day.svelte +8 -24
  38. package/src/plugins/list/View.svelte +39 -2
  39. package/src/plugins/resource-time-grid/Label.svelte +2 -2
  40. package/src/plugins/resource-time-grid/View.svelte +55 -83
  41. package/src/plugins/resource-time-grid/index.js +19 -10
  42. package/src/plugins/resource-time-grid/lib.js +31 -0
  43. package/src/plugins/resource-time-grid/options.js +10 -0
  44. package/src/plugins/resource-time-grid/stores.js +34 -0
  45. package/src/plugins/resource-timeline/Day.svelte +10 -73
  46. package/src/plugins/resource-timeline/Event.svelte +14 -23
  47. package/src/plugins/resource-timeline/Header.svelte +5 -5
  48. package/src/plugins/resource-timeline/Label.svelte +4 -12
  49. package/src/plugins/resource-timeline/NowIndicator.svelte +33 -28
  50. package/src/plugins/resource-timeline/View.svelte +129 -14
  51. package/src/plugins/resource-timeline/index.js +26 -23
  52. package/src/plugins/resource-timeline/lib.js +115 -118
  53. package/src/plugins/resource-timeline/stores.js +11 -7
  54. package/src/plugins/time-grid/AllDayEvent.svelte +31 -0
  55. package/src/plugins/time-grid/Day.svelte +11 -99
  56. package/src/plugins/time-grid/Event.svelte +18 -20
  57. package/src/plugins/time-grid/NowIndicator.svelte +35 -10
  58. package/src/plugins/time-grid/View.svelte +129 -35
  59. package/src/plugins/time-grid/index.js +10 -8
  60. package/src/plugins/time-grid/lib.js +142 -0
  61. package/src/plugins/time-grid/options.js +57 -0
  62. package/src/plugins/time-grid/stores.js +41 -8
  63. package/src/storage/options.js +4 -39
  64. package/src/storage/state.js +1 -4
  65. package/src/storage/stores.js +43 -12
  66. package/src/styles/days.css +91 -0
  67. package/src/styles/events.css +180 -0
  68. package/src/styles/index.css +126 -0
  69. package/src/styles/now-indicator.css +35 -0
  70. package/src/styles/popup.css +30 -0
  71. package/src/styles/sidebar.css +60 -0
  72. package/src/styles/slots.css +42 -0
  73. package/src/styles/theme.css +68 -0
  74. package/src/styles/toolbar.css +88 -0
  75. package/src/lib/actions.js +0 -52
  76. package/src/plugins/day-grid/Body.svelte +0 -54
  77. package/src/plugins/day-grid/Header.svelte +0 -20
  78. package/src/plugins/day-grid/Week.svelte +0 -60
  79. package/src/plugins/list/Body.svelte +0 -44
  80. package/src/plugins/resource-timeline/Body.svelte +0 -67
  81. package/src/plugins/resource-timeline/Days.svelte +0 -72
  82. package/src/plugins/resource-timeline/Sidebar.svelte +0 -35
  83. package/src/plugins/time-grid/Body.svelte +0 -43
  84. package/src/plugins/time-grid/Section.svelte +0 -29
  85. package/src/plugins/time-grid/all-day/Day.svelte +0 -65
  86. package/src/plugins/time-grid/all-day/Event.svelte +0 -37
  87. package/src/plugins/time-grid/all-day/Week.svelte +0 -65
  88. package/src/plugins/time-grid/utils.js +0 -58
  89. package/src/styles/day-grid.scss +0 -51
  90. package/src/styles/index.scss +0 -553
  91. package/src/styles/theme.scss +0 -95
  92. package/src/styles/time-grid.scss +0 -83
  93. package/src/styles/timeline.scss +0 -152
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 & timeline views:
6
6
 
7
- * Lightweight (37kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
7
+ * Lightweight (35kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
8
8
  * 100% human-coded
9
9
  * Zero-dependency (standalone bundle)
10
10
  * Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
@@ -39,6 +39,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
39
39
  - [allDayContent](#alldaycontent)
40
40
  - [allDaySlot](#alldayslot)
41
41
  - [buttonText](#buttontext)
42
+ - [columnWidth](#columnwidth)
42
43
  - [customButtons](#custombuttons)
43
44
  - [date](#date)
44
45
  - [dateClick](#dateclick)
@@ -244,8 +245,8 @@ This bundle contains a version of the calendar that includes all plugins and is
244
245
 
245
246
  The first step is to include the following lines of code in the `<head>` section of your page:
246
247
  ```html
247
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.7.1/dist/event-calendar.min.css">
248
- <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.7.1/dist/event-calendar.min.js"></script>
248
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.1/dist/event-calendar.min.css">
249
+ <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.1/dist/event-calendar.min.js"></script>
249
250
  ```
250
251
 
251
252
  <details>
@@ -369,6 +370,16 @@ function (text) {
369
370
  </tr>
370
371
  </table>
371
372
 
373
+ ### columnWidth
374
+ - Type `string`
375
+ - Default `undefined`
376
+
377
+ Defines the column width in `timeGrid`/`resourceTimeGrid` views.
378
+
379
+ This option accepts a CSS [length](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/grid-template-columns#values) value, so be sure to include `px` if you specify the value in pixels.
380
+
381
+ If this option is `undefined`, the column width will adjust to the calendar width.
382
+
372
383
  ### customButtons
373
384
  - Type `object` or `function`
374
385
  - Default `{}`
@@ -1320,34 +1331,7 @@ function (a, b) {
1320
1331
  }
1321
1332
  ```
1322
1333
 
1323
- `a` and `b` are objects (so called `event chunks`) with the following properties:
1324
-
1325
- <table>
1326
- <tr>
1327
- <td>
1328
-
1329
- `start`
1330
- </td>
1331
- <td>JavaScript Date object holding the event chunk’s start time</td>
1332
- </tr>
1333
- <tr>
1334
- <td>
1335
-
1336
- `end`
1337
- </td>
1338
- <td>JavaScript Date object holding the event chunk’s end time</td>
1339
- </tr>
1340
- <tr>
1341
- <td>
1342
-
1343
- `event`
1344
- </td>
1345
- <td>
1346
-
1347
- The [Event](#event-object) object associated with this chunk
1348
- </td>
1349
- </tr>
1350
- </table>
1334
+ `a` and `b` are [Event](#event-object) objects.
1351
1335
 
1352
1336
  ### eventResizableFromStart
1353
1337
  - Type `boolean`
@@ -2234,13 +2218,7 @@ If set to `false`, then intersecting events will be placed next to each other.
2234
2218
  - Type `integer`
2235
2219
  - Default `24`
2236
2220
 
2237
- Defines the time slot height in pixels in the `timeGrid`/`resourceTimeGrid` views. When changing the setting, you must additionally override the following CSS styles:
2238
-
2239
- ```css
2240
- .ec-time-grid .ec-time, .ec-time-grid .ec-line {
2241
- height: 24px; /* override this value */
2242
- }
2243
- ```
2221
+ Defines the time slot height in pixels in the `timeGrid`/`resourceTimeGrid` views.
2244
2222
 
2245
2223
  ### slotLabelFormat
2246
2224
  - Type `object` or `function`
@@ -2295,19 +2273,18 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
2295
2273
 
2296
2274
  ### slotWidth
2297
2275
  - Type `integer`
2298
- - Default `72`
2299
-
2300
- Defines the time slot width in pixels in `resourceTimeline` views. When changing the setting, you must additionally override the following CSS styles:
2276
+ - Default `16`
2301
2277
 
2302
- ```css
2303
- .ec-timeline .ec-time, .ec-timeline .ec-line {
2304
- width: 72px; /* override this value */
2305
- }
2306
- ```
2278
+ Defines the time slot width in pixels in `resourceTimeline` views.
2307
2279
 
2308
2280
  ### theme
2309
2281
  - Type `object` or `function`
2310
- - Default `{allDay: 'ec-all-day', active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', container: 'ec-container', content: 'ec-content', day: 'ec-day', dayHead: 'ec-day-head', dayFoot: 'ec-day-foot', days: 'ec-days', daySide: 'ec-day-side', 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', expander: 'ec-expander', 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', main: 'ec-main', minor: 'ec-minor', 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', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', today: 'ec-today', time: 'ec-time', times: 'ec-times', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-timeline ec-resource-week-view', weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'], withScroll: 'ec-with-scroll', uniform: 'ec-uniform'}`
2282
+ <ul>
2283
+ <li>
2284
+ <details>
2285
+ <summary>Default</summary>
2286
+
2287
+ `'{allDay: 'ec-all-day', active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', colHead: 'ec-col-head', day: 'ec-day', dayHead: 'ec-day-head', disabled: 'ec-disabled', event: 'ec-event', eventBody: 'ec-event-body', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', grid: 'ec-grid', header: 'ec-header', hidden: 'ec-hidden', highlight: 'ec-highlight', icon: 'ec-icon', main: 'ec-main', today: 'ec-today', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-list ec-week-view', weekdays":["ec-sun', ec-mon', ec-tue', ec-wed', ec-thu', ec-fri', ec-sat"],"draggable: 'ec-draggable', ghost: 'ec-ghost', preview: 'ec-preview', pointer: 'ec-pointer', resizer: 'ec-resizer', start: 'ec-start', dragging: 'ec-dragging', resizingY: 'ec-resizing-y', resizingX: 'ec-resizing-x', selecting: 'ec-selecting', uniform: 'ec-uniform', dayFoot: 'ec-day-foot', otherMonth: 'ec-other-month', popup: 'ec-popup', weekNumber: 'ec-week-number', daySide: 'ec-day-side', eventTag: 'ec-event-tag', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', sidebar: 'ec-sidebar', slot: 'ec-slot', colGroup: 'ec-col-group', expander: 'ec-expander', rowHead: 'ec-row-head', slots: 'ec-slots}'`
2311
2288
  > Views override the default value as follows:
2312
2289
  > - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-view'})`
2313
2290
  > - listDay `theme => ({...theme, view: 'ec-list ec-day-view'})`
@@ -2321,6 +2298,9 @@ Defines the time slot width in pixels in `resourceTimeline` views. When changing
2321
2298
  > - resourceTimelineWeek `theme => ({...theme, view: 'ec-timeline ec-resource-week-view'})`
2322
2299
  > - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
2323
2300
  > - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
2301
+ </details>
2302
+ </li>
2303
+ </ul>
2324
2304
 
2325
2305
  Defines the CSS classes that EventCalendar uses to generate HTML markup.
2326
2306
 
@@ -3248,16 +3228,14 @@ The library provides a built-in dark theme. You can activate it by adding the `e
3248
3228
 
3249
3229
  If you want the dark theme to be activated automatically based on the [preferred color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), then use the `ec-auto-dark` CSS class instead.
3250
3230
 
3251
- Please note that the dark theme does not change the background and font color in the calendar. These are assumed to be set by the page styles, and the calendar inherits these styles.
3252
-
3253
- If you do need to set the background or font color of the calendar, use local CSS variables for this:
3231
+ You can also customize the colors in the calendar by overriding CSS variables, for example:
3254
3232
  ```css
3255
3233
  .ec {
3256
3234
  --ec-bg-color: #22272e;
3257
3235
  --ec-text-color: #adbac7;
3258
3236
  }
3259
3237
  ```
3260
- A list of all available CSS variables can be found [here](packages/core/src/styles/theme.scss).
3238
+ A list of all available CSS variables can be found [here](packages/core/src/styles/theme.css).
3261
3239
 
3262
3240
  ## Browser support
3263
3241