added code from master of event sort for multi day (bigcalendar#2502)

Author: mikeyyyzhao

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rbc-fork-react-big-calendar",
-  "version": "0.33.12",
+  "version": "0.33.16",
   "description": "Calendar! with events",
   "author": {
     "name": "Jason Quense",

src/Month.js

@@ -15,7 +15,7 @@ import Overlay from 'react-overlays/Overlay'
 import DateContentRow from './DateContentRow'
 import Header from './Header'
 import DateHeader from './DateHeader'
-import { inRange, sortEvents } from './utils/eventLevels'
+import { inRange, sortWeekEvents } from './utils/eventLevels'
 
 let eventsForWeek = (evts, start, end, accessors, localizer) =>
   evts.filter(e => inRange(e, start, end, accessors, localizer))
@@ -130,7 +130,7 @@ class MonthView extends React.Component {
       localizer
     )
 
-    weeksEvents.sort((a, b) => sortEvents(a, b, accessors, localizer))
+    const sorted = sortWeekEvents(weeksEvents, accessors, localizer)
 
     return (
       <DateContentRow
@@ -141,7 +141,7 @@ class MonthView extends React.Component {
         getNow={getNow}
         date={date}
         range={week}
-        events={weeksEvents}
+        events={sorted}
         maxRows={showAllEvents ? Infinity : rowLimit}
         selected={selected}
         selectable={selectable}

src/localizer.js

@@ -75,6 +75,10 @@ function getMinutesFromMidnight(start) {
   return diff(daystart, start, 'minutes') + getDstOffset(daystart, start)
 }
 
+function daySpan(start, end) {
+  return duration(start, end, 'day')
+}
+
 // These two are used by DateSlotMetrics
 function continuesPrior(start, first) {
   return lt(start, first, 'day')
@@ -94,13 +98,13 @@ function sortEvents({
 }) {
   let startSort = +startOf(aStart, 'day') - +startOf(bStart, 'day')
 
-  let durA = diff(aStart, ceil(aEnd, 'day'), 'day')
+  let durA = daySpan(aStart, aEnd)
 
-  let durB = diff(bStart, ceil(bEnd, 'day'), 'day')
+  let durB = daySpan(bStart, bEnd)
 
   return (
     startSort || // sort by start Day first
-    Math.max(durB, 1) - Math.max(durA, 1) || // events spanning multiple days go first
+    durB - durA || // events spanning multiple days go first
     !!bAllDay - !!aAllDay || // then allDay single day events
     +aStart - +bStart || // then sort by start time
     +aEnd - +bEnd // then sort by end time
@@ -167,13 +171,14 @@ export class DateLocalizer {
     this.min = spec.min || min
     this.max = spec.max || max
     this.minutes = spec.minutes || minutes
+    this.daySpan = spec.daySpan || daySpan
     this.firstVisibleDay = spec.firstVisibleDay || firstVisibleDay
     this.lastVisibleDay = spec.lastVisibleDay || lastVisibleDay
     this.visibleDays = spec.visibleDays || visibleDays
 
     this.getSlotDate = spec.getSlotDate || getSlotDate
     this.getTimezoneOffset =
-      spec.getTimezoneOffset || (value => value.getTimezoneOffset())
+      spec.getTimezoneOffset || ((value) => value.getTimezoneOffset())
     this.getDstOffset = spec.getDstOffset || getDstOffset
     this.getTotalMin = spec.getTotalMin || getTotalMin
     this.getMinutesFromMidnight =

src/localizers/luxon.js

@@ -310,20 +310,26 @@ export default function(DateTime, { firstDayOfWeek = 7 } = {}) {
     return gte(end, last)
   }
 
+  function daySpan(start, end) {
+    const dtStart = DateTime.fromJSDate(start)
+    const dtEnd = DateTime.fromJSDate(end)
+    return dtEnd.diff(dtStart).as('days')
+  }
+
   // These two are used by eventLevels
   function sortEvents({
     evtA: { start: aStart, end: aEnd, allDay: aAllDay },
     evtB: { start: bStart, end: bEnd, allDay: bAllDay },
   }) {
     const startSort = +startOf(aStart, 'day') - +startOf(bStart, 'day')
 
-    const durA = diff(aStart, ceil(aEnd, 'day'), 'day')
+    const durA = daySpan(aStart, aEnd)
 
-    const durB = diff(bStart, ceil(bEnd, 'day'), 'day')
+    const durB = daySpan(bStart, bEnd)
 
     return (
       startSort || // sort by start Day first
-      Math.max(durB, 1) - Math.max(durA, 1) || // events spanning multiple days go first
+      durB - durA || // events spanning multiple days go first
       !!bAllDay - !!aAllDay || // then allDay single day events
       +aStart - +bStart || // then sort by start time *don't need moment conversion here
       +aEnd - +bEnd // then sort by end time *don't need moment conversion here either
@@ -415,6 +421,7 @@ export default function(DateTime, { firstDayOfWeek = 7 } = {}) {
     sortEvents,
     inEventRange,
     isSameDate,
+    daySpan,
     browserTZOffset,
   })
 }

src/localizers/moment.js

@@ -289,20 +289,27 @@ export default function(moment) {
     return mEnd.isSameOrAfter(mLast, 'minutes')
   }
 
+  function daySpan(start, end) {
+    const mStart = moment(start)
+    const mEnd = moment(end)
+    const dur = moment.duration(mEnd.diff(mStart))
+    return dur.days()
+  }
+
   // These two are used by eventLevels
   function sortEvents({
     evtA: { start: aStart, end: aEnd, allDay: aAllDay },
     evtB: { start: bStart, end: bEnd, allDay: bAllDay },
   }) {
     const startSort = +startOf(aStart, 'day') - +startOf(bStart, 'day')
 
-    const durA = diff(aStart, ceil(aEnd, 'day'), 'day')
+    const durA = daySpan(aStart, aEnd)
 
-    const durB = diff(bStart, ceil(bEnd, 'day'), 'day')
+    const durB = daySpan(bStart, bEnd)
 
     return (
       startSort || // sort by start Day first
-      Math.max(durB, 1) - Math.max(durA, 1) || // events spanning multiple days go first
+      durB - durA || // events spanning multiple days go first
       !!bAllDay - !!aAllDay || // then allDay single day events
       +aStart - +bStart || // then sort by start time *don't need moment conversion here
       +aEnd - +bEnd // then sort by end time *don't need moment conversion here either
@@ -398,6 +405,7 @@ export default function(moment) {
     sortEvents,
     inEventRange,
     isSameDate,
+    daySpan,
     browserTZOffset,
   })
 }

src/utils/eventLevels.js

@@ -76,6 +76,50 @@ export function segsOverlap(seg, otherSegs) {
   )
 }
 
+export function sortWeekEvents(events, accessors, localizer) {
+  const base = [...events]
+  const multiDayEvents = []
+  const standardEvents = []
+  base.forEach((event) => {
+    const startCheck = accessors.start(event)
+    const endCheck = accessors.end(event)
+    if (localizer.daySpan(startCheck, endCheck) > 1) {
+      multiDayEvents.push(event)
+    } else {
+      standardEvents.push(event)
+    }
+  })
+  const multiSorted = multiDayEvents.sort((a, b) =>
+    sortEvents(a, b, accessors, localizer)
+  )
+  const standardSorted = standardEvents.sort((a, b) =>
+    sortEvents(a, b, accessors, localizer)
+  )
+  return [...multiSorted, ...standardSorted]
+}
+
+export function sortWeekEvents(events, accessors, localizer) {
+  const base = [...events]
+  const multiDayEvents = []
+  const standardEvents = []
+  base.forEach((event) => {
+    const startCheck = accessors.start(event)
+    const endCheck = accessors.end(event)
+    if (localizer.daySpan(startCheck, endCheck) > 1) {
+      multiDayEvents.push(event)
+    } else {
+      standardEvents.push(event)
+    }
+  })
+  const multiSorted = multiDayEvents.sort((a, b) =>
+    sortEvents(a, b, accessors, localizer)
+  )
+  const standardSorted = standardEvents.sort((a, b) =>
+    sortEvents(a, b, accessors, localizer)
+  )
+  return [...multiSorted, ...standardSorted]
+}
+
 export function sortEvents(eventA, eventB, accessors, localizer) {
   const evtA = {
     start: accessors.start(eventA),