adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-15 03:32:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve visual snapping boundaries

Browse Source
This commit is contained in:
Gregor Vostrak
2026-02-24 14:02:18 +01:00
parent 8973be9dab
commit cae41e4b4f
2 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
resources/js/packages/ui/src/FullCalendar/TimeEntryCalendar.vue
View File

@@ -235,8 +235,8 @@ function handleDateSelect(arg: { start: Date; end: Date }) {
.utc()
.tz(getUserTimezone(), true);
const endLocal = getDayJsInstance()(arg.end.toISOString()).utc().tz(getUserTimezone(), true);
const snappedStart = snapToGrid(startLocal, snap);
let snappedEnd = snapToGrid(endLocal, snap);
const snappedStart = snapStartToGrid(startLocal, snap);
let snappedEnd = snapEndToGrid(endLocal, snap);
if (!snappedEnd.isAfter(snappedStart)) {
snappedEnd = snappedStart.add(snap, 'minute');
}
@@ -255,10 +255,17 @@ function handleEventClick(arg: EventClickArg) {
showEditTimeEntryModal.value = true;
}
// Snap a dayjs time to the nearest snap interval boundary
function snapToGrid(time: Dayjs, snapMinutes: number): Dayjs {
// Snap a dayjs time down to the previous snap boundary (for start times)
function snapStartToGrid(time: Dayjs, snapMinutes: number): Dayjs {
const minutes = time.hour() * 60 + time.minute();
const snapped = Math.round(minutes / snapMinutes) * snapMinutes;
const snapped = Math.floor(minutes / snapMinutes) * snapMinutes;
return time.startOf('day').add(snapped, 'minute');
}
// Snap a dayjs time up to the next snap boundary (for end times)
function snapEndToGrid(time: Dayjs, snapMinutes: number): Dayjs {
const minutes = time.hour() * 60 + time.minute();
const snapped = Math.ceil(minutes / snapMinutes) * snapMinutes;
return time.startOf('day').add(snapped, 'minute');
}
@@ -291,7 +298,7 @@ async function handleEventDrop(arg: EventDropArg) {
.utc()
.tz(getUserTimezone(), true)
.second(0);
const snappedStart = snapToGrid(startLocal, snap);
const snappedStart = snapStartToGrid(startLocal, snap);
const durationMs = getLocalizedDayJs(timeEntry.end).diff(getLocalizedDayJs(timeEntry.start));
const snappedEnd = snappedStart.add(durationMs, 'millisecond');
// Set FC event to snapped position immediately to avoid flash
@@ -325,8 +332,8 @@ async function handleEventResize(arg: EventChangeArg) {
const startChanged = !newStartLocal.isSame(origStartLocal, 'minute');
// Snap only the changed edge once, reuse for both setDates and API update
const snappedStart = startChanged ? snapToGrid(newStartLocal, snap) : null;
const snappedEnd = !startChanged && !ext.isRunning ? snapToGrid(newEndLocal, snap) : null;
const snappedStart = startChanged ? snapStartToGrid(newStartLocal, snap) : null;
const snappedEnd = !startChanged && !ext.isRunning ? snapEndToGrid(newEndLocal, snap) : null;
// Set FC event to snapped position immediately to avoid flash.
// Use the original event date for the edge that wasn't resized.
@@ -747,6 +754,10 @@ onUnmounted(() => {
border: 1px solid var(--primary);
}
.fullcalendar :deep(.fc-event-mirror) {
pointer-events: none;
}
.fullcalendar :deep(.fc-scrollgrid) {
border: 1px solid var(--border);
border-left: 1px solid transparent;