كيف تعرض أسماء التقاويم مثل الميلادي والعبري والإسلامي؟

مقدمة

تستخدم الثقافات والأديان المختلفة أنظمة تقويم مختلفة لتتبع التواريخ وتنظيم الوقت. بينما يُستخدم التقويم الميلادي بشكل شائع في أجزاء كثيرة من العالم، تُستخدم أنظمة تقويم أخرى للمناسبات الدينية والفعاليات الثقافية والحياة اليومية. يُستخدم التقويم العبري في إسرائيل ومن قبل المجتمعات اليهودية في جميع أنحاء العالم. يوجه التقويم الإسلامي الممارسات الدينية الإسلامية. يُستخدم التقويم البوذي في تايلاند ودول أخرى في جنوب شرق آسيا.

تحتاج التطبيقات التي تخدم جمهوراً دولياً إلى السماح للمستخدمين باختيار نظام التقويم المفضل لديهم. تعرض أدوات اختيار التاريخ وواجهات الإعدادات وأدوات الجدولة أسماء التقاويم حتى يتمكن المستخدمون من اختيار النظام الذي يناسب احتياجاتهم. بدلاً من عرض رموز غامضة مثل "gregory" أو "islamic-umalqura"، تعرض التطبيقات أسماء مقروءة مثل "التقويم الميلادي" أو "تقويم أم القرى".

تحول واجهة Intl.DisplayNames في JavaScript رموز أنظمة التقويم إلى أسماء مقروءة. تتعامل هذه الواجهة مع الترجمات تلقائياً، وتعرض أسماء التقاويم بلغة المستخدم دون الحاجة إلى ملفات ترجمة يدوية.

ما هي رموز التقويم

رموز التقويم هي معرفات نصية قصيرة تمثل أنظمة تقويم مختلفة. يستخدم 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

ترجمة أسماء التقاويم بلغات مختلفة

تظهر أسماء التقاويم باللغة التي تحددها في معامل اللغة المحلية. يتيح لك ذلك عرض أسماء التقاويم للمستخدمين بلغتهم المفضلة.

عرض أسماء التقاويم بالعربية:

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>

يقوم هذا الكود بما يلي:

الحصول على اللغة المحلية لمتصفح المستخدم باستخدام navigator.language
إنشاء كائن DisplayNames باللغة المحلية للمستخدم
استرجاع جميع رموز التقاويم المتاحة
إنشاء عنصر option لكل تقويم
تعيين نص الخيار إلى اسم التقويم المترجم
إضافة مستمع للأحداث للتعامل مع اختيار التقويم

تعرض القائمة المنسدلة تلقائياً أسماء التقاويم بلغة المستخدم. يرى المستخدم الذي لديه متصفح عربي أسماء التقاويم بالعربية. يرى المستخدم الذي لديه متصفح فرنسي أسماء التقاويم بالفرنسية.

متى يتم استخدام عرض أسماء التقاويم

اعرض أسماء التقاويم في هذه الحالات:

صفحات الإعدادات حيث يختار المستخدمون نظام التقويم المفضل لديهم
مكونات منتقي التاريخ التي تدعم أنظمة تقويم متعددة
نماذج إنشاء الأحداث حيث يحدد المستخدمون التقويم المراد استخدامه
صفحات ملف تعريف المستخدم حيث يتم تخزين تفضيل التقويم
تطبيقات الجدولة التي تعمل عبر أنظمة تقويم مختلفة
التطبيقات الدينية أو الثقافية التي تشير إلى تقاويم محددة

يجعل عرض اسم التقويم تطبيقك متاحًا للمستخدمين الذين يعملون مع أنظمة تقويم غير ميلادية. يزيل الغموض حول نظام التقويم الذي يستخدمه التطبيق للتواريخ والأحداث.

توفر لك واجهة برمجة التطبيقات Intl.DisplayNames مع type: 'calendar' وصولاً فوريًا إلى أسماء التقويمات المترجمة دون الحاجة إلى الاحتفاظ بملفات ترجمة أو بيانات وصفية لأنظمة التقويم.