weekView dragEnter & dragLeave event on segment

Is your feature request related to a problem? Please describe

Hey there @mattlewis92 😃 Thanks for your great work !

I’m looking to display the segment hour when i’m hovering a segment in the different views. As shown below

but the problem is not the hover but the dragOver, I’d like to display the same thing but when I’m hovering an hour segment while dragging something. → example below

Describe the solution you’d like

Could it be possible to drigger the fact that we dragEnter and dragLeave an hourSegment ?

I’ve been able to do it in my day view as I use the day-view-scheduler and we have access to the component mwl-calendar-week-view-hour-segment in the html here is the code I’ve added

<mwl-calendar-week-view-hour-segment
                    *ngFor="let segment of hour.segments; trackBy: trackByHourSegment"
                    [style.height.px]="hourSegmentHeight"
                    [segment]="segment"
                    [segmentHeight]="hourSegmentHeight"
                    [locale]="locale"
                    [customTemplate]="hourSegmentTemplate"
                    (mwlClick)="hourSegmentClicked.emit({ date: segment.date,
                                                              sourceEvent: $event})"
                    [clickListenerDisabled]="hourSegmentClicked.observers.length === 0"
                    mwlDroppable
                    [dragOverClass]="!dragActive || !snapDraggedEvents ? 'cal-drag-over' : null"
                    dragActiveClass="cal-drag-active"
                    [matTooltip]="segment.displayDate | calendarDate: 'weekViewHour':locale"
                    [matTooltipClass]="'segment-tooltip'"
                    [matTooltipShowDelay]="100"
                    #segmentTooltip="matTooltip"
                    (dragLeave)="segmentTooltip.hide()"
                    (dragEnter)="segmentTooltip.show()"
                    (drop)="eventDropped($event, segment.date, false)">
</mwl-calendar-week-view-hour-segment>

and here is the result

Describe your use case for implementing this feature

When I’m dragging something on my calendar it’s sometimes hard to see which timeslot i’m dropping the event

Additional context

Thanks for your help @mattlewis92 😃

[ALapaque]

Ok I see now 😃 @mattlewis92 thanks again for your help 😃

[ALapaque]

@mattlewis92 Yay !

Here is the mix I did 😃

<!-- CUSTOM AGENDA SEGMENT -->
<ng-template #customHourSegmentTemplate
             let-segment="segment"
             let-locale="locale"
             let-segmentHeight="segmentHeight"
             let-isTimeLabel="isTimeLabel">
  <div class="cal-hour-segment"
       [style.height.px]="segmentHeight"
       [class.cal-hour-start]="segment.isStart"
       [class.cal-after-hour-start]="!segment.isStart"
       [ngClass]="segment.cssClass"
       #segmentTooltip="matTooltip"
       [matTooltip]="segment.displayDate | calendarDate: 'weekViewHour':locale"
       [matTooltipClass]="'tooltip tooltip--segment'"
       [matTooltipShowDelay]="100"
       mwlDroppable
       (dragLeave)="segmentTooltip.hide()"
       (dragEnter)="segmentTooltip.show()">
    <div class="cal-time" *ngIf="isTimeLabel">
      {{ segment.displayDate | calendarDate: "weekViewHour":locale }}
    </div>
    <span class="now-line"
          *ngIf="!isTimeLabel && segment && isCurrentHourSegment(segment)"
          [style.top]="getCurrentHourSegmentOffset(segment, segmentHeight)">
    </span>
  </div>
</ng-template>

in order to be able to display the tooltip from angular-material and it works well 👍 Can you explain to a me a bit the direction mwlDroppable what does it do there ?

Does it allow to trigger the events on the dragLeave and dragEnter on the element marked ?