{
  "id": 17957513,
  "title": "Opening hours component in React with time zones",
  "url": "https://urgent.news/2026/11/03/opening-hours-component-in-react-with-time-zones",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-03T11:51:47.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/marcoschulz123/opening-hours-component-in-react-with-time-zones-1ck6"
  },
  "original_language": "en",
  "account": "When a salon in Zurich displays an \"Open now\" badge, it shows \"Open\" at 11 pm, due to a time zone discrepancy. This issue led to the creation of the Opening hours component and the Open now badge in React, which compute everything in the business's own IANA time zone. The source code for this component is provided below.\n\nThe function `getZonedNow` takes a `Date` object and a `timeZone` string as parameters. It uses the `Intl.DateTimeFormat` API to format the date in the specified time zone and extract the day and minutes since midnight. The resulting object includes a `day` property (representing the day of the week as a numeric index) and a `minutes` property (representing the current time as minutes since midnight).\n\nThe component works with a weekly map, where each day contains an array of ranges. These ranges represent the salon or restaurant's opening hours throughout the week. If a day is closed, the array is null, empty, or missing. When there are multiple ranges, it indicates a split shift.\n\nThe component renders \"Closed\" for days with no data and joins the ranges of a split day using a comma. For ranges that close after midnight, such as a bar open until 02:00, the time is treated as belonging to the next day. To highlight the current day, the component uses the `getZonedNow` function to determine the current day based on the business's time zone, ensuring that the user sees the correct day regardless of their local time zone.",
  "summary": "The first \"Open now\" badge I shipped for a client lied. The salon was in Zurich, the site was deployed on servers in the US, and I was testing from my laptop at home. It showed \"Open\" at 11 pm because somewhere in the chain a date was created in the wrong time zone. That bug is the reason the Opening hours component and the Open now badge in Facade compute everything in the business's own IANA…",
  "key_points": [
    "Opening hours component in React handles time zones for businesses",
    "getZonedNow function converts Date object to specified time zone",
    "Component uses weekly map to display open/close status and split shifts"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}