在水平日历上显示时间数据

Question

我有一个水平日历，每个月的宽度为183px（像素）。我想根据开始日期和结束日期在这个水平日历的顶部显示一个时间跨度条（见下图）。因此，如果我的开始日期为：01-01-2020，结束日期为：03-15-2020，2.5 months * 183px这就是我可以获得的关闭日期，但是我可以做什么或使用什么来确定：03-15-2020 - 01-01-2020 = ~2.5 months尽可能准确？此外，我需要这个时间跨度栏从我的水平日历的当前日期开始，所以如果它开始，02-01-2020那么时间跨度 div 将从left: 183px;我目前正在探索date-fns但还没有运气开始。任何事情都会有所帮助，非常感谢您抽出宝贵的时间。我正在使用 React.js、Javascript 和 Typescript。

Answer 1

您可以通过获取该范围内的天数来计算特定日期范围的条形宽度，然后根据该范围内的天数与全年的百分比计算宽度占整个宽度的百分比。即 eventWidth = daysInRange ÷ daysInYear * grahpFullWidth如果您只想从年初开始定位某些内容，则始终使用当年的 1 月 1 日作为范围的开始。例如，以下将今天的日期放在一个 183 像素宽的条上。您可以通过更改样式属性来更改图形，例如将宽度设置为 300 像素。function getDayOfYear(date) {&nbsp; // Use UTC to avoid any DST issues&nbsp; let d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));&nbsp; let yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));&nbsp; return Math.ceil((d - yearStart) / 8.64e7) + 1;}function getDaysInYear(date) {&nbsp; return getDayOfYear(new Date(date.getFullYear(), 11, 31));}function graphDate(date) {&nbsp; let dayNum = getDayOfYear(date);&nbsp; let daysInYear = getDaysInYear(date);&nbsp; let timeline = document.getElementById('timeline');&nbsp; let someEvent = document.getElementById('someEvent');&nbsp; let dateText = document.getElementById('dateText');&nbsp; let fullWidth = parseInt(window.getComputedStyle(timeline).getPropertyValue('width'));&nbsp; let partWidth = fullWidth * dayNum / daysInYear;&nbsp; someEvent.style.width = partWidth + 'px';&nbsp; dateText.textContent = date.toLocaleString('en-GB',{&nbsp; &nbsp; day: 'numeric',&nbsp; &nbsp; month: 'short'&nbsp; });&nbsp; dateText.style.marginLeft = partWidth - 1 + 'px';&nbsp; document.getElementById('yearLabel').textContent = date.getFullYear();}// Graph todaygraphDate(new Date());#timeline {&nbsp; border: 1px solid red;&nbsp; width: 183px;&nbsp; height: 10px;}#someEvent {&nbsp; border: 0;&nbsp; height: 10px;&nbsp; background-color: green;&nbsp; width: 0px;}#startLabel {&nbsp; width: 90px;&nbsp; display: inline-block;}#yearLabel {&nbsp; width: 90px;&nbsp; display: inline-block;&nbsp; font-size: 130%;}#dateText {&nbsp; padding: 15px 0 0 3px;&nbsp; border-left: 1px solid blue;}<div id="labels">&nbsp; <span id="startLabel">1 Jan</span>&nbsp; <span id="yearLabel"></span>&nbsp; <span id="endLabel">31 Dec</span></div><div id="timeline">&nbsp; <div id="someEvent"></div></div><div id="dateText"></div>

Answer 2

我能想到的最懒惰的方法是用 js 为你的 bar 组件（我假设它是绝对的并且相对于日历）编写样式，并根据它在哪个月份之间设置基于此计算的宽度。像这样的东西&nbsp; &nbsp; var newStyles = document.createElement('style')document.head.append(newStyles)newStyles.innerHTML = ".my-element {" +&nbsp; "height: " + height + "px;" +&nbsp; "width: 40px;" +&nbsp; "color: #9b806b;" +"}"