¿Cómo se muestran los nombres de calendarios como gregoriano, hebreo e islámico?

Introducción

Diferentes culturas y religiones utilizan distintos sistemas de calendario para rastrear fechas y organizar el tiempo. Aunque el calendario gregoriano es común en muchas partes del mundo, otros sistemas de calendario se utilizan para observancias religiosas, eventos culturales y la vida diaria. El calendario hebreo se usa en Israel y por comunidades judías en todo el mundo. El calendario islámico guía las prácticas religiosas musulmanas. El calendario budista se utiliza en Tailandia y otros países del sudeste asiático.

Las aplicaciones que sirven a audiencias internacionales necesitan permitir que los usuarios elijan su sistema de calendario preferido. Los selectores de fecha, interfaces de configuración y herramientas de programación muestran nombres de calendario para que los usuarios puedan seleccionar el sistema que coincida con sus necesidades. En lugar de mostrar códigos crípticos como "gregory" o "islamic-umalqura", las aplicaciones muestran nombres legibles como "calendario gregoriano" o "calendario Umm al-Qura".

La API Intl.DisplayNames de JavaScript convierte códigos de sistemas de calendario en nombres legibles. Esta API maneja las traducciones automáticamente, mostrando nombres de calendario en el idioma del usuario sin requerir archivos de traducción manuales.

Qué son los códigos de calendario

Los códigos de calendario son identificadores de cadena cortos que representan diferentes sistemas de calendario. JavaScript utiliza estos códigos estandarizados internamente para identificar calendarios.

Los códigos de calendario comunes incluyen:

gregory para el calendario gregoriano
hebrew para el calendario hebreo
islamic para el calendario islámico
buddhist para el calendario budista
chinese para el calendario chino
japanese para el calendario japonés

Estos códigos siguen la especificación de identificador de configuración regional Unicode. Siempre están en minúsculas y usan guiones para separar palabras cuando es necesario, como islamic-umalqura o islamic-civil.

Cómo funciona Intl.DisplayNames con calendarios

El constructor Intl.DisplayNames crea un objeto que traduce códigos en texto legible. Especificas una configuración regional para el idioma de salida y un tipo para la clase de códigos que deseas traducir.

Para mostrar nombres de calendario, pasas "calendar" como tipo:

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

El primer argumento es el código de configuración regional como 'en' para inglés o 'fr' para francés. El segundo argumento es un objeto de opciones donde estableces type: 'calendar'.

Una vez que tienes un objeto DisplayNames, usas su método of() para convertir códigos de calendario en nombres:

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

Mostrar nombres de calendario en inglés

Así es como muestras los nombres de los calendarios gregoriano, hebreo e islámico en inglés:

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"

Puedes mostrar cualquier calendario compatible pasando su código al método of():

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"

El calendario islámico tiene múltiples variantes para diferentes métodos de cálculo:

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"

Obtener todos los sistemas de calendario disponibles

JavaScript proporciona 17 sistemas de calendario. Puedes obtener la lista completa programáticamente usando Intl.supportedValuesOf():

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

Esto devuelve un array de todos los códigos de calendario compatibles:

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

Puedes iterar a través de este array para mostrar todos los nombres de calendario:

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

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

Esto imprime:

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

Localizar nombres de calendario en diferentes idiomas

Los nombres de calendario aparecen en el idioma que especificas en el parámetro de configuración regional. Esto te permite mostrar nombres de calendario a los usuarios en su idioma preferido.

Mostrar nombres de calendarios en árabe:

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

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

Mostrar nombres de calendarios en francés:

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"

Mostrar nombres de calendarios en hebreo:

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

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

Mostrar nombres de calendarios en chino:

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

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

El navegador maneja todas las traducciones automáticamente. No necesitas archivos de traducción ni gestión manual de cadenas.

Crear un menú desplegable de selección de calendario

Así es como creas un menú desplegable que permite a los usuarios seleccionar un sistema de calendario:

<!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>

Este código hace lo siguiente:

Obtiene la configuración regional del navegador del usuario con navigator.language
Crea un objeto DisplayNames con la configuración regional del usuario
Recupera todos los códigos de calendario disponibles
Crea un elemento de opción para cada calendario
Establece el texto de la opción con el nombre localizado del calendario
Añade un event listener para manejar la selección del calendario

El menú desplegable muestra automáticamente los nombres de los calendarios en el idioma del usuario. Un usuario con un navegador en árabe ve los nombres de los calendarios en árabe. Un usuario con un navegador en francés ve los nombres de los calendarios en francés.

Cuándo usar la visualización de nombres de calendario

Muestra los nombres de los calendarios en estas situaciones:

Páginas de configuración donde los usuarios eligen su sistema de calendario preferido
Componentes de selector de fechas que admiten múltiples sistemas de calendario
Formularios de creación de eventos donde los usuarios especifican qué calendario usar
Páginas de perfil de usuario donde se almacena la preferencia de calendario
Aplicaciones de programación que funcionan con diferentes sistemas de calendario
Aplicaciones religiosas o culturales que hacen referencia a calendarios específicos

La visualización de nombres de calendario hace que tu aplicación sea accesible para usuarios que trabajan con sistemas de calendario no gregorianos. Elimina la ambigüedad sobre qué sistema de calendario utiliza la aplicación para fechas y eventos.

La API Intl.DisplayNames con type: 'calendar' te proporciona acceso instantáneo a nombres de calendarios localizados sin necesidad de mantener archivos de traducción ni metadatos de sistemas de calendario.