Skip to content

Commit

Permalink
fix: bug where appointments can appear outside the calendar (#1204)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
NathanBP authored and jquense committed May 24, 2019
1 parent f3ea6f8 commit 9689b7d
Show file tree
Hide file tree
Showing 4 changed files with 113 additions and 1 deletion.
1 change: 1 addition & 0 deletions examples/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
}

Expand Down
30 changes: 30 additions & 0 deletions examples/demos/dndresource.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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)}
/>
)
Expand Down
5 changes: 4 additions & 1 deletion src/utils/TimeSlots.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
78 changes: 78 additions & 0 deletions test/utils/TimeSlots.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
})

0 comments on commit 9689b7d

Please sign in to comment.