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

Используйте 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('ru', { type: 'calendar' });

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

После создания объекта DisplayNames вы можете использовать его метод of() для преобразования кодов календарей в названия:

const calendarName = displayNames.of('gregory');
console.log(calendarName); // "Григорианский календарь"

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

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

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

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

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

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

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>Выбор календаря</title>
</head>
<body>
  <label for="calendar-select">Выберите календарь:</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('Выбранный календарь:', event.target.value);
    });
  </script>
</body>
</html>

Этот код выполняет следующие действия:

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

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

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

Отображайте названия календарей в следующих ситуациях:

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

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

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