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

Question

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

Image of horizontal calendar and time span bar

Answer 1

您可以通过获取范围内的天数来计算特定日期范围的条形宽度，然后根据范围内的天数占全年的百分比计算宽度占全宽度的百分比.

即eventWidth = daysInRange ÷ daysInYear * grahpFullWidth

如果您只想从年初开始定位某些内容，请始终使用当年的 1 月 1 日作为范围的开始。

例如下面将今天的日期放在 183px 宽的条上。您可以通过更改样式属性来更改图表，例如将宽度设置为 300px。

function getDayOfYear(date) {
  // Use UTC to avoid any DST issues
  let d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
  let yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
  return Math.ceil((d - yearStart) / 8.64e7) + 1;
}

function getDaysInYear(date) {
  return getDayOfYear(new Date(date.getFullYear(), 11, 31));
}

function graphDate(date) {
  let dayNum = getDayOfYear(date);
  let daysInYear = getDaysInYear(date);
  let timeline = document.getElementById('timeline');
  let someEvent = document.getElementById('someEvent');
  let dateText = document.getElementById('dateText');
  let fullWidth = parseInt(window.getComputedStyle(timeline).getPropertyValue('width'));
  let partWidth = fullWidth * dayNum / daysInYear;
  someEvent.style.width = partWidth + 'px';
  dateText.textContent = date.toLocaleString('en-GB',{
    day: 'numeric',
    month: 'short'
  });
  dateText.style.marginLeft = partWidth - 1 + 'px';
  document.getElementById('yearLabel').textContent = date.getFullYear();
}

// Graph today
graphDate(new Date());

#timeline {
  border: 1px solid red;
  width: 183px;
  height: 10px;
}

#someEvent {
  border: 0;
  height: 10px;
  background-color: green;
  width: 0px;
}
#startLabel {
  width: 90px;
  display: inline-block;
}
#yearLabel {
  width: 90px;
  display: inline-block;
  font-size: 130%;
}
#dateText {
  padding: 15px 0 0 3px;
  border-left: 1px solid blue;
}

<div id="labels">
  <span id="startLabel">1 Jan</span>
  <span id="yearLabel"></span>
  <span id="endLabel">31 Dec</span>
</div>
<div id="timeline">
  <div id="someEvent"></div>
</div>
<div id="dateText"></div>