dragStartElement(e, ev)}
+ on:dragend={dragEndElement}
>
+
mouseDownElement(e, ev, 'top')}
+ on:contextmenu={(e) => showMenu(e, ev)}
+ />
+
mouseDownElement(e, ev, 'bottom')}
+ on:contextmenu={(e) => showMenu(e, ev)}
+ />
{
- dispatch('drop', {
- date: new Date(event.date)
- })
- }}
- on:resize={() => (events = events)}
/>
{/if}
@@ -778,7 +923,7 @@
&::after {
position: absolute;
content: '';
- inset: 0;
+ inset: -1px;
z-index: 5;
}
}
@@ -847,7 +992,61 @@
&:not(.withPointer) {
pointer-events: none;
}
+ &-start,
+ &-end {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: 0.5rem;
+ border-radius: 0.5rem;
+
+ &::after {
+ position: absolute;
+ content: '';
+ left: -0.25rem;
+ right: -0.25rem;
+ height: 1rem;
+ border: 1px solid transparent;
+ border-radius: 0.5rem;
+ transition-property: opacity, border-width, transform;
+ transition-duration: 0.15s;
+ transition-timing-function: var(--timing-main);
+ transform: scale(0.9);
+ opacity: 0;
+ cursor: row-resize;
+ filter: drop-shadow(0 0 2px var(--primary-edit-border-color));
+ pointer-events: none;
+ }
+ &.allowed::after {
+ pointer-events: all;
+ z-index: 10;
+ }
+ &.allowed:hover::after,
+ &.hovered::after {
+ border-width: 1px;
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
+ &-start {
+ top: 0;
+ &::after {
+ top: -0.25rem;
+ border-top-color: var(--primary-edit-border-color);
+ }
+ }
+ &-end {
+ bottom: 0;
+ &::after {
+ bottom: -0.25rem;
+ border-bottom-color: var(--primary-edit-border-color);
+ }
+ }
}
+ :global(.calendar-element.past .event-container) {
+ opacity: 0.4;
+ }
+
.sticky-header {
position: sticky;
background-color: var(--theme-comp-header-color);
diff --git a/plugins/calendar-resources/src/components/EditEvent.svelte b/plugins/calendar-resources/src/components/EditEvent.svelte
index 93ac4a2087..300c4cedd7 100644
--- a/plugins/calendar-resources/src/components/EditEvent.svelte
+++ b/plugins/calendar-resources/src/components/EditEvent.svelte
@@ -13,22 +13,21 @@
// limitations under the License.
-->