54
54
</div >
55
55
56
56
<div
57
- v-if =" !event.readonly"
57
+ v-if =" !event.readonly && !restrictStart "
58
58
style ="
59
59
top : 0px ;
60
60
position : absolute ;
67
67
@mousedown.stop =" onMouseDown('top')"
68
68
/>
69
69
<div
70
- v-if =" !event.readonly"
70
+ v-if =" !event.readonly && !restrictEnd "
71
71
style ="
72
72
bottom : 0px ;
73
73
position : absolute ;
118
118
</template >
119
119
120
120
<script setup lang="ts">
121
- import { format , differenceInMinutes } from " date-fns" ;
121
+ import {
122
+ format ,
123
+ differenceInMinutes ,
124
+ isSameDay ,
125
+ endOfDay ,
126
+ startOfDay ,
127
+ addMinutes ,
128
+ } from " date-fns" ;
122
129
import { $CalendarEvent } from " ../types/interfaces" ;
123
130
import {
124
131
computed ,
@@ -154,6 +161,7 @@ const emits = defineEmits<{
154
161
155
162
const props = defineProps <{
156
163
event: $CalendarEvent ;
164
+ columnDate: Date ;
157
165
}>();
158
166
159
167
watch (hovering , (v ) => {
@@ -176,19 +184,47 @@ onUnmounted(() => {
176
184
removeEventListener (" wheel" , onMouseWheel );
177
185
});
178
186
187
+ const minutesPastMidnight = computed (() =>
188
+ differenceInMinutes (props .event .endDate , endOfDay (props .columnDate ))
189
+ );
190
+
191
+ const spansMidnight = computed (
192
+ () => ! isSameDay (props .event .startDate , props .event .endDate )
193
+ );
194
+
195
+ const restrictStart = computed (
196
+ () => spansMidnight .value && isSameDay (props .event .endDate , props .columnDate )
197
+ );
198
+
199
+ const restrictEnd = computed (
200
+ () => minutesPastMidnight .value > config .value .hoursPastMidnight * 60
201
+ );
202
+
179
203
const zIndex = computed (() => (bringToFront .value ? 99 : props .event .zIndex ));
180
204
181
205
const top = computed (() => {
182
206
return Math .round (
183
- (props .event .startDate .getHours () * 60 +
184
- props .event .startDate .getMinutes ()) *
185
- (config .value .intervalHeight / config .value .intervalMinutes )
207
+ restrictStart .value
208
+ ? 0
209
+ : (props .event .startDate .getHours () * 60 +
210
+ props .event .startDate .getMinutes ()) *
211
+ (config .value .intervalHeight / config .value .intervalMinutes )
186
212
);
187
213
});
188
214
189
215
const height = computed (() => {
190
- let h =
191
- differenceInMinutes (props .event .endDate , props .event .startDate ) *
216
+ const start = restrictStart .value
217
+ ? startOfDay (props .event .endDate )
218
+ : props .event .startDate ;
219
+ const end = restrictEnd .value
220
+ ? addMinutes (
221
+ endOfDay (props .event .startDate ),
222
+ Math .min (minutesPastMidnight .value , config .value .hoursPastMidnight * 60 )
223
+ )
224
+ : props .event .endDate ;
225
+
226
+ const h =
227
+ differenceInMinutes (end , start ) *
192
228
(config .value .intervalHeight / config .value .intervalMinutes );
193
229
return Math .max (h , config .value .intervalHeight * 0.5 );
194
230
});
@@ -234,9 +270,6 @@ function onMouseMove(e: MouseEvent) {
234
270
235
271
function onMouseDown(handle : " top" | " bottom" | " body" ) {
236
272
showTooltip .value = false ;
237
- if (props .event .readonly === true ) {
238
- return ;
239
- }
240
273
document .addEventListener (" mouseup" , onMouseUp );
241
274
emits (" event-mousedown" , handle );
242
275
}
@@ -303,6 +336,7 @@ const tooltipOffset = ref(0);
303
336
.event-card :hover {
304
337
box-shadow : 0 4px 8px rgba (0 , 0 , 0 , 0.15 ), 0 8px 16px rgba (0 , 0 , 0 , 0.15 );
305
338
}
339
+
306
340
.event-card-root > * {
307
341
box-sizing : border-box ;
308
342
width : 100% ;
0 commit comments