Liste der verfügbaren Kalendersysteme abrufen

Entdecken Sie, welche Kalendersysteme Ihre JavaScript-Umgebung unterstützt

Einführung

Beim Entwickeln von Anwendungen für ein globales Publikum benötigen Benutzer oft die Möglichkeit, Datumsangaben in ihrem bevorzugten Kalendersystem anzuzeigen. Während Sie möglicherweise mit dem gregorianischen Kalender vertraut sind, der in den meisten westlichen Ländern verwendet wird, nutzen viele Kulturen völlig andere Kalendersysteme wie den islamischen Hijri-Kalender, den hebräischen Kalender oder den buddhistischen Kalender.

Um Benutzern die Auswahl ihres bevorzugten Kalenders zu ermöglichen, müssen Sie wissen, welche Kalendersysteme von der JavaScript-Umgebung unterstützt werden. Anstatt eine hartcodierte Liste zu pflegen, die veraltet wird oder nicht unterstützte Werte enthält, bietet JavaScript eine Methode, um verfügbare Kalendersysteme zur Laufzeit zu ermitteln.

Die Methode Intl.supportedValuesOf() mit dem Parameter "calendar" gibt ein Array aller Kalendersystem-Kennungen zurück, die von der aktuellen Umgebung unterstützt werden. Dies stellt sicher, dass Ihre Anwendung nur Kalenderoptionen anbietet, die korrekt funktionieren.

Was Kalendersysteme sind

Kalendersysteme sind verschiedene Methoden zur Organisation und Zählung von Zeit. Während alle Kalender Tage, Monate und Jahre verfolgen, verwenden sie unterschiedliche Regeln zur Berechnung des Jahresbeginns, der Monatslänge und zur Berücksichtigung astronomischer Zyklen.

Der gregorianische Kalender, eingeführt im Jahr 1582, ist der am weitesten verbreitete zivile Kalender. Er verwendet ein Sonnenjahr von ungefähr 365,25 Tagen, aufgeteilt in 12 Monate, mit Schaltjahren alle vier Jahre (mit Ausnahmen für Jahrhundertjahre).

Andere Kalendersysteme folgen unterschiedlichen Regeln. Der islamische Kalender ist rein lunar, wobei die Monate den Mondphasen folgen. Das bedeutet, dass das islamische Jahr etwa 11 Tage kürzer ist als ein Sonnenjahr, wodurch sich islamische Daten im Laufe der Zeit durch die Jahreszeiten verschieben. Der hebräische und der chinesische Kalender sind lunisolar und kombinieren Mondmonate mit Anpassungen, um den Kalender mit dem Sonnenjahr zu synchronisieren.

Wenn Sie Datumsangaben in JavaScript formatieren, bestimmt das Kalendersystem, welche Jahres-, Monats- und Tageszahlen angezeigt werden. Der gleiche Zeitpunkt hat in verschiedenen Kalendersystemen unterschiedliche Datumsdarstellungen.

Verwendung von Intl.supportedValuesOf zur Abfrage von Kalendersystemen

Die Methode Intl.supportedValuesOf() akzeptiert einen String-Parameter, der angibt, welche Art von Werten zurückgegeben werden soll. Um Kalendersysteme zu erhalten, übergeben Sie "calendar":

const calendars = Intl.supportedValuesOf("calendar");
console.log(calendars);
// Ausgabe: ["buddhist", "chinese", "coptic", "dangi", "ethioaa",
//          "ethiopic", "gregory", "hebrew", "indian", "islamic",
//          "islamic-civil", "islamic-rgsa", "islamic-tbla",
//          "islamic-umalqura", "iso8601", "japanese", "persian", "roc"]

Die Methode gibt ein Array von Strings zurück, die Kalender-Identifikatoren darstellen. Diese Identifikatoren folgen dem Unicode CLDR (Common Locale Data Repository) Standard, der eine konsistente Möglichkeit bietet, Kalendersysteme über verschiedene Plattformen und Programmiersprachen hinweg zu referenzieren.

Das zurückgegebene Array hat folgende Eigenschaften:

  • Die Werte sind in aufsteigender alphabetischer Reihenfolge sortiert
  • Doppelte Werte werden entfernt
  • Jeder Identifikator verwendet Kleinbuchstaben und Bindestriche
  • Die Liste enthält alle Kalendersysteme, die von der JavaScript-Implementierung unterstützt werden

Verschiedene Browser und JavaScript-Umgebungen unterstützen unterschiedliche Kalendersets, obwohl alle modernen Browser einen Kernsatz gängiger Kalender unterstützen.

Verständnis der Kalender-Identifikatoren

Jeder Kalender-Identifikator repräsentiert ein spezifisches Kalendersystem, das von einer oder mehreren Kulturen verwendet wird. Hier sind die gebräuchlichsten Identifikatoren:

Der Identifikator "gregory" repräsentiert den Gregorianischen Kalender, den standardmäßigen zivilen Kalender, der in den meisten Ländern verwendet wird. Dies ist der Kalender, den Sie im Alltag verwenden, wenn Sie in den Vereinigten Staaten, Europa oder den meisten anderen Teilen der Welt leben.

Der Identifikator "buddhist" repräsentiert den thailändischen buddhistischen Kalender, der die gleiche Monats- und Tagesstruktur wie der Gregorianische Kalender verwendet, aber die Jahre ab der Geburt Buddhas (543 v. Chr. im Gregorianischen Kalender) zählt. Das Jahr 2025 im Gregorianischen Kalender ist das Jahr 2568 im buddhistischen Kalender.

Der Identifikator "chinese" repräsentiert den traditionellen chinesischen Kalender, einen lunisolarischen Kalender, bei dem die Monate den Mondphasen folgen und die Jahre mit der Umlaufbahn des Jupiters übereinstimmen. Der chinesische Kalender wird verwendet, um traditionelle Feiertage wie das chinesische Neujahr zu bestimmen.

Der Identifikator "islamic" repräsentiert den islamischen Hijri-Kalender, einen rein lunaren Kalender mit 12 Monaten zu je 29 oder 30 Tagen. Die Jahre werden ab der Hidschra gezählt, als Muhammad im Jahr 622 n. Chr. von Mekka nach Medina auswanderte.

Der Identifikator "hebrew" repräsentiert den hebräischen Kalender, einen lunisolarischen Kalender, der für jüdische religiöse Feiertage verwendet wird. Er zählt die Jahre ab einem traditionellen Schöpfungsdatum (3761 v. Chr. im Gregorianischen Kalender).

Der Identifikator "japanese" repräsentiert den japanischen Kalender, der die gleiche Monats- und Tagesstruktur wie der Gregorianische Kalender verwendet, aber die Zeit in Epochen basierend auf dem regierenden Kaiser unterteilt. Die aktuelle Epoche ist Reiwa, die 2019 begann.

Der Identifikator "persian" repräsentiert den solaren Hijri-Kalender, der im Iran und in Afghanistan verwendet wird. Es ist ein Sonnenkalender mit Jahren, die ab der Hidschra gezählt werden, was ihn vom lunaren islamischen Kalender unterscheidet.

Weitere Identifikatoren sind "coptic" (koptisch-orthodoxer Kalender), "dangi" (traditioneller koreanischer Kalender), "ethiopic" (äthiopischer Kalender), "indian" (indischer Nationalkalender) und "roc" (Kalender der Republik China, der in Taiwan verwendet wird).

Einige Identifikatoren haben Varianten wie "islamic-civil", "islamic-rgsa", "islamic-tbla" und "islamic-umalqura", die verschiedene Berechnungsmethoden für den islamischen Kalender darstellen.

Der Identifikator "iso8601" repräsentiert den ISO 8601-Kalender, der im Wesentlichen der Gregorianische Kalender ist, aber immer den proleptischen Gregorianischen Kalender verwendet (Erweiterung des Gregorianischen Kalenders rückwärts vor seiner Einführung im Jahr 1582).

Kalendersysteme in Aktion sehen

Um zu verstehen, wie Kalendersysteme die Datumsformatierung beeinflussen, formatieren Sie dasselbe Datum mit verschiedenen Kalendern:

const date = new Date("2025-10-15");

const gregorian = new Intl.DateTimeFormat("en-US", {
  calendar: "gregory",
  year: "numeric",
  month: "long",
  day: "numeric"
});

const islamic = new Intl.DateTimeFormat("en-US", {
  calendar: "islamic",
  year: "numeric",
  month: "long",
  day: "numeric"
});

const hebrew = new Intl.DateTimeFormat("en-US", {
  calendar: "hebrew",
  year: "numeric",
  month: "long",
  day: "numeric"
});

const buddhist = new Intl.DateTimeFormat("en-US", {
  calendar: "buddhist",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(gregorian.format(date));
// Output: "October 15, 2025"

console.log(islamic.format(date));
// Output: "Rabi' II 16, 1447 AH"

console.log(hebrew.format(date));
// Output: "Tishrei 23, 5786"

console.log(buddhist.format(date));
// Output: "October 15, 2568 BE"

Das gleiche JavaScript Date-Objekt repräsentiert denselben Zeitpunkt, aber jedes Kalendersystem drückt diesen Moment mit unterschiedlichen Jahres-, Monats- und Tageswerten aus. Das gregorianische Datum 15. Oktober 2025 entspricht dem 16. Rabi' II 1447 im islamischen Kalender, dem 23. Tishrei 5786 im hebräischen Kalender und dem 15. Oktober 2568 im buddhistischen Kalender.

Dies zeigt, warum Sie bei der Formatierung von Daten für Benutzer, die unterschiedlichen Kalendern folgen, angeben müssen, welches Kalendersystem verwendet werden soll.

Erstellen eines Kalenderauswahlmenüs

Beim Erstellen von Benutzeroberflächen, die Benutzern die Auswahl ihres bevorzugten Kalenders ermöglichen, fragen Sie die verfügbaren Kalender ab und erstellen Sie dynamisch ein Auswahlmenü:

function buildCalendarSelector() {
  const calendars = Intl.supportedValuesOf("calendar");
  const select = document.createElement("select");
  select.id = "calendar-selector";

  calendars.forEach(calendar => {
    const option = document.createElement("option");
    option.value = calendar;
    option.textContent = calendar;
    select.appendChild(option);
  });

  return select;
}

const selector = buildCalendarSelector();
document.body.appendChild(selector);

Dies erstellt ein Dropdown-Menü mit allen unterstützten Kalendern. Allerdings sind die technischen Bezeichner wie "gregory" und "islamic" nicht benutzerfreundlich. Benutzer müssen beschreibende Namen in ihrer eigenen Sprache sehen.

Anzeigen von benutzerfreundlichen Kalendernamen

Die Intl.DisplayNames-API konvertiert Kalenderbezeichner in benutzerfreundliche Namen. Verwenden Sie sie, um einen besseren Kalenderauswahldialog zu erstellen:

function buildCalendarSelector(locale = "en-US") {
  const calendars = Intl.supportedValuesOf("calendar");
  const displayNames = new Intl.DisplayNames([locale], { type: "calendar" });

  const select = document.createElement("select");
  select.id = "calendar-selector";

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

  return select;
}

const selector = buildCalendarSelector("en-US");
document.body.appendChild(selector);

Jetzt zeigt das Dropdown-Menü Namen wie "Gregorian Calendar", "Islamic Calendar" und "Hebrew Calendar" anstelle von technischen Bezeichnern an.

Sie können Kalendernamen in verschiedenen Sprachen anzeigen, indem Sie das Gebietsschema ändern:

const calendars = ["gregory", "islamic", "hebrew", "buddhist", "chinese"];

const englishNames = new Intl.DisplayNames(["en-US"], { type: "calendar" });
const frenchNames = new Intl.DisplayNames(["fr-FR"], { type: "calendar" });
const arabicNames = new Intl.DisplayNames(["ar-SA"], { type: "calendar" });

calendars.forEach(calendar => {
  console.log(`${calendar}:`);
  console.log(`  English: ${englishNames.of(calendar)}`);
  console.log(`  French: ${frenchNames.of(calendar)}`);
  console.log(`  Arabic: ${arabicNames.of(calendar)}`);
});

// Output:
// gregory:
//   English: Gregorian Calendar
//   French: calendrier grégorien
//   Arabic: التقويم الميلادي
// islamic:
//   English: Islamic Calendar
//   French: calendrier musulman
//   Arabic: التقويم الهجري
// ...

Dies ermöglicht es Benutzern, Kalendernamen in ihrer bevorzugten Sprache zu sehen.

Überprüfen, ob ein bestimmter Kalender unterstützt wird

Bevor Sie einen Kalender in Ihrer Anwendung verwenden, überprüfen Sie, ob die JavaScript-Umgebung diesen unterstützt. Dies verhindert Laufzeitfehler und ermöglicht die Implementierung von Fallback-Verhalten:

function isCalendarSupported(calendar) {
  const supported = Intl.supportedValuesOf("calendar");
  return supported.includes(calendar);
}

if (isCalendarSupported("islamic")) {
  const formatter = new Intl.DateTimeFormat("en-US", {
    calendar: "islamic",
    year: "numeric",
    month: "long",
    day: "numeric"
  });
  console.log(formatter.format(new Date()));
} else {
  console.log("Islamic calendar is not supported");
}

Dieses Muster funktioniert für jeden Kalenderbezeichner. Sie können es verwenden, um Kalenderoptionen in Ihrer Benutzeroberfläche anzuzeigen oder auszublenden, oder um auf einen Standardkalender zurückzugreifen, wenn der bevorzugte nicht verfügbar ist.

Erstellen einer wiederverwendbaren Funktion zur Funktionserkennung

Erstellen Sie eine generische Funktion, um die Kalenderunterstützung zu überprüfen und fehlende Kalender elegant zu behandeln:

function getCalendarOrFallback(preferredCalendar, fallbackCalendar = "gregory") {
  const supported = Intl.supportedValuesOf("calendar");

  if (supported.includes(preferredCalendar)) {
    return preferredCalendar;
  }

  if (supported.includes(fallbackCalendar)) {
    return fallbackCalendar;
  }

  return supported[0];
}

const calendar = getCalendarOrFallback("islamic", "gregory");
const formatter = new Intl.DateTimeFormat("en-US", {
  calendar,
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(formatter.format(new Date()));

Diese Funktion versucht, den bevorzugten Kalender zu verwenden, greift auf den angegebenen Fallback-Kalender zurück, wenn der bevorzugte nicht verfügbar ist, und gibt schließlich den ersten verfügbaren Kalender zurück, wenn beide nicht unterstützt werden.

Filtern von Kalendern für Ihre Anwendung

Die meisten Anwendungen müssen nicht jedes Kalendersystem unterstützen. Filtern Sie die Liste, um nur die für Ihre Benutzer relevanten Kalender einzuschließen:

function getRelevantCalendars(allowedCalendars) {
  const supported = Intl.supportedValuesOf("calendar");
  return allowedCalendars.filter(calendar => supported.includes(calendar));
}

const allowedCalendars = ["gregory", "islamic", "hebrew", "buddhist"];
const availableCalendars = getRelevantCalendars(allowedCalendars);

console.log(availableCalendars);
// Output: ["gregory", "islamic", "hebrew", "buddhist"]
// (unter der Annahme, dass alle in der aktuellen Umgebung unterstützt werden)

Dies stellt sicher, dass Sie nur Kalender anbieten, die sowohl Ihren Anforderungen entsprechen als auch im Browser des Benutzers funktionieren.

Sie können dies mit der Kalenderauswahl kombinieren, um eine fokussierte Benutzeroberfläche zu erstellen:

function buildFilteredCalendarSelector(allowedCalendars, locale = "en-US") {
  const supported = Intl.supportedValuesOf("calendar");
  const available = allowedCalendars.filter(cal => supported.includes(cal));
  const displayNames = new Intl.DisplayNames([locale], { type: "calendar" });

  const select = document.createElement("select");

  available.forEach(calendar => {
    const option = document.createElement("option");
    option.value = calendar;
    option.textContent = displayNames.of(calendar);
    select.appendChild(option);
  });

  return select;
}

const selector = buildFilteredCalendarSelector(
  ["gregory", "islamic", "hebrew", "buddhist"],
  "en-US"
);
document.body.appendChild(selector);

Dies erstellt einen Selektor, der nur die Kalender anzeigt, die Sie unterstützen möchten, mit menschenlesbaren Namen, und garantiert in der aktuellen Umgebung funktioniert.

Kalender nach Kategorien gruppieren

Für Anwendungen, die viele Kalender unterstützen, gruppieren Sie diese nach Typ oder Region, um die Benutzerfreundlichkeit zu verbessern:

function groupCalendars() {
  const calendars = Intl.supportedValuesOf("calendar");

  const groups = {
    solar: ["gregory", "iso8601", "persian", "ethiopic", "coptic"],
    lunar: ["islamic", "islamic-civil", "islamic-rgsa", "islamic-tbla", "islamic-umalqura"],
    lunisolar: ["hebrew", "chinese", "dangi"],
    erasBased: ["japanese", "roc", "buddhist"],
    other: []
  };

  const grouped = {
    solar: [],
    lunar: [],
    lunisolar: [],
    erasBased: [],
    other: []
  };

  calendars.forEach(calendar => {
    let placed = false;

    for (const [group, members] of Object.entries(groups)) {
      if (members.includes(calendar)) {
        grouped[group].push(calendar);
        placed = true;
        break;
      }
    }

    if (!placed) {
      grouped.other.push(calendar);
    }
  });

  return grouped;
}

const grouped = groupCalendars();
console.log(grouped);
// Output:
// {
//   solar: ["gregory", "iso8601", "persian", "ethiopic", "coptic"],
//   lunar: ["islamic", "islamic-civil", "islamic-rgsa", ...],
//   lunisolar: ["hebrew", "chinese", "dangi"],
//   erasBased: ["japanese", "roc", "buddhist"],
//   other: ["ethioaa", "indian"]
// }

Diese Organisation hilft Benutzern, die Eigenschaften verschiedener Kalendersysteme zu verstehen und den benötigten Kalender zu finden.

Umgang mit nicht unterstützten Umgebungen

Die Methode Intl.supportedValuesOf() wurde 2022 zu JavaScript hinzugefügt. Ältere Browser unterstützen sie nicht. Überprüfen Sie, ob die Methode existiert, bevor Sie sie verwenden:

function getCalendars() {
  if (typeof Intl.supportedValuesOf === "function") {
    return Intl.supportedValuesOf("calendar");
  }

  return ["gregory"];
}

const calendars = getCalendars();
console.log(calendars);

Dies gibt die vollständige Liste der unterstützten Kalender in modernen Browsern zurück und fällt in älteren Umgebungen auf den gregorianischen Kalender zurück.

Für eine bessere Abwärtskompatibilität stellen Sie eine umfassendere Fallback-Liste bereit:

function getCalendars() {
  if (typeof Intl.supportedValuesOf === "function") {
    return Intl.supportedValuesOf("calendar");
  }

  return [
    "buddhist",
    "chinese",
    "coptic",
    "ethiopic",
    "gregory",
    "hebrew",
    "indian",
    "islamic",
    "japanese",
    "persian",
    "roc"
  ];
}

Dies bietet eine angemessene Auswahl an Kalendern für ältere Browser, obwohl Sie nicht garantieren können, dass alle in jeder Umgebung funktionieren.

Den Unterschied zwischen Kalender und Locale verstehen

Kalender und Locale sind verwandte, aber separate Konzepte. Die Locale bestimmt die Sprache und regionale Formatierungskonventionen, während der Kalender festlegt, welches Kalendersystem verwendet werden soll.

Eine einzelne Locale kann mehrere Kalender verwenden. Zum Beispiel nutzen arabische Sprecher in Saudi-Arabien typischerweise den islamischen Kalender für religiöse Zwecke und den gregorianischen Kalender für zivile Angelegenheiten. Sie können Daten auf Arabisch mit beiden Kalendern formatieren:

const date = new Date("2025-10-15");

const arabicGregorian = new Intl.DateTimeFormat("ar-SA", {
  calendar: "gregory",
  year: "numeric",
  month: "long",
  day: "numeric"
});

const arabicIslamic = new Intl.DateTimeFormat("ar-SA", {
  calendar: "islamic",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(arabicGregorian.format(date));
// Output: "١٥ أكتوبر ٢٠٢٥"

console.log(arabicIslamic.format(date));
// Output: "١٦ ربيع الآخر ١٤٤٧ هـ"

Beide verwenden arabischen Text und Nummerierung, zeigen aber unterschiedliche Daten gemäß ihrer jeweiligen Kalender an.

Umgekehrt können Sie denselben Kalender in verschiedenen Sprachen formatieren:

const date = new Date("2025-10-15");

const englishIslamic = new Intl.DateTimeFormat("en-US", {
  calendar: "islamic",
  year: "numeric",
  month: "long",
  day: "numeric"
});

const arabicIslamic = new Intl.DateTimeFormat("ar-SA", {
  calendar: "islamic",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(englishIslamic.format(date));
// Output: "Rabi' II 16, 1447 AH"

console.log(arabicIslamic.format(date));
// Output: "١٦ ربيع الآخر ١٤٤٧ هـ"

Beide zeigen das islamische Datum an, verwenden aber unterschiedliche Sprachen und Zahlensysteme.

Wann verfügbare Kalender abgefragt werden sollten

Fragen Sie verfügbare Kalender in diesen Situationen ab:

Bei der Erstellung einer Kalenderauswahl-Schnittstelle rufen Sie Intl.supportedValuesOf("calendar") auf, um die Optionen zu füllen. Dies stellt sicher, dass Sie nur Kalender anzeigen, die in der aktuellen Umgebung funktionieren.

Bei der Implementierung kalenderbasierter Funktionen überprüfen Sie, ob der erforderliche Kalender unterstützt wird, bevor Sie ihn verwenden. Dies verhindert Fehler und ermöglicht einen eleganten Fallback auf alternative Kalender.

Bei der Speicherung von Benutzereinstellungen validieren Sie Kalenderauswahlen anhand der unterstützten Liste. Dies stellt sicher, dass gespeicherte Einstellungen auf verschiedenen Geräten und Browsern gültig bleiben.

Bei der Migration zwischen Umgebungen überprüfen Sie die Kalenderunterstützung sowohl in der Quell- als auch in der Zielumgebung. Die Kalenderunterstützung kann zwischen Browser-Versionen, Node.js-Versionen und verschiedenen JavaScript-Laufzeitumgebungen variieren.

Beim Laden kalenderabhängiger Daten überprüfen Sie, ob der Kalender verfügbar ist, bevor Sie versuchen, Daten zu analysieren oder zu formatieren. Dies verhindert Laufzeitfehler bei der Arbeit mit Daten in bestimmten Kalendersystemen.