@event-calendar/build 5.5.0 → 5.5.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 (5) hide show
  1. package/README.md +51 -17
  2. package/dist/event-calendar.min.css +1 -1
  3. package/dist/event-calendar.min.js +3 -3
  4. package/dist/event-calendar.min.js.map +1 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -103,6 +103,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
103
103
  - [loading](#loading)
104
104
  - [locale](#locale)
105
105
  - [longPressDelay](#longpressdelay)
106
+ - [monthHeaderFormat](#monthheaderformat)
106
107
  - [moreLinkContent](#morelinkcontent)
107
108
  - [noEventsClick](#noeventsclick)
108
109
  - [noEventsContent](#noeventscontent)
@@ -257,8 +258,8 @@ This bundle contains a version of the calendar that includes all plugins and is
257
258
 
258
259
  The first step is to include the following lines of code in the `<head>` section of your page:
259
260
  ```html
260
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.4.2/dist/event-calendar.min.css">
261
- <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.4.2/dist/event-calendar.min.js"></script>
261
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.5.1/dist/event-calendar.min.css">
262
+ <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.5.1/dist/event-calendar.min.js"></script>
262
263
  ```
263
264
 
264
265
  <details>
@@ -353,7 +354,7 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
353
354
  <details>
354
355
  <summary>Default</summary>
355
356
 
356
- `{collapse: 'Collapse', close: 'Close', dayGridDay: 'day', dayGridMonth: 'month', dayGridWeek: 'week', expand: 'Expand', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'resources', resourceTimeGridWeek: 'resources', resourceTimelineDay: 'timeline', resourceTimelineMonth: 'timeline', resourceTimelineWeek: 'timeline', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
357
+ `{collapse: 'Collapse', close: 'Close', dayGridDay: 'day', dayGridMonth: 'month', dayGridWeek: 'week', expand: 'Expand', listDay: 'day', listMonth: 'month', listWeek: 'week', listYear: 'year', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', resourceTimelineDay: 'day', resourceTimelineMonth: 'month', resourceTimelineWeek: 'week', resourceTimelineYear: 'year', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
357
358
  > Views override the default value as follows:
358
359
  > - dayGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
359
360
  > - dayGridMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
@@ -367,6 +368,7 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
367
368
  > - resourceTimelineDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
368
369
  > - resourceTimelineMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
369
370
  > - resourceTimelineWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
371
+ > - resourceTimelineYear `text => ({...text, next: 'Next year', prev: 'Previous year'})`
370
372
  > - timeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
371
373
  > - timeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
372
374
 
@@ -680,6 +682,7 @@ function (date) {
680
682
  > - dayGridDay `{weekday: 'long'}`
681
683
  > - dayGridMonth `{weekday: 'short'}`
682
684
  > - resourceTimelineMonth `{weekday: 'short', day: 'numeric'}`
685
+ > - resourceTimelineYear `{weekday: 'short', day: 'numeric'}`
683
686
  > - timeGridDay `{weekday: 'long'}`
684
687
 
685
688
  Defines the text that is displayed on the calendar’s column headings.
@@ -734,6 +737,7 @@ function (date) {
734
737
  > - resourceTimelineDay `false`
735
738
  > - resourceTimelineMonth `false`
736
739
  > - resourceTimelineWeek `false`
740
+ > - resourceTimelineYear `false`
737
741
 
738
742
  Determines whether to display an event’s end time.
739
743
 
@@ -765,6 +769,7 @@ Determines whether the calendar should automatically scroll during the event dra
765
769
  > - resourceTimeGridDay `{days: 1}`
766
770
  > - resourceTimelineDay `{days: 1}`
767
771
  > - resourceTimelineMonth `{months: 1}`
772
+ > - resourceTimelineYear `{years: 1}`
768
773
  > - timeGridDay `{days: 1}`
769
774
 
770
775
  Sets the duration of a view.
@@ -1954,6 +1959,29 @@ For touch devices, the amount of time (in milliseconds) the user must hold down
1954
1959
 
1955
1960
  For a more granular configuration, see [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
1956
1961
 
1962
+ ### monthHeaderFormat
1963
+ - Type `object` or `function`
1964
+ - Default `{month: 'long'}`
1965
+
1966
+ Defines the text that is displayed in month headings in `resourceTimelineYear` view.
1967
+
1968
+ 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:
1969
+
1970
+ ```js
1971
+ function (date) {
1972
+ // return Content with the formatted date string
1973
+ }
1974
+ ```
1975
+ <table>
1976
+ <tr>
1977
+ <td>
1978
+
1979
+ `date`
1980
+ </td>
1981
+ <td>JavaScript Date object that needs to be formatted</td>
1982
+ </tr>
1983
+ </table>
1984
+
1957
1985
  ### moreLinkContent
1958
1986
  - Type `Content` or `function`
1959
1987
  - Default `undefined`
@@ -2412,6 +2440,7 @@ Defines how many pixels the user’s mouse must move before the selection begins
2412
2440
  - Default `'00:30:00'`
2413
2441
  > Views override the default value as follows:
2414
2442
  > - resourceTimelineMonth `{days: 1}`
2443
+ > - resourceTimelineYear `{days: 1}`
2415
2444
 
2416
2445
  Defines the frequency for displaying time slots.
2417
2446
 
@@ -2519,6 +2548,7 @@ If not specified, then equal to [slotDuration](#slotduration).
2519
2548
  > - resourceTimelineDay `theme => ({...theme, view: 'ec-resource ec-timeline ec-day-view'})`
2520
2549
  > - resourceTimelineMonth `theme => ({...theme, view: 'ec-resource ec-timeline ec-month-view'})`
2521
2550
  > - resourceTimelineWeek `theme => ({...theme, view: 'ec-resource ec-timeline ec-week-view'})`
2551
+ > - resourceTimelineYear `theme => ({...theme, view: 'ec-resource ec-timeline ec-year-view'})`
2522
2552
  > - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
2523
2553
  > - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
2524
2554
  </details>
@@ -2549,6 +2579,9 @@ function (theme) {
2549
2579
  - Default `{year: 'numeric', month: 'short', day: 'numeric'}`
2550
2580
  > Views override the default value as follows:
2551
2581
  > - dayGridMonth `{year: 'numeric', month: 'long'}`
2582
+ > - listDay `{year: 'numeric', month: 'long', day: 'numeric'}`
2583
+ > - listMonth `{year: 'numeric', month: 'long'}`
2584
+ > - listYear `{year: 'numeric'}`
2552
2585
  > - timeGridDay `{year: 'numeric', month: 'long', day: 'numeric'}`
2553
2586
 
2554
2587
  Defines the text that is displayed in the header toolbar’s title.
@@ -2686,6 +2719,7 @@ The following values are available:
2686
2719
  - `'resourceTimelineDay'`
2687
2720
  - `'resourceTimelineWeek'`
2688
2721
  - `'resourceTimelineMonth'`
2722
+ - `'resourceTimelineYear'`
2689
2723
  - `'timeGridDay'`
2690
2724
  - `'timeGridWeek'`
2691
2725
 
@@ -2765,7 +2799,7 @@ function (arg) {
2765
2799
  - Type `boolean`
2766
2800
  - Default `false`
2767
2801
 
2768
- Determines whether week numbers should be displayed in the `dayGrid` view.
2802
+ Determines whether week numbers should be displayed in `dayGrid`/`resourceTimeline` views.
2769
2803
 
2770
2804
  The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system.
2771
2805
 
@@ -2775,20 +2809,20 @@ Methods allow you to manipulate EventCalendar after initialization. They are acc
2775
2809
  In Svelte, methods are available from a component instance:
2776
2810
  ```html
2777
2811
  <script>
2778
- import {Calendar, TimeGrid} from '@event-calendar/core';
2812
+ import {Calendar, TimeGrid} from '@event-calendar/core';
2779
2813
 
2780
- let ec = $state();
2781
- let options = $state({
2782
- view: 'timeGridWeek',
2783
- eventSources: [{events: function() {
2784
- console.log('fetching...');
2785
- return [];
2786
- }}]
2787
- });
2788
-
2789
- function invokeMethod() {
2790
- ec.refetchEvents();
2791
- }
2814
+ let ec = $state();
2815
+ let options = $state({
2816
+ view: 'timeGridWeek',
2817
+ eventSources: [{events: function() {
2818
+ console.log('fetching...');
2819
+ return [];
2820
+ }}]
2821
+ });
2822
+
2823
+ function invokeMethod() {
2824
+ ec.refetchEvents();
2825
+ }
2792
2826
  </script>
2793
2827
 
2794
2828
  <button onclick={invokeMethod}>Refetch events</button>
package/dist/event-calendar.min.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * EventCalendar v5.5.0
2
+ * EventCalendar v5.5.1
3
3
  * https://github.com/vkurko/calendar
4
4
  */
5
5
  .ec{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ec-color-400:oklch(70.8% 0 0);--ec-color-300:oklch(87% 0 0);--ec-color-200:oklch(92.2% 0 0);--ec-color-100:oklch(97% 0 0);--ec-color-50:oklch(98.5% 0 0);--ec-bg-color:#fff;--ec-text-color:currentcolor;--ec-border-color:var(--ec-color-300);--ec-button-bg-color:var(--ec-bg-color);--ec-button-border-color:var(--ec-border-color);--ec-button-text-color:var(--ec-text-color);--ec-button-active-bg-color:var(--ec-color-200);--ec-button-active-border-color:var(--ec-color-400);--ec-button-active-text-color:var(--ec-button-text-color);--ec-today-bg-color:oklch(98.7% .026 102.212);--ec-highlight-color:oklch(98.4% .019 200.873);--ec-event-bg-color:oklch(70.7% .165 254.624);--ec-event-text-color:#fff;--ec-bg-event-color:var(--ec-color-300);--ec-bg-event-opacity:.3;--ec-event-col-gap:.375rem;--ec-now-indicator-color:oklch(63.7% .237 25.331);--ec-popup-bg-color:var(--ec-bg-color)}.ec-dark .ec{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ec-color-400:oklch(43.9% 0 0);--ec-color-300:oklch(37.1% 0 0);--ec-color-200:oklch(26.9% 0 0);--ec-color-100:oklch(20.5% 0 0);--ec-color-50:oklch(14.5% 0 0);--ec-bg-color:var(--ec-color-100);--ec-today-bg-color:oklch(28.6% .066 53.813);--ec-highlight-color:oklch(30.2% .056 229.695);--ec-bg-event-opacity:.5}@media (prefers-color-scheme:dark){.ec-auto-dark .ec{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--ec-color-400:oklch(43.9% 0 0);--ec-color-300:oklch(37.1% 0 0);--ec-color-200:oklch(26.9% 0 0);--ec-color-100:oklch(20.5% 0 0);--ec-color-50:oklch(14.5% 0 0);--ec-bg-color:var(--ec-color-100);--ec-today-bg-color:oklch(28.6% .066 53.813);--ec-highlight-color:oklch(30.2% .056 229.695);--ec-bg-event-opacity:.5}}.ec-day{--ec-day-bg-color:var(--ec-bg-color);background-color:var(--ec-day-bg-color);border:1px solid var(--ec-border-color);border-block-start:none;border-inline-start:none}.ec-day.ec-today{--ec-day-bg-color:var(--ec-today-bg-color)}.ec-day.ec-highlight{--ec-day-bg-color:var(--ec-highlight-color)}.ec-time-grid .ec-body .ec-day{background-image:linear-gradient(to top, var(--ec-day-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px), linear-gradient(to right, var(--ec-day-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);background-size:100% 100%, 100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)), 2px 100%, 100% var(--ec-slot-height)}.ec-timeline:not(.ec-month-view,.ec-year-view) .ec-body .ec-day{--ec-last-line-color:transparent;--ec-direction:to left}[dir=rtl] :is(.ec-timeline:not(.ec-month-view,.ec-year-view) .ec-body .ec-day){--ec-direction:to right}.ec-timeline:not(.ec-month-view,.ec-year-view) .ec-body .ec-day{background-image:linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px), linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px), linear-gradient(var(--ec-day-bg-color) 1px, transparent 1px), linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);background-size:100% 100%, calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%, 100% 2px, var(--ec-slot-width) 100%;border-inline:none}.ec-timeline:not(.ec-month-view,.ec-year-view) .ec-body .ec-day.ec-no-ieb{--ec-last-line-color:var(--ec-day-bg-color)}.ec-day-grid .ec-day{flex-direction:column;justify-content:space-between;min-block-size:5em;display:flex}.ec-day-grid .ec-uniform .ec-day{min-block-size:auto}.ec-list .ec-day{border-inline:none}.ec-list .ec-day:last-child{border:none}.ec-day.ec-no-ieb{border-inline-end:none}.ec-day.ec-no-beb{border-block-end:none}.ec-day-head{flex-direction:row-reverse;justify-content:space-between;display:flex}.ec-day-grid.ec-month-view .ec-day-head{padding:.375rem}.ec-day.ec-other-month .ec-day-head time{opacity:.3}.ec-list .ec-day-head{background-color:var(--ec-day-bg-color);border-block-end:1px solid var(--ec-border-color);flex-direction:unset;z-index:2;margin:0 0 -1px;padding:.5em 1.5em;position:sticky;inset-block-start:0}.ec-day-foot{padding:.18rem;font-size:.85em}.ec-day-foot a{cursor:pointer}.ec-disabled{position:relative}.ec-disabled:after{content:"";background-color:var(--ec-bg-event-color);opacity:var(--ec-bg-event-opacity);position:absolute;inset:0}.ec-toolbar{justify-content:space-between;align-items:center;margin-block-end:1em;display:flex}.ec-toolbar>*{flex-wrap:wrap;gap:.5rem .75rem;display:inline-flex}.ec-title{margin:0}.ec-button{background-color:var(--ec-button-bg-color);border:1px solid var(--ec-button-border-color);border-radius:.25rem;padding:.375rem .75rem;font-size:1rem;line-height:1.5}.ec-button:not(:disabled){color:var(--ec-button-text-color);cursor:pointer}.ec-button:not(:disabled):hover,.ec-button.ec-active{background-color:var(--ec-button-active-bg-color);border-color:var(--ec-button-active-border-color);color:var(--ec-button-active-text-color);z-index:1}.ec-button-group{vertical-align:top;display:inline-flex}.ec-button-group .ec-button:not(:first-child){border-start-start-radius:0;border-end-start-radius:0;margin-inline-start:-1px}.ec-button-group .ec-button:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ec-icon{inline-size:1em;display:inline-block}.ec-icon.ec-prev:after,.ec-icon.ec-next:after{content:"";border-block-start:2px solid;border-inline-end:2px solid;block-size:.5em;inline-size:.5em;display:inline-block;position:relative}.ec-icon.ec-prev:after{inset-inline-start:3px;rotate:-135deg}[dir=rtl] .ec-icon.ec-prev:after{rotate:135deg}.ec-icon.ec-next:after{inset-inline-start:-3px;rotate:45deg}[dir=rtl] .ec-icon.ec-next:after{rotate:-45deg}.ec-sidebar{z-index:1;background-color:var(--ec-bg-color);border-inline-end:1px solid var(--ec-border-color);text-align:end;position:sticky;inset-inline-start:0;overflow:clip}.ec-header .ec-sidebar{border-block-end:1px solid var(--ec-border-color);padding-block:.375rem}.ec-time-grid .ec-sidebar{padding-inline:.75rem}.ec-time-grid .ec-body .ec-sidebar{--ec-direction:to left}[dir=rtl] :is(.ec-time-grid .ec-body .ec-sidebar){--ec-direction:to right}.ec-time-grid .ec-body .ec-sidebar{background-image:linear-gradient(var(--ec-direction), transparent .375rem, var(--ec-bg-color) .375rem), linear-gradient(to top, var(--ec-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px), linear-gradient(to right, var(--ec-bg-color) 1px, transparent 1px), linear-gradient(to top, var(--ec-border-color) 1px, transparent 1px);background-size:100% 100%, 100% 100%, 100% calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity)), 2px 100%, 100% var(--ec-slot-height)}.ec-timeline .ec-body .ec-sidebar{grid-area:1/1/-1/2;grid-template-rows:subgrid;display:grid}.ec-row-head{border-block-end:1px solid var(--ec-border-color);min-block-size:1.5em;padding:.375em .75rem;display:flex}.ec-row-head:last-child{border:none}.ec-expander{inline-size:1.25em;margin-block-start:-1px;margin-inline-end:.25em}.ec-expander .ec-button{aspect-ratio:1;block-size:1.25em;padding:0;line-height:normal}.ec-slot{white-space:nowrap}.ec-time-grid .ec-slot{block-size:calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity));position:relative;inset-block-start:-.5lh}.ec-timeline .ec-slot{grid-column:span var(--ec-slot-label-periodicity);text-overflow:ellipsis;padding:.18rem 0;font-size:.95em;overflow:clip}.ec-slots{grid-auto-flow:column;grid-auto-columns:var(--ec-slot-width);text-align:center;--ec-day-bg-color:var(--ec-bg-color);background-color:var(--ec-day-bg-color);border-block-end:1px solid var(--ec-border-color);display:grid}.ec-slots.ec-today{--ec-day-bg-color:var(--ec-today-bg-color)}.ec-slots.ec-highlight{--ec-day-bg-color:var(--ec-highlight-color)}.ec-slots{--ec-last-line-color:transparent;--ec-direction:to left}[dir=rtl] .ec-slots{--ec-direction:to right}.ec-slots{background-image:linear-gradient(var(--ec-direction), var(--ec-last-line-color) 1px, transparent 1px), linear-gradient(var(--ec-direction), var(--ec-border-color) 1px, transparent 1px);background-size:100% 100%, calc(var(--ec-slot-width) * var(--ec-slot-label-periodicity)) 100%}.ec-slots:last-child{--ec-last-line-color:var(--ec-day-bg-color)}.ec-events{grid-area:1/2/-1/-1;grid-template:subgrid / subgrid;isolation:isolate;pointer-events:none;display:grid}.ec-day-grid .ec-events{grid-column-start:1}.ec-event{color:var(--ec-event-text-color);box-sizing:border-box;box-shadow:0 0 1px 0 var(--ec-border-color);background-color:var(--ec-event-bg-color);z-index:1;pointer-events:all;inline-size:calc(100% - var(--ec-event-col-gap));border-radius:3px;padding:2px;font-size:.85em;line-height:1.5;display:flex;position:relative}.ec-time-grid .ec-event{grid-row:1}.ec-day-grid .ec-event,.ec-all-day .ec-event,.ec-timeline .ec-event{block-size:max-content;margin-block-end:var(--ec-event-col-gap)}.ec-list .ec-event{color:inherit;background-color:var(--ec-day-bg-color);border-radius:0;flex-direction:row;padding:.5em 1.5em}.ec-event.ec-preview{z-index:1000;-webkit-user-select:none;user-select:none;opacity:.8}.ec-event.ec-pointer{color:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;box-shadow:none}.ec-bg-event{background-color:var(--ec-bg-event-color);opacity:var(--ec-bg-event-opacity);grid-row:1;position:relative}.ec-draggable{cursor:pointer;-webkit-user-select:none;user-select:none}.ec-ghost{opacity:.5;-webkit-user-select:none;user-select:none;pointer-events:none}.ec-event-body{flex-direction:column;inline-size:100%;display:flex}.ec-day-grid .ec-event-body,.ec-all-day .ec-event-body,.ec-timeline .ec-event-body{flex-direction:row}.ec-event-tag{border-radius:2px;inline-size:4px;margin-inline-end:8px}.ec-event-time{white-space:nowrap;flex-shrink:0;max-block-size:100%;margin:0 0 1px;overflow:hidden}.ec-day-grid .ec-event-time,.ec-timeline .ec-event-time{text-overflow:ellipsis;max-inline-size:100%;margin:0 3px 0 0}.ec-event-title{font-weight:inherit;margin:0;overflow:hidden}.ec-time-grid .ec-event-title{position:sticky;inset-block-start:var(--ec-header-height)}.ec-day-grid .ec-event-title,.ec-all-day .ec-event-title,.ec-timeline .ec-event-title{white-space:nowrap;text-overflow:ellipsis;min-block-size:1.5em;position:sticky;inset-inline-start:calc(var(--ec-sidebar-width) + .18em)}.ec-list .ec-event-title{font-size:1rem}.ec-resizer{-webkit-user-select:none;user-select:none;position:absolute}.ec-time-grid .ec-body .ec-resizer{cursor:ns-resize;block-size:50%;max-block-size:8px;inset:auto 0 0}.ec-time-grid .ec-body .ec-resizer.ec-start{inset:0 0 auto}.ec-day-grid .ec-resizer,.ec-all-day .ec-resizer,.ec-timeline .ec-resizer{cursor:ew-resize;inline-size:50%;max-inline-size:8px;inset:0 0 0 auto}:is(.ec-day-grid .ec-resizer,.ec-all-day .ec-resizer,.ec-timeline .ec-resizer).ec-start{inset:0 auto 0 0}.ec-dragging,.ec-dragging *{cursor:pointer!important}.ec-resizing-y,.ec-resizing-y *{cursor:ns-resize!important}.ec-resizing-x,.ec-resizing-x *{cursor:ew-resize!important}.ec-no-events{text-align:center;background-color:var(--ec-bg-color);padding:5em 0}.ec-now-indicator{pointer-events:none;will-change:inset;grid-row:2;position:relative}.ec-time-grid .ec-now-indicator{border-block-start:var(--ec-now-indicator-color) solid 2px;block-size:0;inline-size:100%}.ec-timeline .ec-now-indicator{border-inline-start:var(--ec-now-indicator-color) solid 2px;inline-size:0}.ec-timeline .ec-now-indicator:before{z-index:2;inset-block-start:calc(var(--ec-header-height) - 6.5px)}.ec-now-indicator:before{background:var(--ec-now-indicator-color);content:"";block-size:12px;inline-size:12px;z-index:1;border-radius:50%;margin-block-start:-7px;margin-inline-start:-7px;display:block;position:sticky;inset-inline-start:calc(var(--ec-sidebar-width) - 6.5px)}.ec-popup{box-sizing:border-box;background-color:var(--ec-popup-bg-color);border:1px solid var(--ec-border-color);block-size:max-content;min-block-size:8em;inline-size:125%;min-inline-size:12em;box-shadow:var(--ec-color-300) 0 10px 15px -3px, var(--ec-color-300) 0 4px 6px -4px;border-radius:.25rem;flex-direction:column;padding:.375rem .75rem .75rem;display:flex;position:relative}.ec-popup .ec-day-head{flex-direction:row;padding-inline:0}.ec-popup .ec-day-head a{cursor:pointer;font-size:1.5em;line-height:.8}.ec-popup .ec-events{--ec-event-col-gap:0;pointer-events:auto;display:block;overflow-y:auto}.ec-custom-scrollbars .ec-main::-webkit-scrollbar{background-color:#0000}.ec-custom-scrollbars .ec-main::-webkit-scrollbar-thumb{box-shadow:none;background-color:var(--ec-border-color);background-clip:padding-box;border:4px solid #0000;border-radius:8px}.ec-custom-scrollbars .ec-main::-webkit-scrollbar-thumb:hover{background-color:var(--ec-color-400)}.ec{flex-direction:column;display:flex}.ec-main{border:1px solid var(--ec-border-color);display:grid;overflow:auto}.ec-time-grid .ec-main{grid-template-columns:max-content repeat(var(--ec-grid-cols), var(--ec-col-width));grid-template-rows:repeat(2,max-content)}.ec-day-grid .ec-main{--ec-row-height:auto;grid-template-columns:repeat(var(--ec-grid-cols), minmax(0, 1fr));grid-template-rows:max-content repeat(var(--ec-grid-rows), var(--ec-row-height))}.ec-day-grid .ec-main.ec-uniform{--ec-row-height:minmax(0, 1fr);flex-grow:1;overflow:hidden}.ec-timeline .ec-main{grid-template-columns:max-content repeat(var(--ec-grid-cols), min-content);grid-template-rows:max-content var(--ec-grid-rows);flex-grow:1}.ec-timeline:is(.ec-month-view,.ec-year-view) .ec-main{grid-template-columns:max-content repeat(var(--ec-grid-cols), var(--ec-col-width))}.ec-header{grid-area:1/1/2/-1;grid-template-columns:subgrid;z-index:2;display:grid;position:sticky;inset-block-start:0}.ec-grid{grid-area:1/1/-1/-1;grid-template-columns:subgrid;display:grid}.ec-body .ec-grid{grid-template-rows:subgrid}.ec-time-grid .ec-grid,.ec-timeline .ec-grid{grid-column-start:2}.ec-all-day{grid-area:2/1/auto/-1;grid-template-columns:subgrid;min-block-size:var(--ec-slot-height);display:grid}.ec-col-group{grid-column:span var(--ec-col-group-span)}.ec-col-group,.ec-col-head{text-align:center;background-color:var(--ec-bg-color);border:1px solid var(--ec-border-color);text-overflow:ellipsis;border-block-start:none;border-inline-start:none;padding:.375rem .18em;overflow:clip}:is(.ec-col-group,.ec-col-head).ec-today{background-color:var(--ec-today-bg-color)}:is(.ec-col-group,.ec-col-head).ec-highlight{background-color:var(--ec-highlight-color)}.ec-col-group:nth-last-child(1 of .ec-col-group),.ec-col-head:nth-last-child(1 of .ec-col-head){border-inline-end:none}.ec-col-group>*,.ec-timeline .ec-col-head>*{position:sticky;inset-inline-start:calc(var(--ec-sidebar-width) + .18em)}.ec-body{grid-area:2/1/-1/-1;grid-template:subgrid / subgrid;display:grid}.ec-hidden{visibility:hidden}