From e8b9ebb02d3e255abc7353148fa974a0e41b1a83 Mon Sep 17 00:00:00 2001 From: NathanBP <37284011+NathanBP@users.noreply.github.com> Date: Fri, 1 Feb 2019 13:23:16 +1000 Subject: [PATCH 1/4] Fixed bug where appointments can appear outside the calendar --- examples/App.js | 1 + examples/demos/dndresource.js | 15 +++++++++++++++ src/utils/TimeSlots.js | 2 +- 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/examples/App.js b/examples/App.js index 5295c2c75..63bc68ca5 100644 --- a/examples/App.js +++ b/examples/App.js @@ -43,6 +43,7 @@ const EXAMPLES = { customView: 'Custom Calendar Views', resource: 'Resource Scheduling', dnd: 'Addon: Drag and drop', + dndresource: 'Resource Drag and drop', } const DEFAULT_EXAMPLE = 'basic' diff --git a/examples/demos/dndresource.js b/examples/demos/dndresource.js index 17ae2114f..d26b497e3 100644 --- a/examples/demos/dndresource.js +++ b/examples/demos/dndresource.js @@ -28,6 +28,13 @@ 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', @@ -35,6 +42,13 @@ const events = [ 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, + }, ] const resourceMap = [ @@ -103,6 +117,7 @@ class Dnd extends React.Component { resourceTitleAccessor="resourceTitle" onEventResize={this.resizeEvent} defaultView="day" + showMultiDayTimes={true} defaultDate={new Date(2018, 0, 29)} /> ) diff --git a/src/utils/TimeSlots.js b/src/utils/TimeSlots.js index 5374e22c2..8efe5e58b 100644 --- a/src/utils/TimeSlots.js +++ b/src/utils/TimeSlots.js @@ -130,7 +130,7 @@ 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 = (rangeStartMin / (step * numSlots)) * 98 return { top, From 054ea9f6f34f9e96f03ea32423945fac01f6d07e Mon Sep 17 00:00:00 2001 From: NathanBP <37284011+NathanBP@users.noreply.github.com> Date: Fri, 1 Feb 2019 15:02:12 +1000 Subject: [PATCH 2/4] Modfied change to stop moving all appointments up by 2% --- src/utils/TimeSlots.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/utils/TimeSlots.js b/src/utils/TimeSlots.js index 8efe5e58b..e22d51637 100644 --- a/src/utils/TimeSlots.js +++ b/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)) * 98 + const top = + rangeStartMin === rangeEndMin + ? (rangeStartMin / (step * numSlots)) * 98 + : (rangeStartMin / (step * numSlots)) * 100 return { top, From 184b9f318e07ea6bca7acfb9c1456111d060ebc7 Mon Sep 17 00:00:00 2001 From: NathanBP <37284011+NathanBP@users.noreply.github.com> Date: Mon, 4 Feb 2019 09:34:01 +1000 Subject: [PATCH 3/4] Updated code to get top of appointment --- examples/demos/dndresource.js | 15 +++++++++++++++ src/utils/TimeSlots.js | 4 ++-- 2 files changed, 17 insertions(+), 2 deletions(-) diff --git a/examples/demos/dndresource.js b/examples/demos/dndresource.js index d26b497e3..f7640b2f3 100644 --- a/examples/demos/dndresource.js +++ b/examples/demos/dndresource.js @@ -49,6 +49,20 @@ const events = [ 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 = [ @@ -117,6 +131,7 @@ class Dnd extends React.Component { resourceTitleAccessor="resourceTitle" onEventResize={this.resizeEvent} defaultView="day" + step={15} showMultiDayTimes={true} defaultDate={new Date(2018, 0, 29)} /> diff --git a/src/utils/TimeSlots.js b/src/utils/TimeSlots.js index e22d51637..8549282f7 100644 --- a/src/utils/TimeSlots.js +++ b/src/utils/TimeSlots.js @@ -131,8 +131,8 @@ export function getSlotMetrics({ min: start, max: end, step, timeslots }) { const rangeStartMin = positionFromDate(rangeStart) const rangeEndMin = positionFromDate(rangeEnd) const top = - rangeStartMin === rangeEndMin - ? (rangeStartMin / (step * numSlots)) * 98 + rangeEndMin - rangeStartMin < step + ? ((rangeStartMin - step) / (step * numSlots)) * 100 : (rangeStartMin / (step * numSlots)) * 100 return { From 142ee7d660fd06716e9ddb29584419239bcbb183 Mon Sep 17 00:00:00 2001 From: NathanBP <37284011+NathanBP@users.noreply.github.com> Date: Thu, 14 Feb 2019 12:40:36 +1000 Subject: [PATCH 4/4] Added range tests, to ensure appointments don't appear outside calendar --- test/utils/TimeSlots.test.js | 78 ++++++++++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) diff --git a/test/utils/TimeSlots.test.js b/test/utils/TimeSlots.test.js index aff02b015..d36edac52 100644 --- a/test/utils/TimeSlots.test.js +++ b/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) + }) +})