Tutorial · UI

Calendar UI components from Unix timestamps

Data model pattern

React state often stores startMs and endMs exclusive for half-open intervals — document which convention you use to match backend SQL. For all-day events, some products store civil dates without times; represent them as starting at midnight in a chosen zone and convert carefully near DST.

Building a local day range

function startOfLocalDayMs(year, monthIndex, day) {
  // monthIndex: JS convention 0-11
  return new Date(year, monthIndex, day, 0, 0, 0, 0).getTime();
}

function endOfLocalDayMs(year, monthIndex, day) {
  return new Date(year, monthIndex, day, 23, 59, 59, 999).getTime();
}

For production, swap to Temporal or server-side normalization to avoid off-by-one when DST skips hours — QA should include the spring-forward weekend for affected zones.

Accessibility and validation

• Associate labels with inputs; expose keyboard navigation on custom grids.
• Announce range updates via live regions only when necessary — too much chatter frustrates screen reader users.
• Block submission until start < end in epoch space.

Wire format table

Key takeaways

• Half-open intervals reduce double-booking bugs.
• Never trust the browser's default zone for persisted data.
• Use integration tests with frozen clocks for flaky date logic.
• Pair with timestamp converter during design reviews.