feat(weekView): Add height and scrollbar #229
Conversation
Allow Y axis drag; Set dragData; Remove dragStart event : no need to validate where the event is dragged to; Remove dragSnapGrid because outside the calendar we should be able to drag where we want; Remove validateDrag : no need to valide for external dragndrop
Allow events to be dragged from the calendar view to a drop zone
Codecov Report
@@ Coverage Diff @@
## master #229 +/- ##
=======================================
- Coverage 96.43% 95.44% -1%
=======================================
Files 29 29
Lines 477 483 +6
Branches 49 50 +1
=======================================
+ Hits 460 461 +1
- Misses 0 4 +4
- Partials 17 18 +1
Continue to review full report at Codecov.
|
| @@ -49,6 +49,7 @@ import { CalendarUtils } from '../../providers/calendarUtils.provider'; | |||
| (dayClicked)="dayClicked.emit($event)" | |||
| (eventDropped)="eventTimesChanged.emit($event)"> | |||
| </mwl-calendar-week-view-header> | |||
| <div class="cal-events" [style.height]="maxHeight+'px'" [style.overflowY]="maxHeight ? 'auto' : ''"> | |||
| <div *ngFor="let eventRow of eventRows" #eventRowContainer class="cal-events-row"> | |||
There was a problem hiding this comment.
Rather than adding another option I'd prefer just to add the wrapping div and let users add the styles themselves through CSS.
There was a problem hiding this comment.
Can you also fix the indentation of the child element
|
|
||
| // With a scrollbar during the drag, the event is only visible inside the calendar. | ||
| // The "fixed" position bring the event on top, even when dragged outside the calendar. | ||
| if (this.allowDragOutside && this.maxHeight) { |
There was a problem hiding this comment.
I think it's safe to always do if (this.allowDragOutside) {
| // With a scrollbar during the drag, the event is only visible inside the calendar. | ||
| // The "fixed" position bring the event on top, even when dragged outside the calendar. | ||
| if (this.allowDragOutside && this.maxHeight) { | ||
| event.style.left = ((event.getBoundingClientRect().left / document.body.clientWidth ) * 100) + '%'; |
There was a problem hiding this comment.
getBoundingClientRect() is quite expensive, can you compute it just once on the line above. Rather than using a percentage can it not just be event.getBoundingClientRect().left + 'px' ? What happens if the user cancels and the event isn't dropped out of the calendar?
Maybe it's better to put this functionality into the drag and drop module as this would be helpful to anyone using drag and drop within a scrollable box. What do you think?
|
@mattlewis92 I have removed the extra parameter and improve the positioning of the event. Yes, I agree that this features can be useful for other components. |
|
Hey! 👋 Sorry about the extremely late reply on this one, I've been away on holiday the past few weeks / not had much time for open source. On reflection I realised that this and the other PR (#232) you sent can actually be implemented yourself in userland by extending the built in component and adding all the functionality you need to your app. I've put together a plunker that demonstrates how to do this here: http://plnkr.co/edit/5KyUBC0lnfMsYMcVFAR9?p=preview In the interests of keeping the core library as minimal as possible, I'm also going to remove the |
Add parameter "maxHeight" to have a fixed calendar height with a vertical scrollbar.
Useful when there is a lot of events for the same day.