docs: update time zone docs, add Asia/Saigon examples (#2878)

* docs: update time zone docs, add Asia/Saigon examples

Signed-off-by: gpbl <[email protected]>

* Export example

Signed-off-by: gpbl <[email protected]>

* Update test description

Signed-off-by: gpbl <[email protected]>

---------

Signed-off-by: gpbl <[email protected]>

Author: gpbl

examples/AsiaSaigonTimezone.test.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+import { render, screen } from "@/test/render";
+import { AsiaSaigonTimezone } from "./AsiaSaigonTimezone";
+
+beforeEach(() => {
+  render(<AsiaSaigonTimezone />);
+});
+
+test.skip("the first row should display 7 days", () => {
+  expect(
+    screen.getAllByRole("row")[0].querySelectorAll("[role='gridcell']"),
+  ).toHaveLength(7);
+});

examples/AsiaSaigonTimezone.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import { DayPicker } from "react-day-picker";
+
+export function AsiaSaigonTimezone() {
+  return <DayPicker defaultMonth={new Date(1900, 11)} timeZone="Asia/Saigon" />;
+}

examples/index.ts

@@ -3,6 +3,7 @@ export * from "./Animate";
 export * from "./AnimateCSSVars";
 export * from "./AnimateRange";
 export * from "./AnimateRtl";
+export * from "./AsiaSaigonTimezone";
 export * from "./AutoFocus";
 export * from "./BroadcastCalendar";
 export * from "./Buddhist";

website/docs/localization/setting-time-zone.mdx

@@ -9,19 +9,21 @@ By default, DayPicker uses the browser’s local time zone. You can override thi
 
 The time zone can be specified as either an [IANA time zone](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones) identifier or a UTC offset.
 
-| Prop Name  | Type     | Description                                       |
-| ---------- | -------- | ------------------------------------------------- |
-| `timeZone` | `string` | The time zone to use when rendering the calendar. |
+| Prop Name  | Type     | Description                                            |
+| ---------- | -------- | ------------------------------------------------------ |
+| `timeZone` | `string` | The IANA time zone to use when rendering the calendar. |
 
 ```tsx
 <DayPicker timeZone="UTC" /> // Coordinated Universal Time
 <DayPicker timeZone="Pacific/Honolulu" /> // US Hawaii Time
 <DayPicker timeZone="Europe/Paris" /> // Central European Time
+<DayPicker timeZone="UTC+2" /> // UTC plus 2 hours
+<DayPicker timeZone="UTC-5" /> // UTC minus 5 hours
 ```
 
 ## Working with time-zoned dates
 
-When working with time zones, use the `TZDate` object exported by `react-day-picker` instead of the native `Date` object. `TZDate` ensures the calendar reads and writes dates in the time zone you specify.
+When working with time zones, use the `TZDate` object exported by `react-day-picker` instead of the native `Date` object. `TZDate` ensures your user interface always reads and writes dates in the time zone you specify.
 
 ```tsx
 import React, { useState } from "react";
@@ -38,6 +40,11 @@ export function TimeZone() {
       timeZone={timeZone}
       selected={selected}
       onSelect={setSelected}
+      footer={
+        selected
+          ? selected.toString()
+          : `Pick a day to see it is in ${timeZone} time zone.`
+      }
     />
   );
 }

website/src/components/Playground/LocalizationFieldset.tsx

@@ -42,6 +42,7 @@ const timeZones = [
   "Asia/Dubai",
   "Asia/Hong_Kong",
   "Asia/Kolkata",
+  "Asia/Saigon",
   "Asia/Seoul",
   "Asia/Shanghai",
   "Asia/Singapore",