Как отображать названия календарей, например григорианский, еврейский, исламский?

Используйте API Intl.DisplayNames в JavaScript, чтобы показывать понятные человеку названия календарных систем на любом языке

Введение

В разных культурах и религиях используются разные календарные системы для отслеживания дат и организации времени. Хотя григорианский календарь распространён во многих странах мира, другие календари применяются для религиозных обрядов, культурных событий и в повседневной жизни. Еврейский календарь используется в Израиле и еврейских общинах по всему миру. Исламский календарь определяет религиозные практики мусульман. Буддийский календарь применяется в Таиланде и других странах Юго-Восточной Азии.

Приложения для международной аудитории должны позволять пользователям выбирать предпочитаемую календарную систему. В календарях, настройках и инструментах планирования отображаются названия календарей, чтобы пользователь мог выбрать подходящий вариант. Вместо непонятных кодов вроде "gregory" или "islamic-umalqura" приложения показывают читаемые названия, например "Григорианский календарь" или "Календарь Умм аль-Кура".

API Intl.DisplayNames в JavaScript преобразует коды календарных систем в понятные человеку названия. Этот API автоматически обрабатывает переводы и показывает названия календарей на языке пользователя без необходимости ручных переводов.

Что такое коды календарей

Коды календарей — это короткие строковые идентификаторы, которые обозначают разные календарные системы. Внутри JavaScript эти стандартизированные коды используются для идентификации календарей.

К распространённым кодам календарей относятся:

  • gregory — для григорианского календаря
  • hebrew — для еврейского календаря
  • islamic — для исламского календаря
  • buddhist — для буддийского календаря
  • chinese — для китайского календаря
  • japanese — для японского календаря

Эти коды соответствуют спецификации идентификаторов локалей Unicode. Они всегда пишутся строчными буквами и используют дефисы для разделения слов, если это необходимо, например, islamic-umalqura или islamic-civil.

Как Intl.DisplayNames работает с календарями

Конструктор Intl.DisplayNames создаёт объект, который преобразует коды в читаемый текст. Вы указываете локаль для языка вывода и тип кодов, которые хотите переводить.

Чтобы отобразить названия календарей, передайте "calendar" в качестве типа:

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

Первый аргумент — это код локали, например 'en' для английского или 'fr' для французского. Второй аргумент — объект с опциями, где вы задаёте type: 'calendar'.

Когда у вас есть объект DisplayNames, используйте его метод of(), чтобы преобразовать коды календарей в их названия:

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

Отображение названий календарей на английском

Вот как вывести названия григорианского, еврейского и исламского календарей на английском языке:

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"

Вы можете отобразить любой поддерживаемый календарь, передав его код в метод 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"

У исламского календаря есть несколько вариантов для разных методов вычисления:

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"

Получить все доступные системы календарей

JavaScript поддерживает 17 систем календарей. Получить полный список можно программно с помощью Intl.supportedValuesOf():

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

Это возвращает массив всех поддерживаемых кодов календарей:

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

Вы можете пройтись по этому массиву, чтобы вывести все названия календарей:

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

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

В результате будет выведено:

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

Локализация названий календарей на разных языках

Названия календарей отображаются на языке, который вы указываете в параметре locale. Это позволяет показывать пользователям названия календарей на их предпочитаемом языке.

Показать названия календарей на арабском:

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

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

Показать названия календарей на французском:

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"

Показать названия календарей на иврите:

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

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

Показать названия календарей на китайском:

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

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

Браузер автоматически обрабатывает все переводы. Вам не нужны файлы переводов или ручное управление строками.

Как создать выпадающий список выбора календаря

Вот как создать выпадающее меню, позволяющее пользователям выбрать систему календаря:

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

Этот код делает следующее:

  1. Получает локаль браузера пользователя с помощью navigator.language
  2. Создаёт объект DisplayNames с локалью пользователя
  3. Получает все доступные коды календарей
  4. Создаёт элемент option для каждого календаря
  5. Устанавливает текст опции как локализованное название календаря
  6. Добавляет обработчик событий для выбора календаря

Выпадающий список автоматически показывает названия календарей на языке пользователя. Если у пользователя браузер на арабском, он увидит названия календарей на арабском. Если браузер на французском — на французском.

Когда использовать отображение названий календарей

Показывайте названия календарей в следующих случаях:

  • На страницах настроек, где пользователь выбирает предпочитаемую систему календаря
  • В компонентах выбора даты, поддерживающих несколько календарей
  • В формах создания событий, где указывается, какой календарь использовать
  • На страницах профиля пользователя, где хранится предпочтение календаря
  • В приложениях для планирования, работающих с разными календарями
  • В религиозных или культурных приложениях, где используются определённые календари

Отображение названия календаря делает ваше приложение доступным для пользователей, которые работают с некалендарными системами, отличными от григорианской. Это устраняет неоднозначность в отношении того, какая система календаря используется для дат и событий.

API Intl.DisplayNames с type: 'calendar' позволяет мгновенно получать локализованные названия календарей без необходимости поддерживать файлы переводов или метаданные календарных систем.