3

我觉得这有点远，但我还是会问。

我有一个显示angular-calendar day-view-scheduler的组件。我使用它来显示任何给定日期的视图以及在该特定日期安排的事件。我得到的要求之一是将此日视图调度程序应用于周视图，以便它显示本周正在发生的事情的更高级别的视图。我修改了周视图以显示日视图调度程序组件，而不是像通常那样显示单个列。

在此处输入图像描述

除了能够将事件从一天拖放到另一天之外，我可以根据需要进行这项工作。当我尝试将它们拖过日期边界时，这些事件不会跟随光标，它们基本上卡在日期列中，这让我感到困惑和不走运。

以下是与本周视图组件关联的 html 代码：

<div class="cal-week-view" role="grid">
  <mwl-calendar-week-view-header
    [days]="days"
    [locale]="locale"
    [customTemplate]="headerTemplate"
    (dayHeaderClicked)="dayHeaderClicked.emit($event)"
    (eventDropped)="eventDropped({ dropData: $event }, $event.newStart, true)"
    (dragEnter)="dateDragEnter($event.date)">
  </mwl-calendar-week-view-header>
  <div class="cal-time-events" mwlDroppable (dragEnter)="dragEnter('time')" (dragLeave)="dragLeave('time')">
    <div *ngIf="view.hourColumns.length > 0 && daysInWeek !== 1" class="cal-time-label-column">
      <div *ngFor="let hour of view.hourColumns[0].hours; trackBy: trackByHour; let odd = odd" class="cal-hour" [class.cal-hour-odd]="odd">
        <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"
          [isTimeLabel]="true"
          [daysInWeek]="daysInWeek">
        </mwl-calendar-week-view-hour-segment>
      </div>
    </div>
    <div #dayColumns class="cal-day-columns" [class.cal-resize-active]="timeEventResizes.size > 0">
      <div *ngFor="let column of view.hourColumns; trackBy: trackByHourColumn" class="cal-day-column">
        <mwl-day-view-scheduler
          [viewDate]="column.date"
          [events]="events"
          [users]="users"
          [showHours]="false"
          [dayStartHour]="8"
          [dayEndHour]="17"
          [hourSegments]="hourSegments"
          [templateMode]="templateMode"
          [eventTemplate]="customTemplate"
          [hourSegmentHeight]="25"
          (eventTimesChanged)="eventChanged($event)"
          (userChanged)="resourceChanged($event)"
          (clipboardEventDropped)="eventChanged($event)">
        </mwl-day-view-scheduler>
      </div>
    </div>
    <ng-template #customTemplate let-event="weekEvent">
      <app-appointment-formatter [event]="event"></app-appointment-formatter>
    </ng-template>
  </div>
</div>

我的猜测是与 mwlDroppable 相关的某种限制器或边界，我只是不确定如何删除它。任何输入或见解将不胜感激。

4

0 回答 0