Liste der verfügbaren Kalendersysteme abrufen

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

Einführung

Beim Erstellen von Anwendungen für ein globales Publikum müssen Benutzer Daten häufig in ihrem bevorzugten Kalendersystem anzeigen. Während Sie möglicherweise mit dem gregorianischen Kalender vertraut sind, der in den meisten westlichen Ländern verwendet wird, verwenden viele Kulturen völlig andere Kalendersysteme wie den islamischen Hijri-Kalender, den hebräischen Kalender oder den buddhistischen Kalender.

Damit Benutzer ihr bevorzugtes Kalendersystem auswählen können, müssen Sie wissen, welche Kalendersysteme die JavaScript-Umgebung unterstützt. Anstatt eine fest codierte Liste zu pflegen, die veraltet ist oder nicht unterstützte Werte enthält, bietet JavaScript eine Methode, um verfügbare Kalendersysteme zur Laufzeit zu ermitteln.

Die Intl.supportedValuesOf()-Methode mit dem "calendar"-Parameter gibt ein Array aller von der aktuellen Umgebung unterstützten Kalendersystem-Identifikatoren zurück. Dadurch wird sichergestellt, dass Ihre Anwendung nur Kalenderoptionen anbietet, die korrekt funktionieren.

Was Kalendersysteme sind

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

Der gregorianische Kalender, der 1582 eingeführt wurde, ist der am weitesten verbreitete bürgerliche Kalender. Er verwendet ein Sonnenjahr von etwa 365,25 Tagen, das in 12 Monate unterteilt ist, wobei alle vier Jahre Schaltjahre hinzugefügt werden (mit Ausnahmen für Jahrhundertjahre).

Andere Kalendersysteme folgen unterschiedlichen Regeln. Der islamische Kalender ist rein lunar, wobei die Monate den Mondphasen folgen. Dies 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. Die hebräischen und chinesischen Kalender sind lunisolarer Natur 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. Derselbe Zeitpunkt hat in verschiedenen Kalendersystemen unterschiedliche Datumsdarstellungen.

Verwendung von Intl.supportedValuesOf zum Abrufen von Kalendersystemen

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

const calendars = Intl.supportedValuesOf("calendar");
console.log(calendars);
// Output: ["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 Kalenderbezeichner darstellen. Diese Bezeichner 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 weist folgende Eigenschaften auf:

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

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

Verständnis von Kalenderbezeichnern

Jeder Kalenderbezeichner repräsentiert ein spezifisches Kalendersystem, das von einer oder mehreren Kulturen verwendet wird. Hier sind die gängigsten Bezeichner:

Der Bezeichner "gregory" repräsentiert den gregorianischen Kalender, den in den meisten Ländern verwendeten bürgerlichen Standardkalender. 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 Bezeichner "buddhist" repräsentiert den thailändischen buddhistischen Kalender, der dieselbe 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.

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

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

Die Kennung "hebrew" repräsentiert den hebräischen Kalender, einen lunisolaren Kalender, der für jüdische religiöse Feiern verwendet wird. Er zählt die Jahre ab einem traditionellen Schöpfungsdatum (3761 v. Chr. im gregorianischen Kalender).

Die Kennung "japanese" repräsentiert den japanischen Kalender, der dieselbe Monats- und Tagesstruktur wie der gregorianische Kalender verwendet, die Zeit jedoch in Epochen basierend auf dem regierenden Kaiser unterteilt. Die aktuelle Epoche ist Reiwa, die 2019 begann.

Die Kennung "persian" repräsentiert den solaren Hijri-Kalender, der im Iran und in Afghanistan verwendet wird. Es handelt sich um einen Sonnenkalender, dessen Jahre ab der Hidschra gezählt werden, was ihn vom lunaren islamischen Kalender unterscheidet.

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

Einige Kennungen haben Varianten wie "islamic-civil", "islamic-rgsa", "islamic-tbla" und "islamic-umalqura", die verschiedene Berechnungsmethoden für den islamischen Kalender repräsentieren.

Die Kennung "iso8601" repräsentiert den ISO-8601-Kalender, der im Wesentlichen der gregorianische Kalender ist, jedoch immer den proleptischen gregorianischen Kalender verwendet (der den gregorianischen Kalender rückwärts vor seiner Einführung im Jahr 1582 erweitert).

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"

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

Dies zeigt, warum Sie angeben müssen, welches Kalendersystem verwendet werden soll, wenn Sie Daten für Benutzer formatieren, die unterschiedlichen Kalendern folgen.

Einen Kalenderselektor erstellen

Wenn Sie Benutzeroberflächen erstellen, die es Benutzern ermöglichen, ihren bevorzugten Kalender auszuwählen, fragen Sie die verfügbaren Kalender ab und erstellen Sie dynamisch einen Selektor:

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. Die technischen Bezeichner wie "gregory" und "islamic" sind jedoch nicht benutzerfreundlich. Benutzer müssen beschreibende Namen in ihrer eigenen Sprache sehen.

Lesbare Kalendernamen anzeigen

Die Intl.DisplayNames API konvertiert Kalenderbezeichner in lesbare Namen. Verwenden Sie sie, um einen besseren Kalenderselektor 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 "Gregorianischer Kalender", "Islamischer Kalender" und "Hebräischer Kalender" anstelle von technischen Bezeichnern.

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.

Prüfen, ob ein bestimmter Kalender unterstützt wird

Bevor Sie einen Kalender in Ihrer Anwendung verwenden, prüfen Sie, ob die JavaScript-Umgebung ihn unterstützt. Dies verhindert Laufzeitfehler und ermöglicht es Ihnen, Fallback-Verhalten zu implementieren:

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 jede Kalenderkennung. Sie können es verwenden, um Kalenderoptionen in Ihrer Benutzeroberfläche anzuzeigen oder auszublenden oder 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 prü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 letztendlich 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"]
// (assuming all are supported in the current environment)

Dies stellt sicher, dass Sie nur Kalender anbieten, die sowohl Ihre Anforderungen erfüllen 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 lesbaren Namen, die garantiert in der aktuellen Umgebung funktionieren.

Gruppieren von Kalendern nach Kategorie

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 zu finden.

Umgang mit nicht unterstützten Umgebungen

Die Methode Intl.supportedValuesOf() wurde 2022 zu JavaScript hinzugefügt. Ältere Browser unterstützen sie nicht. Prü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 bessere Abwärtskompatibilität sollten Sie eine vollständigere Fallback-Liste bereitstellen:

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 sinnvolle 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 regionalen Formatierungskonventionen, während der Kalender bestimmt, welches Kalendersystem verwendet wird.

Eine einzelne Locale kann mehrere Kalender verwenden. Beispielsweise verwenden arabischsprachige Personen in Saudi-Arabien typischerweise den islamischen Kalender für religiöse Zwecke und den gregorianischen Kalender für zivile Zwecke. 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 arabische Zahlen, zeigen aber unterschiedliche Daten entsprechend 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, verwenden aber unterschiedliche Sprachen und Zahlensysteme.

Wann verfügbare Kalender abgefragt werden sollten

Fragen Sie verfügbare Kalender in diesen Situationen ab:

Beim Erstellen einer Kalenderauswahl-Oberfläche rufen Sie Intl.supportedValuesOf("calendar") auf, um die Optionen zu befüllen. Dies stellt sicher, dass Sie nur Kalender anzeigen, die in der aktuellen Umgebung funktionieren.

Bei der Implementierung kalenderbasierter Features prü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.

Beim Speichern von Benutzerpräferenzen validieren Sie Kalenderauswahlen gegen die Liste der unterstützten Kalender. Dies stellt sicher, dass gespeicherte Präferenzen über verschiedene Geräte und Browser hinweg gültig bleiben.

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

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