Question

我正在为Angular开发日历组件，我需要在网格中放置一些div元素（代表事件）。

this.days.forEach((day: SchedulerViewDay, dayIndex: number) => {
        day.events = this.getEventsInPeriod({...}).map((event: CalendarSchedulerEvent) => {
            const segmentDuration: number = 60.0 / this.hourSegments;
            const dayStartDate: Date =
                setSeconds(setMinutes(setHours(
                setDate(setMonth(setYear(new Date(), day.date.getFullYear()), day.date.getMonth()), day.date.getDate()), this.dayStartHour), this.dayStartMinute), 0);
            const segmentsNumber: number = (differenceInMinutes(event.start, dayStartDate) / segmentDuration);

            return <CalendarSchedulerEvent>{
                ...
                height: this.hourSegmentHeight * (differenceInMinutes(event.end, event.start) / segmentDuration),
                top: (this.hourSegmentHeight * segmentsNumber)
            };
        });

使用该代码，结果如下：

您可以看到事件div的位置不正确。我认为这是由于网格单元格边框造成的，所以我应用了此修复程序：

top: (this.hourSegmentHeight * segmentsNumber) + (segmentsNumber / 2) // 1px for each separator line

每个边框的宽度均为1px，我只考虑实线边框而不是虚线边框（这是/ 2的动机。

这几乎可以解决问题。仍然存在偏差。而且，这不是一个优雅的解决方案，但我不知道要使其更干净。

如何正确定位这些div？

非常感谢您！

编辑： inorganik 解决方案的实现（第一个答案）

我在mixins文件中创建了以下scss：

@mixin day-x($attr, $attr-count: 7, $attr-steps: 1, $unit: '%') {
    $attr-list: null;

    @for $i from 1 through $attr-count {
        $attr-value: $attr-steps * $i;

        &.day#{$i} {
            #{$attr}: #{$attr-value}#{$unit};
        }

        $attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma);
    }

    #{$attr-list} {
        //append style to all classes
    }
}

@mixin time-x($attr, $start-hour: 0, $end-hour: 23, $attr-steps: 2, $minutes-steps: 15, $unit: '%') {
    $attr-list: null;
    $hours: $start-hour;
    $minutes: 0;
    $attr-count: ((($end-hour + 1) - $start-hour) * 60) / $minutes-steps;

    @for $i from 0 through $attr-count {
        $attr-value: $attr-steps * $i;

        @if($i > 0) {
            $minutes: $minutes + $minutes-steps;
            @if($minutes == 60) {
                $minutes: 0;
                $hours: $hours + 1;
            }
        }

        $hoursString: '#{$hours}';
        @if($hours < 10) {
            $hoursString: '0#{$hours}';
        }

        $minutesString: '#{$minutes}';
        @if($minutes < 10) {
            $minutesString: '0#{$minutes}';
        }

        &.time#{$hoursString}#{$minutesString} {
            #{$attr}: #{$attr-value}#{$unit};
        }

        $attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma);
    }

    #{$attr-list} {
        //append style to all classes
    }
}

@mixin length-x($attr, $attr-steps: 2, $minutes-steps: 15, $unit: '%') {
    $attr-list: null;
    $attr-count: 24 * 60 / $minutes-steps;

    @for $i from 0 through $attr-count {
        $attr-name: $minutes-steps * $i;
        $attr-value: $attr-steps * $i;

        &.length#{$attr-name} {
            #{$attr}: #{$attr-value}#{$unit};
        }

        $attr-list: append($attr-list, unquote(".#{$attr}-#{$attr-value}"), comma);
    }

    #{$attr-list} {
        //append style to all classes
    }
}

@include day-x('left', 7, 5);
@include time-x('top', 6, 22, 1.47);
@include length-x('height', 1.47);

然后我将这些样式应用于[ngClass]属性，并调用以下方法（暂时不需要getDay）：

getPositioningClasses(event: CalendarSchedulerEvent): string {
    const classes: string[] = [
        this.getDayClass(event.start),
        this.getTimeClass(event.start),
        this.getLengthClass(differenceInMinutes(event.end, event.start))
    ];
    return classes.join(' ');
}

private getDayClass(date: Date): string {
    return '';
}
private getTimeClass(date: Date): string {
    let hours: string = date.getHours() < 10 ? `0${date.getHours()}` : `${date.getHours()}`;
    let minutes: string = date.getMinutes() < 10 ? `0${date.getMinutes()}` : `${date.getMinutes()}`;
    return `time${hours}${minutes}`;
}
private getLengthClass(durationInMinutes: number): string {
    return `length${durationInMinutes}`;
}

这是结果：

从图形上讲，它就像一个咒语一样工作，但是我需要保持段高度（58px）与用于生成定位类的百分比增量（现在是1.47%）对齐。

是否有一种方法可以从Angular代码中使这些变量（段高度，百分比高度和顶部位置增量）变大，使段高度可由用户配置，并使这些增量适应自身？

非常感谢您！

编辑2：另一个问题

再见！我遇到了另一个问题。组件小时数范围不是固定的，但可以从外部配置。在示例中，问题是6AM-22PM。对于该范围，可以使用1.47的百分比，但是如果我更改范围（例如0AM-22AM），则日历高度会更高，并且该百分比也不再适用。

我想我需要从Typescript计算那些定位值。但是我不知道该怎么做。

尝试一些我正在尝试的方法：

ngAfterViewInit(): void {
    this.calendarContainerHeight = this.calendarContainer.nativeElement.clientHeight;
    const segmentPercentage: number = 100.0 * this.hourSegmentHeight / this.calendarContainerHeight;
    console.log("calendarContainerHeight: ", this.calendarContainerHeight);
    console.log("segmentPercentage: ", segmentPercentage);

    setTimeout(() => {
        this.view.days.forEach(d => {
            d.events.forEach((event: CalendarSchedulerEvent) => {
                let hours: number = event.start.getHours();
                if (this.dayStartHour > 0) { hours = hours - this.dayStartHour; }

                const numberOfSegments: number = hours * this.hourSegments;
                event.top = numberOfSegments * segmentPercentage;
            });
        });
    });
}

然后我将[style.top.%]="event.top"添加到了事件div。这就是结果（暂时忽略高度，我尚未管理它们）：

如您所见，百分比不正确，并且在一天中（或一天结束时）的事件未正确定位。

我该如何解决这个问题？再次非常感谢您！

Answer 1

在代码中计算像素距离似乎是一种脆弱的解决方案。我会使用CSS类。您可以让SCSS mixin为您生成天，时间和段长度的所有可能的类。制作3种返回css类字符串的方法，一种用于天，一种用于时间，一种用于段长度，可以用[ngClass]来应用。然后是一个调用每个对象的方法，如下所示。假设您有一个细分受众群数组，可在其中存储日期/时间/长度信息：

getPositioningClasses(segment: any): string {
  const classes = [this.getDayClass(segment.dayStartDate), this.getTimeClass(segment.dayStartDate), this.getLengthClass(segment.timeLength)];
  return classes.join(' ');
}

所以您的标记可能最终看起来像这样：

<segment [ngClass]="getPositioningClasses(segment)"></segment>

已编译：

<segment class="day0 time1430 length130"></segment>

day0-无论显示多少天，您都可以输入0-X。此类仅负责与左侧的距离。如果可以，请使用百分比，以使布局灵活。
time1430在这种情况下，下午2:30-此类仅负责与顶部的距离
length130在这种情况下一个半小时。理想情况下，将最小的时间增量（15m？）设置为百分比高度，然后让mixin将每个可能的长度乘以增量。

还要确保不必考虑边界问题，将box-sizing: border-box css规则应用于几乎所有内容。

Angular中的绝对定位div

1 个答案: