Comment afficher les noms de calendriers comme grégorien, hébraïque, islamique ?

Introduction

Différentes cultures et religions utilisent différents systèmes de calendrier pour suivre les dates et organiser le temps. Bien que le calendrier grégorien soit courant dans de nombreuses régions du monde, d'autres systèmes de calendrier sont utilisés pour les observances religieuses, les événements culturels et la vie quotidienne. Le calendrier hébraïque est utilisé en Israël et par les communautés juives du monde entier. Le calendrier islamique guide les pratiques religieuses musulmanes. Le calendrier bouddhiste est utilisé en Thaïlande et dans d'autres pays d'Asie du Sud-Est.

Les applications qui servent des publics internationaux doivent permettre aux utilisateurs de choisir leur système de calendrier préféré. Les sélecteurs de date, les interfaces de paramètres et les outils de planification affichent les noms de calendrier afin que les utilisateurs puissent sélectionner le système qui correspond à leurs besoins. Au lieu d'afficher des codes cryptiques comme "gregory" ou "islamic-umalqura", les applications affichent des noms lisibles comme "calendrier grégorien" ou "calendrier Umm al-Qura".

L'API Intl.DisplayNames de JavaScript convertit les codes de système de calendrier en noms lisibles par l'homme. Cette API gère les traductions automatiquement, affichant les noms de calendrier dans la langue de l'utilisateur sans nécessiter de fichiers de traduction manuels.

Que sont les codes de calendrier

Les codes de calendrier sont de courts identifiants de chaîne qui représentent différents systèmes de calendrier. JavaScript utilise ces codes standardisés en interne pour identifier les calendriers.

Les codes de calendrier courants incluent :

gregory pour le calendrier grégorien
hebrew pour le calendrier hébraïque
islamic pour le calendrier islamique
buddhist pour le calendrier bouddhiste
chinese pour le calendrier chinois
japanese pour le calendrier japonais

Ces codes suivent la spécification d'identifiant de locale Unicode. Ils sont toujours en minuscules et utilisent des traits d'union pour séparer les mots si nécessaire, comme islamic-umalqura ou islamic-civil.

Comment Intl.DisplayNames fonctionne avec les calendriers

Le constructeur Intl.DisplayNames crée un objet qui traduit les codes en texte lisible. Vous spécifiez une locale pour la langue de sortie et un type pour le genre de codes que vous souhaitez traduire.

Pour afficher les noms de calendriers, vous passez "calendar" comme type :

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

Le premier argument est le code de locale comme 'en' pour l'anglais ou 'fr' pour le français. Le second argument est un objet d'options où vous définissez type: 'calendar'.

Une fois que vous avez un objet DisplayNames, vous utilisez sa méthode of() pour convertir les codes de calendriers en noms :

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

Afficher les noms de calendriers en anglais

Voici comment afficher les noms des calendriers grégorien, hébraïque et islamique en anglais :

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"

Vous pouvez afficher n'importe quel calendrier pris en charge en passant son code à la méthode 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"

Le calendrier islamique possède plusieurs variantes pour différentes méthodes de calcul :

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"

Obtenir tous les systèmes de calendriers disponibles

JavaScript fournit 17 systèmes de calendriers. Vous pouvez obtenir la liste complète de manière programmatique en utilisant Intl.supportedValuesOf() :

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

Cela renvoie un tableau de tous les codes de calendriers pris en charge :

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

Vous pouvez parcourir ce tableau pour afficher tous les noms de calendriers :

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

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

Cela affiche :

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

Localiser les noms de calendriers dans différentes langues

Les noms de calendrier apparaissent dans la langue que vous spécifiez dans le paramètre locale. Cela vous permet d'afficher les noms de calendrier aux utilisateurs dans leur langue préférée.

Afficher les noms de calendrier en arabe :

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

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

Afficher les noms de calendrier en français :

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"

Afficher les noms de calendrier en hébreu :

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

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

Afficher les noms de calendrier en chinois :

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

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

Le navigateur gère toutes les traductions automatiquement. Vous n'avez pas besoin de fichiers de traduction ni de gestion manuelle des chaînes de caractères.

Voici comment créer un menu déroulant qui permet aux utilisateurs de sélectionner un système de calendrier :

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

Ce code effectue les opérations suivantes :

Récupère la locale du navigateur de l'utilisateur avec navigator.language
Crée un objet DisplayNames avec la locale de l'utilisateur
Récupère tous les codes de calendrier disponibles
Crée un élément option pour chaque calendrier
Définit le texte de l'option sur le nom de calendrier localisé
Ajoute un écouteur d'événement pour gérer la sélection du calendrier

Le menu déroulant affiche automatiquement les noms de calendrier dans la langue de l'utilisateur. Un utilisateur avec un navigateur en arabe voit les noms de calendrier en arabe. Un utilisateur avec un navigateur en français voit les noms de calendrier en français.

Quand utiliser l'affichage des noms de calendrier

Affichez les noms de calendrier dans ces situations :

Pages de paramètres où les utilisateurs choisissent leur système de calendrier préféré
Composants de sélection de date qui prennent en charge plusieurs systèmes de calendrier
Formulaires de création d'événements où les utilisateurs spécifient le calendrier à utiliser
Pages de profil utilisateur où la préférence de calendrier est stockée
Applications de planification qui fonctionnent avec différents systèmes de calendrier
Applications religieuses ou culturelles qui font référence à des calendriers spécifiques

L'affichage du nom de calendrier rend votre application accessible aux utilisateurs qui travaillent avec des systèmes de calendrier non grégoriens. Cela élimine toute ambiguïté quant au système de calendrier utilisé par l'application pour les dates et les événements.

L'API Intl.DisplayNames avec type: 'calendar' vous donne un accès instantané aux noms de calendriers localisés sans avoir à maintenir de fichiers de traduction ou de métadonnées de systèmes de calendrier.