From 7789fdaf8d7f48c725e5cc33918f0556e809694e Mon Sep 17 00:00:00 2001 From: Matt Lewis Date: Sun, 3 May 2020 15:56:37 +0100 Subject: [PATCH] feat(week-view): add minimumEventHeight option BREAKING CHANGE: events on the week and day view will now always be at least 30 pixels high by default. To restore the old behaviour you can set `[minimumEventHeight]="1"`. Closes #1192 --- .../day/calendar-day-view.component.ts | 6 +++ .../week/calendar-week-view.component.ts | 9 +++- .../test/calendar-week-view.component.spec.ts | 54 +++++++++++++------ 3 files changed, 51 insertions(+), 18 deletions(-) diff --git a/projects/angular-calendar/src/modules/day/calendar-day-view.component.ts b/projects/angular-calendar/src/modules/day/calendar-day-view.component.ts index 2d8ade133..80e29dab0 100644 --- a/projects/angular-calendar/src/modules/day/calendar-day-view.component.ts +++ b/projects/angular-calendar/src/modules/day/calendar-day-view.component.ts @@ -34,6 +34,7 @@ export type CalendarDayViewBeforeRenderEvent = CalendarWeekViewBeforeRenderEvent [hourSegments]="hourSegments" [hourDuration]="hourDuration" [hourSegmentHeight]="hourSegmentHeight" + [minimumEventHeight]="minimumEventHeight" [dayStartHour]="dayStartHour" [dayStartMinute]="dayStartMinute" [dayEndHour]="dayEndHour" @@ -86,6 +87,11 @@ export class CalendarDayViewComponent { */ @Input() hourDuration: number; + /** + * The minimum height in pixels of each event + */ + @Input() minimumEventHeight: number = 30; + /** * The day start hours in 24 hour time. Must be 0-23 */ diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts b/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts index e90765b3e..8cac3a480 100644 --- a/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts +++ b/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts @@ -508,6 +508,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy { */ @Input() hourSegmentHeight: number = 30; + /** + * The minimum height in pixels of each event + */ + @Input() minimumEventHeight: number = 30; + /** * The day start hours in 24 hour time. Must be 0-23 */ @@ -754,7 +759,8 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy { changes.excludeDays || changes.hourSegmentHeight || changes.events || - changes.daysInWeek; + changes.daysInWeek || + changes.minimumEventHeight; if (refreshHeader) { this.refreshHeader(); @@ -1148,6 +1154,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy { }, segmentHeight: this.hourSegmentHeight, weekendDays: this.weekendDays, + minimumEventHeight: this.minimumEventHeight, ...getWeekViewPeriod( this.dateAdapter, this.viewDate, diff --git a/projects/angular-calendar/test/calendar-week-view.component.spec.ts b/projects/angular-calendar/test/calendar-week-view.component.spec.ts index 8520a7e6b..417b841ce 100644 --- a/projects/angular-calendar/test/calendar-week-view.component.spec.ts +++ b/projects/angular-calendar/test/calendar-week-view.component.spec.ts @@ -2246,8 +2246,8 @@ describe('calendarWeekView component', () => { .add(18, 'hours') .toDate(), title: 'foo', - draggable: true - } + draggable: true, + }, ]; fixture.componentInstance.hourDuration = 40; fixture.componentInstance.ngOnChanges({ @@ -2255,7 +2255,7 @@ describe('calendarWeekView component', () => { events: {}, excludeDays: {}, daysInWeek: {}, - hourColumns: {} + hourColumns: {}, }); fixture.detectChanges(); document.body.appendChild(fixture.nativeElement); @@ -2265,24 +2265,24 @@ describe('calendarWeekView component', () => { const dayWidth: number = events[0].parentElement.offsetWidth; const rect1: ClientRect = events[0].getBoundingClientRect(); let dragEvent: CalendarEventTimesChangedEvent; - fixture.componentInstance.eventTimesChanged.pipe(take(1)).subscribe(e => { + fixture.componentInstance.eventTimesChanged.pipe(take(1)).subscribe((e) => { dragEvent = e; }); triggerDomEvent('mousedown', events[0], { clientX: rect1.right, clientY: rect1.bottom, - button: 0 + button: 0, }); fixture.detectChanges(); triggerDomEvent('mousemove', events[0], { clientX: rect1.right + dayWidth - 5, - clientY: rect1.bottom + 95 + clientY: rect1.bottom + 95, }); fixture.detectChanges(); triggerDomEvent('mouseup', events[0], { clientX: rect1.right + dayWidth - 5, clientY: rect1.bottom + 95, - button: 0 + button: 0, }); fixture.detectChanges(); fixture.destroy(); @@ -2297,7 +2297,7 @@ describe('calendarWeekView component', () => { newEnd: moment(fixture.componentInstance.events[0].end) .add(3, 'days') .add(1, 'hour') - .toDate() + .toDate(), }); }); @@ -2379,6 +2379,7 @@ describe('calendarWeekView component', () => { }, }, ]; + fixture.componentInstance.minimumEventHeight = 1; fixture.componentInstance.hourSegmentHeight = 20; fixture.componentInstance.ngOnChanges({ viewDate: {}, @@ -2441,17 +2442,18 @@ describe('calendarWeekView component', () => { .toDate(), title: 'foo', resizable: { - afterEnd: true - } - } + afterEnd: true, + }, + }, ]; fixture.componentInstance.hourDuration = 40; + fixture.componentInstance.minimumEventHeight = 1; fixture.componentInstance.hourSegmentHeight = 20; fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {}, hourDuration: {}, - hourSegmentHeight: {} + hourSegmentHeight: {}, }); fixture.detectChanges(); document.body.appendChild(fixture.nativeElement); @@ -2461,25 +2463,25 @@ describe('calendarWeekView component', () => { const rect: ClientRect = event.getBoundingClientRect(); const resizeHandle = event.querySelector('.cal-resize-handle-after-end'); let resizeEvent: CalendarEventTimesChangedEvent; - fixture.componentInstance.eventTimesChanged.pipe(take(1)).subscribe(e => { + fixture.componentInstance.eventTimesChanged.pipe(take(1)).subscribe((e) => { resizeEvent = e; }); triggerDomEvent('mousedown', resizeHandle, { clientX: rect.right, clientY: rect.bottom, - button: 0 + button: 0, }); fixture.detectChanges(); triggerDomEvent('mousemove', document.body, { clientX: rect.right, - clientY: rect.bottom - 120 + clientY: rect.bottom - 120, }); fixture.detectChanges(); expect(event.getBoundingClientRect().height).to.equal(20); triggerDomEvent('mouseup', document.body, { clientX: rect.right, clientY: rect.bottom - 120, - button: 0 + button: 0, }); fixture.detectChanges(); expect(resizeEvent).to.deep.equal({ @@ -2488,7 +2490,7 @@ describe('calendarWeekView component', () => { newStart: fixture.componentInstance.events[0].start, newEnd: moment(fixture.componentInstance.events[0].start) .add(20, 'minutes') - .toDate() + .toDate(), }); }); @@ -2632,6 +2634,24 @@ describe('calendarWeekView component', () => { expect(updatedEvent1.innerText).to.equal('4:30 - 6:30'); }); + it('should set a minimum event height', () => { + const fixture = TestBed.createComponent(CalendarWeekViewComponent); + fixture.componentInstance.viewDate = moment().startOf('week').toDate(); + fixture.componentInstance.events = [ + { + start: moment().startOf('week').toDate(), + end: moment().startOf('week').add(5, 'minutes').toDate(), + title: 'foo', + }, + ]; + fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} }); + fixture.detectChanges(); + expect( + fixture.nativeElement.querySelector('.cal-event-container').offsetHeight + ).to.equal(30); + fixture.destroy(); + }); + describe('current time marker', () => { let clock: any; beforeEach(() => {