fix: bug where appointments can appear outside the calendar (#1204)

* Fixed bug where appointments can appear outside the calendar

* Modfied change to stop moving all appointments up by 2%

* Updated code to get top of appointment

* Added range tests, to ensure appointments don't appear outside calendar

Author: NathanBP

examples/App.js

@@ -44,6 +44,7 @@ const EXAMPLES = {
   customView: 'Custom Calendar Views',
   resource: 'Resource Scheduling',
   dnd: 'Addon: Drag and drop',
+  dndresource: 'Resource Drag and drop',
   dndOutsideSource: 'Addon: Drag and drop (from outside calendar)',
 }
 

examples/demos/dndresource.js

@@ -28,13 +28,41 @@ const events = [
     end: new Date(2018, 0, 29, 12, 30, 0),
     resourceId: 3,
   },
+  {
+    id: 10,
+    title: 'Board meeting',
+    start: new Date(2018, 0, 30, 23, 0, 0),
+    end: new Date(2018, 0, 30, 23, 59, 0),
+    resourceId: 1,
+  },
   {
     id: 11,
     title: 'Birthday Party',
     start: new Date(2018, 0, 30, 7, 0, 0),
     end: new Date(2018, 0, 30, 10, 30, 0),
     resourceId: 4,
   },
+  {
+    id: 12,
+    title: 'Board meeting',
+    start: new Date(2018, 0, 29, 23, 59, 0),
+    end: new Date(2018, 0, 30, 13, 0, 0),
+    resourceId: 1,
+  },
+  {
+    id: 13,
+    title: 'Board meeting',
+    start: new Date(2018, 0, 29, 23, 50, 0),
+    end: new Date(2018, 0, 30, 13, 0, 0),
+    resourceId: 2,
+  },
+  {
+    id: 14,
+    title: 'Board meeting',
+    start: new Date(2018, 0, 29, 23, 40, 0),
+    end: new Date(2018, 0, 30, 13, 0, 0),
+    resourceId: 4,
+  },
 ]
 
 const resourceMap = [
@@ -103,6 +131,8 @@ class Dnd extends React.Component {
         resourceTitleAccessor="resourceTitle"
         onEventResize={this.resizeEvent}
         defaultView="day"
+        step={15}
+        showMultiDayTimes={true}
         defaultDate={new Date(2018, 0, 29)}
       />
     )

src/utils/TimeSlots.js

@@ -130,7 +130,10 @@ export function getSlotMetrics({ min: start, max: end, step, timeslots }) {
 
       const rangeStartMin = positionFromDate(rangeStart)
       const rangeEndMin = positionFromDate(rangeEnd)
-      const top = (rangeStartMin / (step * numSlots)) * 100
+      const top =
+        rangeEndMin - rangeStartMin < step
+          ? ((rangeStartMin - step) / (step * numSlots)) * 100
+          : (rangeStartMin / (step * numSlots)) * 100
 
       return {
         top,

test/utils/TimeSlots.test.js

@@ -22,3 +22,81 @@ describe('getSlotMetrics', () => {
     expect(diff).toBe(60)
   })
 })
+
+describe('getRange', () => {
+  const min = dates.startOf(new Date(), 'day')
+  const max = dates.endOf(new Date(), 'day')
+  const slotMetrics = getSlotMetrics({ min, max, step: 60, timeslots: 1 })
+
+  test('getRange: 15 minute start of day appointment stays within calendar', () => {
+    let range = slotMetrics.getRange(
+      new Date(2018, 0, 29, 0, 0, 0),
+      new Date(2018, 0, 29, 0, 15, 0)
+    )
+    expect(range.top + range.height).toBeLessThan(100)
+    expect(range.height).toBeGreaterThan(0)
+  })
+
+  test('getRange: 1 hour start of day appointment stays within calendar', () => {
+    let range = slotMetrics.getRange(
+      new Date(2018, 0, 29, 0, 0, 0),
+      new Date(2018, 0, 29, 1, 0, 0)
+    )
+    expect(range.top + range.height).toBeLessThan(100)
+    expect(range.height).toBeGreaterThan(0)
+  })
+
+  test('getRange: 1 hour mid range appointment stays within calendar', () => {
+    let range = slotMetrics.getRange(
+      new Date(2018, 0, 29, 14, 0, 0),
+      new Date(2018, 0, 29, 15, 0, 0)
+    )
+    expect(range.top + range.height).toBeLessThan(100)
+    expect(range.height).toBeGreaterThan(0)
+  })
+
+  test('getRange: 3 hour mid range appointment stays within calendar', () => {
+    let range = slotMetrics.getRange(
+      new Date(2018, 0, 29, 14, 0, 0),
+      new Date(2018, 0, 29, 17, 0, 0)
+    )
+    expect(range.top + range.height).toBeLessThan(100)
+    expect(range.height).toBeGreaterThan(0)
+  })
+
+  test('getRange: full day appointment stays within calendar', () => {
+    let range = slotMetrics.getRange(
+      new Date(2018, 0, 29, 0, 0, 0),
+      new Date(2018, 0, 29, 23, 59, 0)
+    )
+    expect(range.top + range.height).toBeLessThan(100)
+    expect(range.height).toBeGreaterThan(0)
+  })
+
+  test('getRange: 1 hour end of day appointment stays within calendar', () => {
+    let range = slotMetrics.getRange(
+      new Date(2018, 0, 29, 23, 0, 0),
+      new Date(2018, 0, 29, 23, 59, 0)
+    )
+    expect(range.top + range.height).toBeLessThan(100)
+    expect(range.height).toBeGreaterThan(0)
+  })
+
+  test('getRange: 15 minute end of day appointment stays within calendar', () => {
+    let range = slotMetrics.getRange(
+      new Date(2018, 0, 29, 23, 45, 0),
+      new Date(2018, 0, 29, 23, 59, 0)
+    )
+    expect(range.top + range.height).toBeLessThan(100)
+    expect(range.height).toBeGreaterThan(0)
+  })
+
+  test('getRange: multi day appointment stays within calendar', () => {
+    let range = slotMetrics.getRange(
+      new Date(2018, 0, 29, 0, 0, 0),
+      new Date(2018, 0, 30, 4, 0, 0)
+    )
+    expect(range.top + range.height).toBeLessThan(100)
+    expect(range.height).toBeGreaterThan(0)
+  })
+})