From 3058d902fca191ee07064d2ce7aad4e86a6f79de Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Tue, 25 Jul 2023 13:50:55 +0300 Subject: [PATCH] Fixed display of events for the whole day (#3519) Signed-off-by: Alexander Platov --- .../components/calendar/DayCalendar.svelte | 252 +++++++++++++----- packages/ui/src/index.ts | 1 + .../src/components/CalendarView.svelte | 51 ++-- .../src/components/CreateEvent.svelte | 37 ++- 4 files changed, 245 insertions(+), 96 deletions(-) diff --git a/packages/ui/src/components/calendar/DayCalendar.svelte b/packages/ui/src/components/calendar/DayCalendar.svelte index 1800f5153b..95fb2eb01f 100644 --- a/packages/ui/src/components/calendar/DayCalendar.svelte +++ b/packages/ui/src/components/calendar/DayCalendar.svelte @@ -25,6 +25,7 @@ areDatesEqual } from './internal/DateUtils' import { CalendarItem } from '../../types' + import { ActionIcon, IconUpOutline, IconDownOutline } from '../..' export let events: CalendarItem[] export let mondayStart = true @@ -39,19 +40,25 @@ const dispatch = createEventDispatcher() const todayDate = new Date() - const cellBorder = 1 + const ampm = new Intl.DateTimeFormat([], { hour: 'numeric' }).resolvedOptions().hour12 + const getTimeFormat = (hour: number): string => { + return ampm ? `${hour > 12 ? hour - 12 : hour}${hour < 12 ? 'am' : 'pm'}` : `${addZero(hour)}:00` + } + $: fontSize = $deviceInfo.fontSize + $: docHeight = $deviceInfo.docHeight $: cellHeight = 4 * fontSize $: weekMonday = startFromWeekStart ? getMonday(currentDate, mondayStart) : new Date(new Date(currentDate).setHours(0, 0, 0, 0)) - const ampm = new Intl.DateTimeFormat([], { hour: 'numeric' }).resolvedOptions().hour12 - // const timeZone = new Intl.DateTimeFormat([], { hour: 'numeric' }).resolvedOptions().timeZone - - const getTimeFormat = (hour: number): string => { - return ampm ? `${hour > 12 ? hour - 12 : hour}${hour < 12 ? 'am' : 'pm'}` : `${addZero(hour)}:00` - } + const rem = (n: number): number => n * fontSize + const cellBorder: number = 1 + const heightAD: number = 2 + let minHeightAD: number = 0 + let maxHeightAD: number = 0 + let shownHeightAD: number = 0 + let shownAD: boolean = false interface CalendarElement { id: string @@ -59,11 +66,20 @@ dueDate: Timestamp cols: number } - interface CalendarRow { + interface CalendarColumn { elements: CalendarElement[] } interface CalendarGrid { - columns: CalendarRow[] + columns: CalendarColumn[] + } + interface CalendarADGrid { + alldays: (string | null)[] + } + interface CalendarADRows { + id: string + row: number + startCol: number + endCol: number } let container: HTMLElement @@ -71,12 +87,20 @@ let calendarWidth: number = 0 let calendarRect: DOMRect let colWidth: number = 0 - let newEvents = events let grid: CalendarGrid[] = Array(displayedDaysCount) + let alldays: CalendarItem[] = [] + let alldaysGrid: CalendarADGrid[] = Array(displayedDaysCount) + let adMaxRow: number = 1 + let adRows: CalendarADRows[] + $: if (newEvents !== events) { grid = new Array(displayedDaysCount) + alldaysGrid = new Array(displayedDaysCount) newEvents = events + alldays = [] + prepareAllDays() + if (shownAD && adMaxRow < 4) shownAD = false } $: newEvents .filter((ev) => !ev.allDay) @@ -143,6 +167,39 @@ } } } + + const addNullRow = () => { + for (let i = 0; i < displayedDaysCount; i++) alldaysGrid[i].alldays.push(null) + adMaxRow++ + } + const prepareAllDays = () => { + alldays = events.filter((ev) => ev.day === -1) + adRows = [] + for (let i = 0; i < displayedDaysCount; i++) alldaysGrid[i] = { alldays: [null] } + adMaxRow = 1 + alldays.forEach((event) => { + const days = events + .filter((ev) => ev.allDay && ev.day !== -1 && event.eventId === ev.eventId) + .map((ev) => { + return ev.day + }) + let emptyRow = 0 + for (let checkRow = 0; checkRow < adMaxRow; checkRow++) { + const empty = days.every((day) => alldaysGrid[day].alldays[checkRow] === null) + if (empty) { + emptyRow = checkRow + break + } else if (checkRow === adMaxRow - 1) { + emptyRow = adMaxRow + addNullRow() + break + } + } + adRows.push({ id: event.eventId, row: emptyRow, startCol: days[0], endCol: days[days.length - 1] }) + days.forEach((day) => (alldaysGrid[day].alldays[emptyRow] = event.eventId)) + }) + } + const checkIntersect = (date1: CalendarItem | CalendarElement, date2: CalendarItem | CalendarElement): boolean => { return ( (date2.date <= date1.date && date2.dueDate > date1.date) || @@ -154,17 +211,10 @@ return { hours: temp.getHours() - startHour, mins: temp.getMinutes() } } - const checkSizes = (element: HTMLElement | Element) => { - calendarRect = element.getBoundingClientRect() - calendarWidth = calendarRect.width - colWidth = (calendarWidth - 3.5 * fontSize) / displayedDaysCount - } - const getGridOffset = (mins: number, end: boolean = false): number => { if (mins === 0) return end ? 2 + cellBorder : 2 return mins < 3 ? (end ? 1 : 2) : mins > 57 ? (end ? 2 + cellBorder : 1) : 1 } - const rem = (n: number): number => n * fontSize const getRect = ( event: CalendarItem @@ -177,7 +227,11 @@ const endTime = event.dueDate > endDay ? { hours: displayedHours - startHour, mins: 0 } : convertToTime(event.dueDate) result.top = - rem(5.75) + cellHeight * startTime.hours + (startTime.mins / 60) * cellHeight + getGridOffset(startTime.mins) + rem(3.5) + + styleAD + + cellHeight * startTime.hours + + (startTime.mins / 60) * cellHeight + + getGridOffset(startTime.mins) result.bottom = cellHeight * (displayedHours - startHour - endTime.hours - 1) + ((60 - endTime.mins) / 60) * cellHeight + @@ -203,21 +257,55 @@ return result } + const getADRect = (event: CalendarItem): { top: number; left: number; width: number } => { + const result = { top: 0, left: 0, width: 0 } + const index = adRows.findIndex((ev) => ev.id === event.eventId) + result.top = rem(0.125 + adRows[index].row * (heightAD + 0.125)) + result.left = rem(0.125) + adRows[index].startCol * (colWidth + 0.125) + const w = adRows[index].endCol - adRows[index].startCol + result.width = colWidth + colWidth * w - rem(0.25) + return result + } + + const getTimeZone = (): string => { + return new Intl.DateTimeFormat([], { timeZoneName: 'short' }).format(Date.now()).split(' ')[1] + } + onMount(() => { if (container) checkSizes(container) + minHeightAD = rem((heightAD + 0.125) * 2 + 0.25) }) + + const checkSizes = (element: HTMLElement | Element) => { + calendarRect = element.getBoundingClientRect() + calendarWidth = calendarRect.width + colWidth = (calendarWidth - 3.5 * fontSize) / displayedDaysCount + } + $: if (docHeight && calendarRect?.top) { + const proc = ((docHeight - calendarRect.top) * 30) / 100 + const temp = rem((heightAD + 0.125) * Math.trunc(proc / rem(heightAD + 0.125)) + 0.25) + maxHeightAD = temp < minHeightAD ? minHeightAD : temp + shownHeightAD = rem((heightAD + 0.125) * adMaxRow + 0.25) + } + $: styleAD = shownAD + ? shownHeightAD > maxHeightAD + ? maxHeightAD + : shownHeightAD + : rem((heightAD + 0.125) * adMaxRow + 0.25) > maxHeightAD && maxHeightAD === minHeightAD + ? rem((heightAD + 0.125) * (adMaxRow < 3 ? adMaxRow : 2) + 0.25) + : rem((heightAD + 0.125) * (adMaxRow < 4 ? adMaxRow : 3) + 0.25) - +
checkSizes(element)} > -
CEST
+
{getTimeZone()}
{#each [...Array(displayedDaysCount).keys()] as dayOfWeek} {@const day = getDay(weekMonday, dayOfWeek)}
1}> @@ -226,26 +314,58 @@
{/each} -
All day
- {#each [...Array(displayedDaysCount).keys()] as dayOfWeek} - {@const day = getDay(weekMonday, dayOfWeek)} - {@const alldays = events.filter((ev) => ev.allDay && ev.day === dayOfWeek)} - -
0} - style:width={`${colWidth}px`} - style:grid-template-columns={`repeat(${alldays.length}, minmax(0, 1fr))`} - on:click|stopPropagation={() => - dispatch('create', { day, hour: -1, halfHour: false, date: new Date(day.setHours(0, 0, 0, 0)) })} - > - {#each alldays as ad} -
- -
- {/each} -
- {/each} +
+ All day + {#if adMaxRow > 3} + { + shownAD = !shownAD + }} + /> + {/if} +
+
+ {#if shownHeightAD > maxHeightAD && shownAD} + + {#key calendarWidth || displayedDaysCount} +
+ {#each alldays as event, i} + {@const rect = getADRect(event)} + +
+ +
+ {/each} + {/key} + + {:else} + {#key calendarWidth || displayedDaysCount} + {#each alldays as event, i} + {@const rect = getADRect(event)} + +
+ +
+ {/each} + {/key} + {/if} +
{#each [...Array(displayedHours - startHour).keys()] as hourOfDay} {#if hourOfDay === 0} @@ -264,13 +384,13 @@
{ dispatch('create', { - day, - hour: hourOfDay + startHour, - date: new Date(day.setHours(hourOfDay + startHour, 0, 0, 0)) + date: new Date(day.setHours(hourOfDay + startHour, 0, 0, 0)), + withTime: true }) }} /> @@ -278,22 +398,22 @@ {#if hourOfDay === displayedHours - startHour - 1}
{/if} {/each} - {#key calendarWidth || displayedDaysCount} - {#each events.filter((ev) => !ev.allDay) as event, i} - {@const rect = getRect(event)} - -
- -
- {/each} - {/key} + {#key styleAD}{#key calendarWidth}{#key displayedDaysCount} + {#each newEvents.filter((ev) => !ev.allDay) as event, i} + {@const rect = getRect(event)} + +
+ +
+ {/each} + {/key}{/key}{/key}
@@ -365,15 +485,15 @@ display: flex; align-items: center; } + &.allday-header { + flex-direction: column; + justify-content: space-between; + padding: 0.625rem 0.125rem; + } &.allday-container { - display: inline-grid; - justify-items: stretch; - gap: 0.125rem; - padding: 0.125rem; - max-width: 100%; + overflow: hidden; .allday-event { - background-color: red; border-radius: 0.25rem; } } diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 22a99e11e2..945359e80f 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -132,6 +132,7 @@ export { default as IconUp } from './components/icons/Up.svelte' export { default as IconDown } from './components/icons/Down.svelte' export { default as IconUpOutline } from './components/icons/UpOutline.svelte' export { default as IconDownOutline } from './components/icons/DownOutline.svelte' +export { default as IconDropdown } from './components/icons/Dropdown.svelte' export { default as IconShare } from './components/icons/Share.svelte' export { default as IconDelete } from './components/icons/Delete.svelte' export { default as IconActivityEdit } from './components/icons/ActivityEdit.svelte' diff --git a/plugins/calendar-resources/src/components/CalendarView.svelte b/plugins/calendar-resources/src/components/CalendarView.svelte index ee681f1103..7a2f64b4ec 100644 --- a/plugins/calendar-resources/src/components/CalendarView.svelte +++ b/plugins/calendar-resources/src/components/CalendarView.svelte @@ -114,6 +114,7 @@ const calendarsQuery = createQuery() let calendars: Calendar[] = [] + const offsetTZ = new Date().getTimezoneOffset() * 60 * 1000 calendarsQuery.query(calendar.class.Calendar, { createdBy: getCurrentAccount()._id }, (res) => { calendars = res @@ -234,27 +235,43 @@ ): CalendarItem[] => { const result: CalendarItem[] = [] for (let day = 0; day < days; day++) { - const startDate = new Date(MILLISECONDS_IN_DAY * day + date.getTime()).setHours(startHour, 0, 0) - const lastDate = new Date(MILLISECONDS_IN_DAY * day + date.getTime()).setHours(endHour - 1, 59, 59) + const startDay = new Date(MILLISECONDS_IN_DAY * day + date.getTime()).setHours(0, 0, 0, 0) + const startDate = new Date(MILLISECONDS_IN_DAY * day + date.getTime()).setHours(startHour, 0, 0, 0) + const lastDate = new Date(MILLISECONDS_IN_DAY * day + date.getTime()).setHours(endHour, 0, 0, 0) events.forEach((event) => { - const eventStart = event.allDay - ? new Date(event.date + new Date().getTimezoneOffset() * 60 * 1000).getTime() - : event.date - const eventEnd = event.allDay - ? new Date(event.dueDate + new Date().getTimezoneOffset() * 60 * 1000).getTime() - : event.dueDate - if ((eventStart <= startDate && eventEnd > startDate) || (eventStart >= startDate && eventStart < lastDate)) { + const eventStart = event.allDay ? event.date + offsetTZ : event.date + const eventEnd = event.allDay ? event.dueDate + offsetTZ : event.dueDate + if ((eventStart < lastDate && eventEnd > startDate) || (eventStart === eventEnd && eventStart === startDay)) { result.push({ eventId: event.eventId, allDay: event.allDay, - date: event.date, - dueDate: event.dueDate, + date: eventStart, + dueDate: eventEnd, day, access: event.access }) } }) } + const sd = date.setHours(0, 0, 0, 0) + const ld = new Date(MILLISECONDS_IN_DAY * (days - 1) + date.getTime()).setHours(23, 59, 59, 999) + events + .filter((ev) => ev.allDay) + .sort((a, b) => b.dueDate - b.date - (a.dueDate - a.date)) + .forEach((event) => { + const eventStart = event.date + offsetTZ + const eventEnd = event.dueDate + offsetTZ + if ((eventStart < ld && eventEnd > sd) || (eventStart === eventEnd && eventStart === sd)) { + result.push({ + eventId: event.eventId, + allDay: event.allDay, + date: eventStart, + dueDate: eventEnd, + day: -1, + access: event.access + }) + } + }) return result } @@ -361,7 +378,7 @@ startFromWeekStart={false} bind:selectedDate bind:currentDate - on:create={(e) => showCreateDialog(e.detail.date, true)} + on:create={(e) => showCreateDialog(e.detail.date, e.detail.withTime)} > {@const event = objects.find((event) => event.eventId === id)} @@ -371,7 +388,7 @@ {width} allday on:create={(e) => { - showCreateDialog(e.detail, true) + showCreateDialog(e.detail.date, e.detail.withTime) }} /> {/if} @@ -383,7 +400,7 @@ {event} {width} on:create={(e) => { - showCreateDialog(e.detail, true) + showCreateDialog(e.detail.date, e.detail.withTime) }} /> {/if} @@ -398,7 +415,7 @@ startFromWeekStart={false} bind:selectedDate bind:currentDate - on:create={(e) => showCreateDialog(e.detail.date, true)} + on:create={(e) => showCreateDialog(e.detail.date, e.detail.withTime)} > {@const event = objects.find((event) => event.eventId === id)} @@ -408,7 +425,7 @@ {width} allday on:create={(e) => { - showCreateDialog(e.detail, true) + showCreateDialog(e.detail.date, e.detail.withTime) }} /> {/if} @@ -420,7 +437,7 @@ {event} {width} on:create={(e) => { - showCreateDialog(e.detail, true) + showCreateDialog(e.detail.date, e.detail.withTime) }} /> {/if} diff --git a/plugins/calendar-resources/src/components/CreateEvent.svelte b/plugins/calendar-resources/src/components/CreateEvent.svelte index fd7757b0bf..bd43c72234 100644 --- a/plugins/calendar-resources/src/components/CreateEvent.svelte +++ b/plugins/calendar-resources/src/components/CreateEvent.svelte @@ -16,7 +16,7 @@ import { Calendar, generateEventId } from '@hcengineering/calendar' import { Employee, EmployeeAccount } from '@hcengineering/contact' import { UserBoxList } from '@hcengineering/contact-resources' - import { Class, DateRangeMode, Doc, Ref, getCurrentAccount } from '@hcengineering/core' + import { Class, DateRangeMode, Doc, Ref, Timestamp, getCurrentAccount } from '@hcengineering/core' import { Card, getClient } from '@hcengineering/presentation' import ui, { DateRangePresenter, EditBox, ToggleWithLabel } from '@hcengineering/ui' import { createEventDispatcher, tick } from 'svelte' @@ -29,8 +29,8 @@ export let withTime = false const now = new Date() - const defaultDuration = 30 * 60 * 1000 - const allDayDuration = 24 * 60 * 60 * 1000 + const defaultDuration = 60 * 60 * 1000 + const allDayDuration = 24 * 60 * 60 * 1000 - 1 let startDate = date === undefined ? now.getTime() : withTime ? date.getTime() : date.setHours(now.getHours(), now.getMinutes()) @@ -49,6 +49,19 @@ return title !== undefined && title.trim().length === 0 && participants.length === 0 } + const saveUTC = (date: Timestamp): Timestamp => { + const utcdate = new Date(date) + return Date.UTC( + utcdate.getFullYear(), + utcdate.getMonth(), + utcdate.getDate(), + utcdate.getHours(), + utcdate.getMinutes(), + utcdate.getSeconds(), + utcdate.getMilliseconds() + ) + } + async function saveEvent () { let date: number | undefined if (startDate != null) date = startDate @@ -56,8 +69,8 @@ const space = `${getCurrentAccount()._id}_calendar` as Ref await client.addCollection(calendar.class.Event, space, attachedTo, attachedToClass, 'events', { eventId: generateEventId(), - date: allDay ? new Date(date).setUTCHours(0, 0, 0, 0) : date, - dueDate: allDay ? new Date(dueDate).setUTCHours(0, 0, 0, 0) : dueDate, + date: allDay ? saveUTC(date) : date, + dueDate: allDay ? saveUTC(dueDate) : dueDate, description: '', participants, title, @@ -68,7 +81,7 @@ const handleNewStartDate = async (newStartDate: number | null) => { if (newStartDate !== null) { - startDate = newStartDate + startDate = allDay ? new Date(newStartDate).setHours(0, 0, 0, 0) : newStartDate dueDate = startDate + (allDay ? allDayDuration : duration) await tick() dueDateRef.adaptValue() @@ -79,8 +92,8 @@ if (newDueDate !== null) { const diff = newDueDate - startDate if (diff > 0) { - dueDate = newDueDate - duration = diff + dueDate = allDay ? new Date(newDueDate).setHours(23, 59, 59, 999) : newDueDate + duration = dueDate - startDate } else { dueDate = startDate + (allDay ? allDayDuration : duration) } @@ -91,11 +104,9 @@ async function allDayChangeHandler () { if (allDay) { - startDate = new Date(startDate).setUTCHours(0, 0, 0, 0) - if (dueDate - startDate < allDayDuration) { - dueDate = allDayDuration + startDate - } - dueDate = new Date(dueDate).setUTCHours(0, 0, 0, 0) + startDate = new Date(startDate).setHours(0, 0, 0, 0) + if (dueDate - startDate < allDayDuration) dueDate = allDayDuration + startDate + else dueDate = new Date(dueDate).setHours(23, 59, 59, 999) } else { dueDate = startDate + defaultDuration }