Wereldwijde evenementen coördineren met Temporal

Het is lastig om afspraken in verschillende tijdzones te plannen met het verouderde Date-object, vooral rond de overgang naar de zomertijd, wanneer uren kunnen worden overgeslagen of herhaald.

De Temporal API biedt Temporal.ZonedDateTime om een datum en tijd in een specifieke tijdzone weer te geven, waarbij overgangen naar zomertijd automatisch en voorspelbaar worden afgehandeld.

Implementeren

Zo coördineer je wereldwijde evenementen en ga je om met mogelijke conflicten met de zomertijd:

1. VERPLICHT: Maak een ZonedDateTime: Gebruik Temporal.ZonedDateTime.from() om een datum/tijd-object te maken dat rekening houdt met de tijdzone.
2. VERPLICHT: Dubbelzinnigheid afhandelen: Gebruik de optie disambiguation om het gedrag te bepalen als een tijd dubbelzinnig is of niet bestaat (bijvoorbeeld tijdens klokwijzigingen).
3. VERPLICHT: Tijdzones converteren: Gebruik .withTimeZone() om de equivalente tijd op een andere locatie te bekijken.

Voorbeeld: Planning en conflictdetectie

// 1. Define the event time and target time zone
const date = "2025-03-09";
const time = "02:30"; // This time is skipped in New York during Spring Forward
const timeZone = "America/New_York";
const inputStr = `${date}T${time}[${timeZone}]`;

// 2. Detect conflicts using 'reject'
let hasConflict = false;
try {
  // 'reject' throws RangeError if the time is ambiguous or does not exist
  Temporal.ZonedDateTime.from(inputStr, { disambiguation: 'reject' });
} catch (e) {
  if (e instanceof RangeError) {
    hasConflict = true;
    console.log("This time falls in a DST transition gap or overlap.");
  }
}

// 3. Resolve the time safely using 'compatible' (default)
// 'compatible' will resolve to a valid time even if skipped or repeated
const hostTime = Temporal.ZonedDateTime.from(inputStr, { disambiguation: 'compatible' });
console.log(`Resolved time: ${hostTime.toString()}`);

// 4. Convert to another time zone (e.g., Tokyo)
const tokyoTime = hostTime.withTimeZone("Asia/Tokyo");
// Use toLocaleString() for user-facing display instead of manual hour/minute padding
console.log(`Tokyo time: ${tokyoTime.toLocaleString('en-US', { hour: 'numeric', minute: '2-digit' })}`);

Strategische implementatie en best practices

• Gebruik Temporal.ZonedDateTime WEL voor afspraken die aan een specifieke geografische locatie zijn gebonden (zoals een vergadering in een specifieke stad).
• Gebruik WEL disambiguation: 'reject' als je planningsconflicten tijdens de overgang naar zomertijd wilt detecteren en gebruikers hiervoor wilt waarschuwen.
• Gebruik WEL disambiguation: 'compatible' (de standaardwaarde) als je wilt dat het systeem automatisch een geschikte tijd kiest als er conflicten optreden.
• Gebruik Temporal.PlainDateTime NIET voor wereldwijde evenementen, omdat deze geen tijdzone-informatie bevat en geen rekening kan houden met zomertijd-wijzigingen.
• Gebruik WEL .withTimeZone() om de equivalente tijd op andere locaties te berekenen zonder het oorspronkelijke object te wijzigen (Temporal-objecten zijn onveranderlijk).
• Gebruik WEL de systeemeigen .toLocaleString()-opmaak (zoals { hour: 'numeric', minute: '2-digit' }) voor tijdweergaven voor gebruikers in plaats van handmatige tijdberekeningen en opvulling.

Reservestrategie

Fallbacks en browserondersteuning voor Temporal

Voor browsers die de native Temporal API nog niet ondersteunen, gebruik je functiedetectie en laad je temporal-polyfill dynamisch (~15 KB min+gz).

Houd er rekening mee dat als je temporal-polyfill importeert, het Temporal-object niet automatisch wordt toegewezen aan het globale bereik. Wijs de waarde expliciet toe als je code afhankelijk is van globalThis.Temporal.

// Check if Temporal is supported natively
(async () => {
  if (typeof Temporal === 'undefined') {
    // Load the polyfill conditionally
    const module = await import('https://esm.sh/temporal-polyfill');
    globalThis.Temporal = module.Temporal;
    // Extend Date.prototype if needed
    Date.prototype.toTemporalInstant = module.toTemporalInstant;
  }
  initializeApp();
})();