Wie zeigt man Kalendernamen wie Gregorianisch, Hebräisch, Islamisch an?

Verwenden Sie die JavaScript Intl.DisplayNames API, um menschenlesbare Kalendersystemnamen in jeder Sprache anzuzeigen

Einführung

Verschiedene Kulturen und Religionen verwenden unterschiedliche Kalendersysteme, um Daten zu verfolgen und Zeit zu organisieren. Während der gregorianische Kalender in vielen Teilen der Welt verbreitet ist, werden andere Kalendersysteme für religiöse Feiern, kulturelle Veranstaltungen und das tägliche Leben verwendet. Der hebräische Kalender wird in Israel und von jüdischen Gemeinschaften weltweit genutzt. Der islamische Kalender leitet muslimische religiöse Praktiken. Der buddhistische Kalender wird in Thailand und anderen südostasiatischen Ländern verwendet.

Anwendungen, die internationale Zielgruppen bedienen, müssen Benutzern die Möglichkeit geben, ihr bevorzugtes Kalendersystem zu wählen. Datumswähler, Einstellungsoberflächen und Planungstools zeigen Kalendernamen an, damit Benutzer das System auswählen können, das ihren Anforderungen entspricht. Anstatt kryptische Codes wie "gregory" oder "islamic-umalqura" anzuzeigen, zeigen Apps lesbare Namen wie "Gregorianischer Kalender" oder "Umm al-Qura Kalender" an.

Die Intl.DisplayNames API von JavaScript konvertiert Kalendersystemcodes in menschenlesbare Namen. Diese API übernimmt Übersetzungen automatisch und zeigt Kalendernamen in der Sprache des Benutzers an, ohne dass manuelle Übersetzungsdateien erforderlich sind.

Was sind Kalendercodes

Kalendercodes sind kurze String-Identifikatoren, die verschiedene Kalendersysteme repräsentieren. JavaScript verwendet diese standardisierten Codes intern zur Identifizierung von Kalendern.

Gängige Kalendercodes umfassen:

  • gregory für den gregorianischen Kalender
  • hebrew für den hebräischen Kalender
  • islamic für den islamischen Kalender
  • buddhist für den buddhistischen Kalender
  • chinese für den chinesischen Kalender
  • japanese für den japanischen Kalender

Diese Codes folgen der Unicode-Gebietsschema-Identifikatorspezifikation. Sie sind immer kleingeschrieben und verwenden bei Bedarf Bindestriche zur Trennung von Wörtern, wie islamic-umalqura oder islamic-civil.

Wie Intl.DisplayNames mit Kalendern funktioniert

Der Intl.DisplayNames-Konstruktor erstellt ein Objekt, das Codes in lesbaren Text übersetzt. Sie geben ein Gebietsschema für die Ausgabesprache und einen Typ für die Art der Codes an, die Sie übersetzen möchten.

Um Kalendernamen anzuzeigen, übergeben Sie "calendar" als Typ:

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

Das erste Argument ist der Gebietsschema-Code wie 'en' für Englisch oder 'fr' für Französisch. Das zweite Argument ist ein Options-Objekt, in dem Sie type: 'calendar' festlegen.

Sobald Sie ein DisplayNames-Objekt haben, verwenden Sie dessen of()-Methode, um Kalendercodes in Namen zu konvertieren:

const calendarName = displayNames.of('gregory');
console.log(calendarName); // "Gregorianischer Kalender"

Kalendernamen auf Englisch anzeigen

Hier ist, wie Sie die Namen des gregorianischen, hebräischen und islamischen Kalenders auf Englisch anzeigen:

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "Gregorian Calendar"
console.log(displayNames.of('hebrew')); // "Hebrew Calendar"
console.log(displayNames.of('islamic')); // "Islamic Calendar"

Sie können jeden unterstützten Kalender anzeigen, indem Sie seinen Code an die of()-Methode übergeben:

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('buddhist')); // "Buddhist Calendar"
console.log(displayNames.of('chinese')); // "Chinese Calendar"
console.log(displayNames.of('japanese')); // "Japanese Calendar"
console.log(displayNames.of('persian')); // "Persian Calendar"

Der islamische Kalender hat mehrere Varianten für verschiedene Berechnungsmethoden:

const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

console.log(displayNames.of('islamic')); // "Islamic Calendar"
console.log(displayNames.of('islamic-umalqura')); // "Umm al-Qura Calendar"
console.log(displayNames.of('islamic-civil')); // "Islamic Civil Calendar"
console.log(displayNames.of('islamic-tbla')); // "Islamic Tabular Calendar"

Alle verfügbaren Kalendersysteme abrufen

JavaScript bietet 17 Kalendersysteme. Sie können die vollständige Liste programmatisch mit Intl.supportedValuesOf() abrufen:

const calendars = Intl.supportedValuesOf('calendar');
console.log(calendars);

Dies gibt ein Array aller unterstützten Kalendercodes zurück:

[
  'buddhist',
  'chinese',
  'coptic',
  'dangi',
  'ethioaa',
  'ethiopic',
  'gregory',
  'hebrew',
  'indian',
  'islamic',
  'islamic-umalqura',
  'islamic-tbla',
  'islamic-civil',
  'islamic-rgsa',
  'iso8601',
  'japanese',
  'persian',
  'roc'
]

Sie können durch dieses Array iterieren, um alle Kalendernamen anzuzeigen:

const calendars = Intl.supportedValuesOf('calendar');
const displayNames = new Intl.DisplayNames('en', { type: 'calendar' });

calendars.forEach(calendar => {
  console.log(`${calendar}: ${displayNames.of(calendar)}`);
});

Dies gibt aus:

buddhist: Buddhist Calendar
chinese: Chinese Calendar
coptic: Coptic Calendar
dangi: Dangi Calendar
ethioaa: Ethiopic Amete Alem Calendar
ethiopic: Ethiopic Calendar
gregory: Gregorian Calendar
hebrew: Hebrew Calendar
indian: Indian National Calendar
islamic: Islamic Calendar
islamic-umalqura: Umm al-Qura Calendar
islamic-tbla: Islamic Tabular Calendar
islamic-civil: Islamic Civil Calendar
islamic-rgsa: Islamic Calendar (Saudi Arabia)
iso8601: ISO-8601 Calendar
japanese: Japanese Calendar
persian: Persian Calendar
roc: Minguo Calendar

Kalendernamen in verschiedenen Sprachen lokalisieren

Kalendernamen erscheinen in der Sprache, die Sie im Locale-Parameter angeben. Dies ermöglicht es Ihnen, Kalendernamen für Benutzer in ihrer bevorzugten Sprache anzuzeigen.

Kalendernamen auf Arabisch anzeigen:

const displayNames = new Intl.DisplayNames('ar', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "التقويم الميلادي"
console.log(displayNames.of('hebrew')); // "التقويم العبري"
console.log(displayNames.of('islamic')); // "التقويم الهجري"

Kalendernamen auf Französisch anzeigen:

const displayNames = new Intl.DisplayNames('fr', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "calendrier grégorien"
console.log(displayNames.of('hebrew')); // "calendrier hébraïque"
console.log(displayNames.of('islamic')); // "calendrier musulman"

Kalendernamen auf Hebräisch anzeigen:

const displayNames = new Intl.DisplayNames('he', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "לוח השנה הגרגוריאני"
console.log(displayNames.of('hebrew')); // "לוח השנה העברי"
console.log(displayNames.of('islamic')); // "לוח השנה ההיג'רי"

Kalendernamen auf Chinesisch anzeigen:

const displayNames = new Intl.DisplayNames('zh', { type: 'calendar' });

console.log(displayNames.of('gregory')); // "公历"
console.log(displayNames.of('hebrew')); // "希伯来历"
console.log(displayNames.of('islamic')); // "伊斯兰历"

Der Browser übernimmt alle Übersetzungen automatisch. Sie benötigen keine Übersetzungsdateien oder manuelle String-Verwaltung.

Erstellen eines Kalenderauswahl-Dropdown-Menüs

Hier ist, wie Sie ein Dropdown-Menü erstellen, das Benutzern die Auswahl eines Kalendersystems ermöglicht:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calendar Selector</title>
</head>
<body>
  <label for="calendar-select">Choose a calendar:</label>
  <select id="calendar-select"></select>

  <script>
    const userLocale = navigator.language || 'en';
    const displayNames = new Intl.DisplayNames(userLocale, { type: 'calendar' });
    const calendars = Intl.supportedValuesOf('calendar');
    const selectElement = document.getElementById('calendar-select');

    calendars.forEach(calendar => {
      const option = document.createElement('option');
      option.value = calendar;
      option.textContent = displayNames.of(calendar);
      selectElement.appendChild(option);
    });

    selectElement.addEventListener('change', (event) => {
      console.log('Selected calendar:', event.target.value);
    });
  </script>
</body>
</html>

Dieser Code führt Folgendes aus:

  1. Ermittelt das Browser-Locale des Benutzers mit navigator.language
  2. Erstellt ein DisplayNames-Objekt mit dem Locale des Benutzers
  3. Ruft alle verfügbaren Kalender-Codes ab
  4. Erstellt ein Option-Element für jeden Kalender
  5. Setzt den Optionstext auf den lokalisierten Kalendernamen
  6. Fügt einen Event-Listener hinzu, um die Kalenderauswahl zu verarbeiten

Das Dropdown zeigt automatisch Kalendernamen in der Sprache des Benutzers an. Ein Benutzer mit einem arabischen Browser sieht arabische Kalendernamen. Ein Benutzer mit einem französischen Browser sieht französische Kalendernamen.

Wann Kalendernamen anzeigen

Zeigen Sie Kalendernamen in diesen Situationen an:

  • Einstellungsseiten, auf denen Benutzer ihr bevorzugtes Kalendersystem auswählen
  • Datumsauswahl-Komponenten, die mehrere Kalendersysteme unterstützen
  • Formulare zur Ereigniserstellung, in denen Benutzer angeben, welcher Kalender verwendet werden soll
  • Benutzerprofilseiten, auf denen Kalendereinstellungen gespeichert werden
  • Planungsanwendungen, die mit verschiedenen Kalendersystemen arbeiten
  • Religiöse oder kulturelle Anwendungen, die auf bestimmte Kalender verweisen

Die Anzeige von Kalendernamen macht Ihre Anwendung für Benutzer zugänglich, die mit nicht-gregorianischen Kalendersystemen arbeiten. Sie beseitigt Unklarheiten darüber, welches Kalendersystem die Anwendung für Daten und Ereignisse verwendet.

Die Intl.DisplayNames API mit type: 'calendar' bietet sofortigen Zugriff auf lokalisierte Kalendernamen, ohne Übersetzungsdateien oder Metadaten zu Kalendersystemen verwalten zu müssen.