计算日历周视图中的预订高度

Question

我正在构建一个日历，它应该提供您在该周预订的小时数的抽象可视化。所以每个 .bar-item 都意味着 x 分钟花在某事上。现在我正在努力寻找一种方法来确保天数彼此成比例。

我所做的是取一周中最长的一天和条形图所在容器的高度。这样我就可以计算出最长一天的 1 分钟有多高 (px)，并使用它所有日子的价值。我希望这是有道理的。

我用一些硬编码数据做了这个 fiddle：https://jsfiddle.net/luffyyyyy/vate1d4h/13/

new Vue({
        el: '#app',
        data: {
            minuteHeight: 0,
            longestDay: 600
        },
        mounted() {
            window.addEventListener('resize', this.handleResize);
            this.handleResize();
        },
        destroyed() {
            window.removeEventListener('resize', this.handleResize);
        },
        methods: {
            handleResize() {
                this.minuteHeight = this.$refs.container.offsetHeight / this.longestDay;
                console.log(this.minuteHeight);
            }
        }
    });

现在这在您加载页面时起作用，当您使页面变大（缩放）时它也起作用。但是当你开始缩小页面时，它会保持最大尺寸（我想？）。

这是解决这个问题的正确方法吗？
为什么缩小浏览器时没有缩小？

Answer 1

我建议 longestDay 有一个固定的高度，换句话说，你可以说 1 分钟的 height 为 2px。这样，假设您有足够的垂直 space，您的计算就会变得容易得多。在您的代码示例中，1 分钟在较小的视口上是 0.396px。

如果要标记预订，需要考虑大小写，如果预订太小。

编辑：我通过更改 handleResize 方法的计算解决了调整大小问题。目前容器高度用于计算。当增加 window 高度时，容器会根据您的 css 规则扩展。收缩 window 高度时，出现滚动条，因为容器高度没有变化。您必须使用 window 的内部高度进行计算。

handleResize() {
    this.minuteHeight = window.innerHeight / this.longestDay;
}

计算日历周视图中的预订高度

Calculating heights of bookings in calendar weekview

javascript

css

calendar

resize

vue.js