قابل رسائی اور بین الاقوامی کاری کو ذہن میں رکھتے ہوئے کیلنڈر بنانا

قابل رسائی اور بین الاقوامی کاری کو ذہن میں رکھتے ہوئے کیلنڈر بنانا

ٹائم سٹیمپ: 13 مارچ 2023 صبح 9:23 بجے

CSS-Tricks پر یہاں فوری تلاش کرنے سے پتہ چلتا ہے کہ کیلنڈرز تک پہنچنے کے کتنے مختلف طریقے ہیں۔ کچھ دکھاتے ہیں کہ کیسے سی ایس ایس گرڈ مؤثر طریقے سے لے آؤٹ بنا سکتا ہے۔. کچھ کوشش کرتے ہیں۔ مرکب میں اصل ڈیٹا لائیںہے. کچھ ایک فریم ورک پر بھروسہ کریں۔ ریاستی انتظام کے ساتھ مدد کرنے کے لئے.

کیلنڈر کا حصہ بناتے وقت بہت سے تحفظات ہوتے ہیں — جو مضامین میں نے لنک کیے ہیں اس سے کہیں زیادہ۔ اگر آپ اس کے بارے میں سوچتے ہیں تو، کیلنڈرز بہت اہمیت کے حامل ہوتے ہیں، ٹائم زونز اور ڈیٹ فارمیٹس کو سنبھالنے سے لے کر لوکلائزیشن تک اور یہاں تک کہ اس بات کو یقینی بنانا کہ تاریخیں ایک مہینے سے دوسرے مہینے تک چلی جائیں… اور یہ اس سے پہلے کہ ہم رسائی اور اضافی ترتیب پر غور کریں اس بات پر منحصر ہے کہ کیلنڈر کہاں ہے۔ ظاہر ہوتا ہے اور کیا نہیں.

بہت سے ڈویلپرز ڈرتے ہیں Date() اعتراض اور پرانی لائبریریوں کے ساتھ رہنا جیسے moment.js. لیکن جب تاریخوں اور فارمیٹنگ کی بات آتی ہے تو بہت سارے "گٹچاس" ہوتے ہیں، جاوا اسکرپٹ کے پاس مدد کے لیے بہت سارے ٹھنڈے APIs اور چیزیں ہیں!

جنوری 2023 کیلنڈر گرڈ۔
قابل رسائی اور بین الاقوامی کاری کو ذہن میں رکھتے ہوئے کیلنڈر بنانا

میں یہاں پہیے کو دوبارہ نہیں بنانا چاہتا، لیکن میں آپ کو دکھاؤں گا کہ ہم ونیلا جاوا اسکرپٹ کے ساتھ ڈانگ اچھا کیلنڈر کیسے حاصل کر سکتے ہیں۔ ہم غور کریں گے۔ رسائی پذیری، سیمنٹک مارک اپ کا استعمال کرتے ہوئے اور اسکرین ریڈر کے موافق <time> -ٹیگز - اس کے ساتھ ساتھ عالمگیریت اور فارمیٹنگ، کا استعمال کرتے ہوئے Intl.Locale, Intl.DateTimeFormat اور Intl.NumberFormat-APIs۔

دوسرے لفظوں میں، ہم ایک کیلنڈر بنا رہے ہیں… صرف اضافی انحصار کے بغیر جو آپ عام طور پر اس طرح کے ٹیوٹوریل میں استعمال ہوتے دیکھ سکتے ہیں، اور کچھ باریکیوں کے ساتھ جو آپ کو عام طور پر نظر نہیں آتے۔ اور، اس عمل میں، میں امید کرتا ہوں کہ آپ نئی چیزوں کے لیے ایک نئی تعریف حاصل کریں گے جو جاوا اسکرپٹ کر سکتا ہے جب کہ میں اس طرح کی کوئی چیز ایک ساتھ ڈال رہا ہوں تو میرے ذہن میں آنے والی چیزوں کے بارے میں ایک خیال حاصل کریں۔

سب سے پہلے، نام دینا

ہمیں اپنے کیلنڈر کے جزو کو کیا کہنا چاہیے؟ میری مادری زبان میں، اسے "کلینڈر عنصر" کہا جائے گا، تو آئیے اسے استعمال کریں اور اسے مختصر کرکے "کال-ایل" کے نام سے بھی جانا جاتا ہے۔ سیارے کرپٹن پر سپرمین کا نام.

آئیے چیزوں کو آگے بڑھانے کے لیے ایک فنکشن بنائیں:

function kalEl(settings = {}) { ... }

یہ طریقہ رینڈر کرے گا ایک مہینہ. بعد میں ہم اس طریقہ کو کال کریں گے۔ [...Array(12).keys()] ایک پورا سال فراہم کرنے کے لئے.

ابتدائی ڈیٹا اور بین الاقوامی کاری

ایک عام آن لائن کیلنڈر جو کام کرتا ہے ان میں سے ایک موجودہ تاریخ کو نمایاں کرنا ہے۔ تو آئیے اس کے لیے ایک حوالہ بناتے ہیں:

const today = new Date();

اگلا، ہم ایک "کنفیگریشن آبجیکٹ" بنائیں گے جسے ہم اختیاری کے ساتھ ضم کر دیں گے۔ settings بنیادی طریقہ کا مقصد:

const config = Object.assign( { locale: (document.documentElement.getAttribute('lang') || 'en-US'), today: { day: today.getDate(), month: today.getMonth(), year: today.getFullYear() } }, settings
);

ہم چیک کرتے ہیں، اگر جڑ عنصر (<html>) پر مشتمل ہے۔ lang- کے ساتھ وصف مقامی معلومات بصورت دیگر، ہم استعمال کرنے پر واپس آجائیں گے۔ en-US. یہ اس طرف پہلا قدم ہے۔ کیلنڈر کو بین الاقوامی بنانا.

ہمیں یہ بھی طے کرنے کی ضرورت ہے کہ کیلنڈر کے پیش ہونے پر ابتدائی طور پر کون سا مہینہ ظاہر کرنا ہے۔ اسی لیے ہم نے توسیع کی۔ config بنیادی کے ساتھ اعتراض date. اس طرح، اگر میں کوئی تاریخ فراہم نہیں کی گئی ہے۔ settings اعتراض، ہم استعمال کریں گے today اس کے بجائے حوالہ:

const date = config.date ? new Date(config.date) : today;

ہمیں کیلنڈر کو لوکل کی بنیاد پر صحیح طریقے سے فارمیٹ کرنے کے لیے تھوڑی مزید معلومات کی ضرورت ہے۔ مثال کے طور پر، ہم یہ نہیں جان سکتے کہ ہفتے کا پہلا دن اتوار ہے یا پیر، مقام کے لحاظ سے۔ اگر ہمارے پاس معلومات ہیں تو بہت اچھا! لیکن اگر نہیں، تو ہم اسے استعمال کرکے اپ ڈیٹ کریں گے۔ Intl.Locale API. API میں ایک ہے۔ weekInfo اعتراض جو لوٹتا ہے a firstDay پراپرٹی جو ہمیں بالکل وہی دیتی ہے جس کی ہم بغیر کسی پریشانی کے تلاش کر رہے ہیں۔ ہم یہ بھی حاصل کر سکتے ہیں کہ ہفتے کے کون سے دن کو تفویض کیے گئے ہیں۔ weekend:

if (!config.info) config.info = new Intl.Locale(config.locale).weekInfo || { firstDay: 7, weekend: [6, 7] };

ایک بار پھر، ہم فال بیکس بناتے ہیں۔ ہفتے کا "پہلا دن" کے لیے en-US اتوار ہے، لہذا یہ پہلے سے طے شدہ کی قدر کے مطابق ہے۔ 7. یہ تھوڑا سا الجھا ہوا ہے، جیسا کہ getDay طریقہ جاوا اسکرپٹ میں دن واپس کرتا ہے۔ [0-6]، کہاں 0 اتوار ہے… مجھ سے مت پوچھو کیوں؟ ہفتے کے آخر میں ہفتہ اور اتوار ہیں، لہذا [6, 7].

اس سے پہلے کہ ہمارے پاس تھا۔ Intl.Locale API اور اس کا weekInfo طریقہ کار، ہر ایک مقام یا علاقے کے بارے میں معلومات کے ساتھ بہت سے **آجیکٹس اور صفوں کے بغیر بین الاقوامی کیلنڈر بنانا بہت مشکل تھا۔ آج کل، یہ آسان ہے. اگر ہم اندر داخل ہوتے ہیں۔ en-GB، طریقہ واپس آتا ہے:

// en-GB
{ firstDay: 1, weekend: [6, 7], minimalDays: 4
}

برونائی جیسے ملک میں (ms-BN)، اختتام ہفتہ جمعہ اور اتوار ہے:

// ms-BN
{ firstDay: 7, weekend: [5, 7], minimalDays: 1
}

آپ حیران ہوسکتے ہیں کہ یہ کیا ہے۔ minimalDays جائیداد ہے. وہ ہے پورے ہفتے کے طور پر شمار کیے جانے کے لیے مہینے کے پہلے ہفتے میں کم ترین دن درکار ہوتے ہیں۔. کچھ علاقوں میں، یہ صرف ایک دن ہو سکتا ہے۔ دوسروں کے لیے، یہ پورے سات دن ہو سکتے ہیں۔

اگلا، ہم ایک بنائیں گے render ہمارے اندر طریقہ کار kalElطریقہ:

const render = (date, locale) => { ... }

ہمیں کچھ بھی پیش کرنے سے پہلے کام کرنے کے لیے کچھ اور ڈیٹا کی ضرورت ہے:

const month = date.getMonth();
const year = date.getFullYear();
const numOfDays = new Date(year, month + 1, 0).getDate();
const renderToday = (year === config.today.year) && (month === config.today.month);

آخری ایک ہے a Boolean یہ چیک کرتا ہے کہ آیا today اس مہینے میں موجود ہے جسے ہم پیش کرنے والے ہیں۔

سیمنٹک مارک اپ

ہم صرف ایک لمحے میں رینڈرنگ میں مزید گہرائی حاصل کرنے جا رہے ہیں۔ لیکن سب سے پہلے، میں یہ یقینی بنانا چاہتا ہوں کہ ہم نے جو تفصیلات ترتیب دی ہیں ان میں سیمنٹک HTML ٹیگز ان کے ساتھ وابستہ ہیں۔ اسے باکس کے بالکل باہر ترتیب دینے سے ہمیں شروع سے ہی رسائی کے فوائد ملتے ہیں۔

کیلنڈر ریپر

سب سے پہلے، ہمارے پاس غیر سیمینٹک ریپر ہے: <kal-el>. یہ ٹھیک ہے کیونکہ کوئی سیمنٹک نہیں ہے۔ <calendar> ٹیگ یا اس طرح کی کوئی چیز۔ اگر ہم حسب ضرورت عنصر نہیں بنا رہے تھے، <article> سب سے مناسب عنصر ہو سکتا ہے کیونکہ کیلنڈر اپنے صفحہ پر کھڑا ہو سکتا ہے۔

مہینوں کے نام

۔ <time> عنصر ہمارے لیے بہت بڑا ثابت ہونے والا ہے کیونکہ یہ تاریخوں کا ایک ایسے فارمیٹ میں ترجمہ کرنے میں مدد کرتا ہے جسے اسکرین ریڈرز اور سرچ انجن زیادہ درست اور مستقل طور پر پارس کر سکتے ہیں۔ مثال کے طور پر، یہاں یہ ہے کہ ہم اپنے مارک اپ میں "جنوری 2023" کو کیسے پہنچا سکتے ہیں:

<time datetime="2023-01">January <i>2023</i></time>

دن کے نام

ہفتے کے دنوں کے ناموں پر مشتمل کیلنڈر کی تاریخوں کے اوپر کی قطار مشکل ہو سکتی ہے۔ یہ مثالی ہے اگر ہم ہر دن کے مکمل نام لکھ سکتے ہیں — مثلاً اتوار، پیر، منگل، وغیرہ — لیکن اس میں کافی جگہ لگ سکتی ہے۔ تو، اب ایک کے اندر ناموں کو مختصر کرتے ہیں۔ <ol> جہاں ہر دن ایک ہوتا ہے۔ <li>:

<ol> <li><abbr title="Sunday">Sun</abbr></li> <li><abbr title="Monday">Mon</abbr></li> <!-- etc. -->
</ol>

ہم دونوں جہانوں سے بہترین حاصل کرنے کے لیے CSS کے ساتھ مشکل ہو سکتے ہیں۔ مثال کے طور پر، اگر ہم مارک اپ کو اس طرح تبدیل کرتے ہیں:

<ol> <li> <abbr title="S">Sunday</abbr> </li>
</ol>

…ہمیں بطور ڈیفالٹ پورے نام ملتے ہیں۔ اس کے بعد جب جگہ ختم ہوجائے تو ہم پورا نام "چھپا" سکتے ہیں اور ڈسپلے کر سکتے ہیں۔ title اس کے بجائے وصف:

@media all and (max-width: 800px) { li abbr::after { content: attr(title); }
}

لیکن، ہم اس راستے پر نہیں جا رہے ہیں کیونکہ Intl.DateTimeFormat API یہاں بھی مدد کر سکتا ہے۔ ہم اگلے حصے میں اس تک پہنچیں گے جب ہم رینڈرنگ کا احاطہ کریں گے۔

دن کے نمبر

کیلنڈر گرڈ میں ہر تاریخ کو ایک نمبر ملتا ہے۔ ہر نمبر ایک فہرست آئٹم ہے (<li>ایک ترتیب شدہ فہرست میں (<ol>)، اور ان لائن <time> ٹیگ اصل نمبر کو لپیٹتا ہے۔

<li> <time datetime="2023-01-01">1</time>
</li>

اور جب کہ میں ابھی کوئی اسٹائل کرنے کا ارادہ نہیں کر رہا ہوں، میں جانتا ہوں کہ میں تاریخ کے نمبروں کو اسٹائل کرنے کا کوئی طریقہ چاہوں گا۔ یہ جیسا کہ ممکن ہے، لیکن میں یہ بھی چاہتا ہوں کہ اگر مجھے ضرورت ہو تو میں ہفتے کے دن کے نمبروں کو ویک اینڈ نمبروں سے مختلف انداز میں سٹائل کرنا چاہتا ہوں۔ تو، میں شامل کرنے جا رہا ہوں data-* اوصاف خاص طور پر اس کے لیے: data-weekend اور data-today.

ہفتہ نمبر

ایک سال میں 52 ہفتے ہوتے ہیں، کبھی کبھی 53۔ اگرچہ یہ بہت عام نہیں ہے، اضافی سیاق و سباق کے لیے کیلنڈر میں کسی مخصوص ہفتے کے لیے نمبر ڈسپلے کرنا اچھا ہو سکتا ہے۔ مجھے اب اسے رکھنا پسند ہے، چاہے میں اسے استعمال نہ کر سکوں۔ لیکن ہم اسے مکمل طور پر اس ٹیوٹوریل میں استعمال کریں گے۔

ہم استعمال کریں گے a data-weeknumber اسٹائلنگ ہک کے طور پر انتساب کریں اور اسے ہر اس تاریخ کے مارک اپ میں شامل کریں جو ہفتے کی پہلی تاریخ ہے۔

<li data-day="7" data-weeknumber="1" data-weekend=""> <time datetime="2023-01-08">8</time>
</li>

رینڈرنگ

آئیے ایک صفحے پر کیلنڈر حاصل کریں! ہم پہلے ہی جانتے ہیں۔ <kal-el> ہمارے حسب ضرورت عنصر کا نام ہے۔ پہلی چیز جو ہمیں اسے ترتیب دینے کی ضرورت ہے وہ ہے سیٹ کرنا firstDay اس پر جائیداد ہے، لہذا کیلنڈر جانتا ہے کہ اتوار یا کوئی اور دن ہفتے کا پہلا دن ہے۔

<kal-el data-firstday="${ config.info.firstDay }">

ہم استعمال کریں گے۔ ٹیمپلیٹ لٹریلز مارک اپ رینڈر کرنے کے لیے۔ بین الاقوامی سامعین کے لیے تاریخوں کو فارمیٹ کرنے کے لیے، ہم استعمال کریں گے۔ Intl.DateTimeFormat API، دوبارہ استعمال کرتے ہوئے locale ہم نے پہلے بیان کیا.

مہینہ اور سال

جب ہم کال کرتے ہیں۔ month، ہم سیٹ کر سکتے ہیں کہ آیا ہم استعمال کرنا چاہتے ہیں۔ long نام (جیسے فروری) یا short نام (مثال کے طور پر فروری)۔ آئیے استعمال کریں۔ long نام کیونکہ یہ کیلنڈر کے اوپر عنوان ہے:

<time datetime="${year}-${(pad(month))}"> ${new Intl.DateTimeFormat( locale, { month:'long'}).format(date)} <i>${year}</i>
</time>

ہفتے کے دن کے نام

تاریخوں کے گرڈ کے اوپر دکھائے گئے ہفتے کے دنوں کے لیے، ہمیں دونوں کی ضرورت ہے۔ long (جیسے "اتوار") اور short (مختصراً، یعنی "سورج") نام۔ اس طرح، ہم "مختصر" نام استعمال کر سکتے ہیں جب کیلنڈر میں جگہ کم ہو:

Intl.DateTimeFormat([locale], { weekday: 'long' })
Intl.DateTimeFormat([locale], { weekday: 'short' })

آئیے ایک چھوٹا مددگار طریقہ بناتے ہیں جو ہر ایک کو کال کرنا تھوڑا آسان بناتا ہے:

const weekdays = (firstDay, locale) => { const date = new Date(0); const arr = [...Array(7).keys()].map(i => { date.setDate(5 + i) return { long: new Intl.DateTimeFormat([locale], { weekday: 'long'}).format(date), short: new Intl.DateTimeFormat([locale], { weekday: 'short'}).format(date) } }) for (let i = 0; i < 8 - firstDay; i++) arr.splice(0, 0, arr.pop()); return arr;
}

یہاں ہم اسے ٹیمپلیٹ میں کیسے پکارتے ہیں:

<ol> ${weekdays(config.info.firstDay,locale).map(name => ` <li> <abbr title="${name.long}">${name.short}</abbr> </li>`).join('') }
</ol>

دن کے نمبر

اور آخر میں، دن، ایک میں لپیٹ <ol> عنصر:

${[...Array(numOfDays).keys()].map(i => { const cur = new Date(year, month, i + 1); let day = cur.getDay(); if (day === 0) day = 7; const today = renderToday && (config.today.day === i + 1) ? ' data-today':''; return ` <li data-day="${day}"${today}${i === 0 || day === config.info.firstDay ? ` data-weeknumber="${new Intl.NumberFormat(locale).format(getWeek(cur))}"`:''}${config.info.weekend.includes(day) ? ` data-weekend`:''}> <time datetime="${year}-${(pad(month))}-${pad(i)}" tabindex="0"> ${new Intl.NumberFormat(locale).format(i + 1)} </time> </li>`
}).join('')}

آئیے اسے توڑ دیتے ہیں:

  1. ہم "دنوں کی تعداد" متغیر کی بنیاد پر ایک "ڈمی" صف بناتے ہیں، جسے ہم اعادہ کرنے کے لیے استعمال کریں گے۔
  2. ہم بناتے ہیں a day تکرار میں موجودہ دن کے لیے متغیر۔
  3. ہم درمیان فرق کو ٹھیک کرتے ہیں۔ Intl.Locale API اور getDay().
  4. اگر day مساوی ہے today، ہم ایک شامل کرتے ہیں۔ data-* وصف.
  5. آخر میں، ہم واپس <li> ضم شدہ ڈیٹا کے ساتھ ایک سٹرنگ کے طور پر عنصر۔
  6. tabindex="0" کی بورڈ نیویگیشن کا استعمال کرتے وقت، کسی بھی مثبت ٹیبائنڈیکس قدروں کے بعد عنصر کو توجہ کے قابل بناتا ہے (نوٹ: آپ کو چاہیے کبھی نہیں شامل کریں مثبت tabindex-values)

کرنے کے لئے نمبروں کو "پیڈ" کریں۔ میں datetime وصف، ہم ایک چھوٹا مددگار طریقہ استعمال کرتے ہیں:

const pad = (val) => (val + 1).toString().padStart(2, '0');

ہفتہ نمبر۔

ایک بار پھر، "ہفتہ نمبر" وہ جگہ ہے جہاں ایک ہفتہ 52 ہفتوں کے کیلنڈر میں آتا ہے۔ ہم اس کے لیے ایک چھوٹا مددگار طریقہ بھی استعمال کرتے ہیں:

function getWeek(cur) { const date = new Date(cur.getTime()); date.setHours(0, 0, 0, 0); date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7); const week = new Date(date.getFullYear(), 0, 4); return 1 + Math.round(((date.getTime() - week.getTime()) / 86400000 - 3 + (week.getDay() + 6) % 7) / 7);
}

یہ میں نے نہیں لکھا getWeek-طریقہ۔ کا صاف شدہ ورژن ہے۔ اس سکرپٹ.

اور یہ بات ہے! کا شکریہ Intl.Locale, Intl.DateTimeFormat اور Intl.NumberFormat APIs، اب ہم آسانی سے تبدیل کر سکتے ہیں۔ lang- کی خصوصیت <html> عنصر موجودہ علاقے کی بنیاد پر کیلنڈر کے سیاق و سباق کو تبدیل کرنے کے لیے:

جنوری 2023 کیلنڈر گرڈ۔
de-DE
جنوری 2023 کیلنڈر گرڈ۔
fa-IR
جنوری 2023 کیلنڈر گرڈ۔
zh-Hans-CN-u-nu-hanidec

کیلنڈر کو اسٹائل کرنا

آپ کو یاد ہوگا کہ تمام دن صرف ایک ہی ہوتے ہیں۔ <ol> فہرست اشیاء کے ساتھ. ان کو پڑھنے کے قابل کیلنڈر بنانے کے لیے، ہم CSS گرڈ کی شاندار دنیا میں غوطہ لگاتے ہیں۔ درحقیقت، ہم اسی گرڈ سے دوبارہ کام کر سکتے ہیں۔ CSS-Tricks پر ایک سٹارٹر کیلنڈر ٹیمپلیٹ, لیکن کے ساتھ ایک smidge اپ ڈیٹ کیا :is() کوڈ کو بہتر بنانے کے لیے متعلقہ چھدم۔

نوٹ کریں کہ میں راستے میں قابل ترتیب سی ایس ایس متغیرات کی وضاحت کر رہا ہوں (اور ان کے ساتھ سابقہ ​​لگا رہا ہوں ---kalel- تنازعات سے بچنے کے لیے)۔

kal-el :is(ol, ul) { display: grid; font-size: var(--kalel-fz, small); grid-row-gap: var(--kalel-row-gap, .33em); grid-template-columns: var(--kalel-gtc, repeat(7, 1fr)); list-style: none; margin: unset; padding: unset; position: relative;
}
سات کالم کیلنڈر گرڈ جس میں گرڈ لائنیں دکھائی گئی ہیں۔
قابل رسائی اور بین الاقوامی کاری کو ذہن میں رکھتے ہوئے کیلنڈر بنانا

آئیے تاریخ کے نمبروں کے ارد گرد بارڈرز بنائیں تاکہ انہیں بصری طور پر الگ کرنے میں مدد ملے:

kal-el :is(ol, ul) li { border-color: var(--kalel-li-bdc, hsl(0, 0%, 80%)); border-style: var(--kalel-li-bds, solid); border-width: var(--kalel-li-bdw, 0 0 1px 0); grid-column: var(--kalel-li-gc, initial); text-align: var(--kalel-li-tal, end); }

جب مہینے کا پہلا دن ہوتا ہے تو سات کالم والی گرڈ ٹھیک کام کرتی ہے۔ بھی منتخب کردہ مقام کے لیے ہفتے کا پہلا دن)۔ لیکن یہ قاعدہ کے بجائے استثناء ہے۔ اکثر اوقات، ہمیں مہینے کے پہلے دن کو ہفتے کے مختلف دن میں منتقل کرنے کی ضرورت ہوگی۔

جمعرات کو آنے والے مہینے کا پہلا دن دکھا رہا ہے۔
قابل رسائی اور بین الاقوامی کاری کو ذہن میں رکھتے ہوئے کیلنڈر بنانا

تمام اضافی یاد رکھیں data-* ہمارے مارک اپ لکھتے وقت ہم نے جن صفات کی وضاحت کی ہے؟ ہم کس گرڈ کالم کو اپ ڈیٹ کرنے کے لیے ان سے رابطہ کر سکتے ہیں (--kalel-li-gc) مہینے کی پہلی تاریخ نمبر پر رکھا گیا ہے:

[data-firstday="1"] [data-day="3"]:first-child { --kalel-li-gc: 1 / 4;
}

اس صورت میں، ہم پہلے گرڈ کالم سے چوتھے گرڈ کالم تک پھیلے ہوئے ہیں - جو خود بخود اگلی آئٹم (دن 2) کو پانچویں گرڈ کالم تک "دھکا" دے گا، اور اسی طرح آگے۔

آئیے "موجودہ" تاریخ میں ایک چھوٹا سا انداز شامل کریں، تو یہ نمایاں ہو جائے۔ یہ صرف میرے انداز ہیں۔ آپ یہاں مکمل طور پر جو چاہیں کر سکتے ہیں۔

[data-today] { --kalel-day-bdrs: 50%; --kalel-day-bg: hsl(0, 86%, 40%); --kalel-day-hover-bgc: hsl(0, 86%, 70%); --kalel-day-c: #fff;
}

مجھے ہفتے کے آخر میں تاریخ کے نمبروں کو ہفتے کے دنوں سے مختلف انداز میں ترتیب دینے کا خیال پسند ہے۔ میں ان کو اسٹائل کرنے کے لیے ایک سرخی مائل رنگ استعمال کرنے جا رہا ہوں۔ نوٹ کریں کہ ہم اس تک پہنچ سکتے ہیں۔ :not() موجودہ تاریخ کو تنہا چھوڑتے ہوئے انہیں منتخب کرنے کے لیے چھدم کلاس:

[data-weekend]:not([data-today]) { --kalel-day-c: var(--kalel-weekend-c, hsl(0, 86%, 46%));
}

اوہ، اور آئیے ان ہفتے کے نمبروں کو نہیں بھولیں جو ہر ہفتے کی پہلی تاریخ نمبر سے پہلے جاتے ہیں۔ ہم نے استعمال کیا a data-weeknumber اس کے لیے مارک اپ میں انتساب، لیکن اعداد اصل میں ظاہر نہیں ہوں گے جب تک کہ ہم انہیں CSS کے ساتھ ظاہر نہ کریں، جو ہم ::before چھدم عنصر:

[data-weeknumber]::before { display: var(--kalel-weeknumber-d, inline-block); content: attr(data-weeknumber); position: absolute; inset-inline-start: 0; /* additional styles */
}

ہم اس وقت تکنیکی طور پر مکمل کر چکے ہیں! ہم ایک کیلنڈر گرڈ رینڈر کر سکتے ہیں جو موجودہ مہینے کی تاریخوں کو دکھاتا ہے، ڈیٹا کو لوکل کے لحاظ سے لوکلائز کرنے کے لیے غور و فکر کے ساتھ مکمل، اور اس بات کو یقینی بناتا ہے کہ کیلنڈر مناسب الفاظ کا استعمال کرتا ہے۔ اور ہم نے صرف وینیلا جاوا اسکرپٹ اور سی ایس ایس کا استعمال کیا!

لیکن آئیے یہ لیتے ہیں۔ ایک قدم اور...

پورا سال پیش کرنا

ہوسکتا ہے کہ آپ کو تاریخوں کا پورا سال ظاہر کرنے کی ضرورت ہو! لہذا، موجودہ مہینے کو رینڈر کرنے کے بجائے، آپ موجودہ سال کے لیے مہینے کے تمام گرڈز کو ظاہر کرنا چاہیں گے۔

ٹھیک ہے، ہم جو طریقہ استعمال کر رہے ہیں اس کے بارے میں اچھی بات یہ ہے کہ ہم کال کر سکتے ہیں۔ render طریقہ جتنی بار ہم چاہیں اور صرف انٹیجر کو تبدیل کریں جو ہر مثال پر مہینے کی شناخت کرتا ہے۔ آئیے اسے موجودہ سال کی بنیاد پر 12 بار کہتے ہیں۔

کال کرنے کے طور پر آسان renderطریقہ 12 بار، اور صرف اس کے لیے عدد کو تبدیل کریں۔ month - i:

[...Array(12).keys()].map(i => render( new Date(date.getFullYear(), i, date.getDate()), config.locale, date.getMonth() )
).join('')

پیش کردہ سال کے لیے نیا پیرنٹ ریپر بنانا شاید ایک اچھا خیال ہے۔ ہر کیلنڈر گرڈ a ہے۔ <kal-el> عنصر آئیے نئے پیرنٹ ریپر کو کال کریں۔ <jor-el>، کہاں جور ایل کال ایل کے والد کا نام ہے۔.

<jor-el id="app" data-year="true"> <kal-el data-firstday="7"> <!-- etc. --> </kal-el> <!-- other months -->
</jor-el>

ہم استعمال کر سکتے ہیں <jor-el> ہمارے گرڈ کے لیے ایک گرڈ بنانے کے لیے۔ تو میٹا!

jor-el { background: var(--jorel-bg, none); display: var(--jorel-d, grid); gap: var(--jorel-gap, 2.5rem); grid-template-columns: var(--jorel-gtc, repeat(auto-fill, minmax(320px, 1fr))); padding: var(--jorel-p, 0);
}

فائنل ڈیمو

بونس: کنفیٹی کیلنڈر

میں نے ایک بہترین کتاب پڑھی جس کا نام ہے۔ گرڈ بنانا اور توڑنا دوسرے دن اور اس خوبصورت "نئے سال کے پوسٹر" پر ٹھوکر کھائی:

Making Calendars With Accessibility and Internationalization in Mind PlatoBlockchain Data Intelligence. Vertical Search. Ai.
ماخذ: گرڈ بنانا اور توڑنا (دوسرا ایڈیشن) بذریعہ ٹموتھی سمارا

میں نے سوچا کہ ہم HTML یا JavaScript میں کچھ بھی تبدیل کیے بغیر ایسا ہی کچھ کر سکتے ہیں۔ میں نے اسے مزید پڑھنے کے قابل بنانے کے لیے مہینوں کے مکمل نام، اور دن کے ناموں کے بجائے نمبر شامل کرنے کی آزادی لی ہے۔ لطف اٹھائیں!

ٹائم اسٹیمپ:

سے زیادہ سی ایس ایس ٹیکنیکس