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

Verwenden Sie die Intl.DisplayNames-API von JavaScript, um lesbare Kalenderssystemnamen 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 Gemeinden weltweit verwendet. 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 ermöglichen, ihr bevorzugtes Kalendersystem auszuwählen. Datumsauswahlen, 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 Kalenderssystemcodes in lesbare 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 Zeichenfolgenbezeichner, die verschiedene Kalendersysteme repräsentieren. JavaScript verwendet diese standardisierten Codes intern, um Kalender zu identifizieren.

Häufige 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-Locale-Identifier-Spezifikation. Sie sind immer kleingeschrieben und verwenden Bindestriche zur Trennung von Wörtern, wenn nötig, 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 Locale 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 Locale-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 umzuwandeln:

const calendarName = displayNames.of('gregory');
console.log(calendarName); // "Gregorian Calendar"

Kalendernamen auf Englisch anzeigen

So zeigen Sie die Namen des gregorianischen, hebräischen und islamischen Kalenders auf Englisch an:

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 dessen 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 unterschiedliche 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 werden in der Sprache angezeigt, die Sie im locale-Parameter angeben. So können Sie Benutzern Kalendernamen in ihrer bevorzugten Sprache anzeigen.

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.

So erstellen Sie ein Dropdown-Menü, mit dem Benutzer ein Kalendersystem auswählen können:

<!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. Ruft das Browser-Locale des Benutzers mit navigator.language ab
  2. Erstellt ein DisplayNames-Objekt mit dem Locale des Benutzers
  3. Ruft alle verfügbaren Kalendercodes 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-Menü zeigt Kalendernamen automatisch 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 angezeigt werden sollten

Zeigen Sie Kalendernamen in folgenden 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 die Kalenderpräferenz gespeichert wird
  • 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 Ihnen sofortigen Zugriff auf lokalisierte Kalendernamen, ohne Übersetzungsdateien oder Metadaten zu Kalendersystemen pflegen zu müssen.