Fixed display of events for the whole day (#3519)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

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
   }
 </script>
@@ -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)}
   >
     <svelte:fragment slot="allday" let:id let:width>
       {@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)}
     >
       <svelte:fragment slot="allday" let:id let:width>
         {@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}

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<Calendar>
     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
     }