अभिगम्यता और अंतर्राष्ट्रीयकरण को ध्यान में रखते हुए कैलेंडर बनाना

अभिगम्यता और अंतर्राष्ट्रीयकरण को ध्यान में रखते हुए कैलेंडर बनाना

समय टिकट: 13 मार्च, 2023 9:23 पूर्वाह्न

सीएसएस-ट्रिक्स पर त्वरित खोज करने से पता चलता है कि कैलेंडर तक पहुंचने के कितने अलग-अलग तरीके हैं। कुछ दिखाते हैं कैसे सीएसएस ग्रिड लेआउट को कुशलता से बना सकता है. कुछ प्रयास करते हैं मिश्रण में वास्तविक डेटा लाओ. कुछ एक ढांचे पर भरोसा करें राज्य प्रबंधन में मदद करने के लिए।

कैलेंडर घटक का निर्माण करते समय कई विचार हैं - मेरे द्वारा लिंक किए गए लेखों में जो शामिल है, उससे कहीं अधिक। यदि आप इसके बारे में सोचते हैं, तो कैलेंडर समय-क्षेत्र और दिनांक स्वरूपों को संभालने से लेकर स्थानीयकरण तक और यहां तक ​​​​कि तारीखों को एक महीने से अगले महीने तक सुनिश्चित करने से लेकर बारीकियों से भरा होता है ... और इससे पहले कि हम कैलेंडर के आधार पर पहुंच और अतिरिक्त लेआउट के विचारों में भी शामिल हों। प्रदर्शित होता है और क्या नहीं।

कई डेवलपर्स डरते हैं Date() वस्तु और जैसे पुराने पुस्तकालयों के साथ रहना moment.js. लेकिन जब तारीखों और स्वरूपण की बात आती है तो कई "गठबंधन" होते हैं, जावास्क्रिप्ट में मदद करने के लिए बहुत अच्छे एपीआई और सामान हैं!

जनवरी 2023 कैलेंडर ग्रिड।
अभिगम्यता और अंतर्राष्ट्रीयकरण को ध्यान में रखते हुए कैलेंडर बनाना

मैं यहां पहिया को फिर से नहीं बनाना चाहता, लेकिन मैं आपको दिखाऊंगा कि कैसे हम वेनिला जावास्क्रिप्ट के साथ एक अच्छा कैलेंडर प्राप्त कर सकते हैं। हम इस पर गौर करेंगे एक्सेसिबिलिटी, सिमेंटिक मार्कअप और स्क्रीनरीडर के अनुकूल उपयोग करके <time> -टैग - साथ ही अंतर्राष्ट्रीयकरण और स्वरूपण, का उपयोग करते हुए Intl.Locale, Intl.DateTimeFormat और Intl.NumberFormat-एपीआई।

दूसरे शब्दों में, हम एक कैलेंडर बना रहे हैं... केवल अतिरिक्त निर्भरताओं के बिना जिन्हें आप आमतौर पर इस तरह के ट्यूटोरियल में उपयोग करते हुए देख सकते हैं, और कुछ बारीकियों के साथ जो आप आमतौर पर नहीं देख सकते हैं। और, इस प्रक्रिया में, मैं आशा करता हूं कि आप उन नई चीजों के लिए एक नई सराहना प्राप्त करेंगे जो जावास्क्रिप्ट कर सकता है, जब मैं इस तरह से कुछ एक साथ रख रहा हूं तो मेरे दिमाग में आने वाली चीजों का अंदाजा लगा सकते हैं।

सबसे पहले, नामकरण

हमें अपने कैलेंडर घटक को क्या कहना चाहिए? मेरी मूल भाषा में, इसे "कलेंडर तत्व" कहा जाएगा, तो चलिए इसका उपयोग करते हैं और इसे "काल-एल" के रूप में संक्षिप्त करते हैं - जिसे "कलेंडर तत्व" के रूप में भी जाना जाता है क्रिप्टन ग्रह पर सुपरमैन का नाम.

चलिए चीजों को आगे बढ़ाने के लिए एक फंक्शन बनाते हैं:

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

यह तरीका रेंडर करेगा एक महीना. बाद में हम इस विधि को कॉल करेंगे from [...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. एपीआई में एक है weekInfo वस्तु कि रिटर्न ए 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 एपीआई और उसके 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);

अंतिम एक है Boolean यह जाँचता है कि क्या today उस महीने में मौजूद है, जिसे हम प्रस्तुत करने वाले हैं।

शब्दार्थ मार्कअप

हम बस एक पल में रेंडरिंग में और गहराई लाने जा रहे हैं। लेकिन सबसे पहले, मैं यह सुनिश्चित करना चाहता हूं कि हमारे द्वारा सेट किए गए विवरण में उनके साथ सिमेंटिक HTML टैग जुड़े हों। इसे बिल्कुल लीक से हटकर सेट करने से हमें शुरुआत से ही पहुंच-योग्यता के लाभ मिलते हैं।

कैलेंडर आवरण

सबसे पहले, हमारे पास गैर-सिमेंटिक आवरण है: <kal-el>. यह ठीक है क्योंकि कोई शब्दार्थ नहीं है <calendar> टैग या ऐसा कुछ भी। अगर हम कस्टम तत्व नहीं बना रहे थे, <article> सबसे उपयुक्त तत्व हो सकता है क्योंकि कैलेंडर अपने पृष्ठ पर खड़ा हो सकता है।

मास के नाम

RSI <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 एपीआई यहां भी मदद कर सकता है। जब हम रेंडरिंग को कवर करेंगे तो हम इसे अगले भाग में देखेंगे।

दिन संख्या

कैलेंडर ग्रिड में प्रत्येक दिनांक को एक संख्या मिलती है। प्रत्येक संख्या एक सूची आइटम है (<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 एपीआई, फिर से उपयोग कर रहा है 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. हम एक बनाते हैं day पुनरावृत्ति में वर्तमान दिन के लिए चर।
  3. हम के बीच की विसंगति को ठीक करते हैं Intl.Locale एपीआई और getDay().
  4. अगर day के बराबर है today, हम a . जोड़ते हैं data-* विशेषता।
  5. अंत में, हम वापस कर देते हैं <li> मर्ज किए गए डेटा के साथ एक स्ट्रिंग के रूप में तत्व।
  6. tabindex="0" कीबोर्ड नेविगेशन का उपयोग करते समय, किसी भी सकारात्मक टैबिन्डेक्स मान के बाद तत्व को फोकस करने योग्य बनाता है (नोट: आपको चाहिए कभी नहीँ जोड़ना सकारात्मक tabindex-मान)

सेवा मेरे "पैड" नंबर में 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 एपीआई, अब हम बस बदल सकते हैं lang- की विशेषता <html> वर्तमान क्षेत्र के आधार पर कैलेंडर के संदर्भ को बदलने के लिए तत्व:

जनवरी 2023 कैलेंडर ग्रिड।
de-DE
जनवरी 2023 कैलेंडर ग्रिड।
fa-IR
जनवरी 2023 कैलेंडर ग्रिड।
zh-Hans-CN-u-nu-hanidec

कैलेंडर को स्टाइल करना

आपको याद होगा कि कैसे सभी दिन सिर्फ एक होते हैं <ol> सूची आइटम के साथ। इन्हें पढ़ने योग्य कैलेंडर में स्टाइल करने के लिए, हम CSS ग्रिड की अद्भुत दुनिया में गोता लगाते हैं। वास्तव में, हम उसी ग्रिड का पुनरुत्पादन कर सकते हैं यहीं CSS-ट्रिक्स पर एक स्टार्टर कैलेंडर टेम्प्लेट, लेकिन इसके साथ थोड़ा अपडेट किया गया :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%));
}

ओह, और उन सप्ताह संख्याओं को न भूलें जो प्रत्येक सप्ताह की पहली दिनांक संख्या से पहले जाती हैं। हमने ए का इस्तेमाल किया 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('')

प्रदान किए गए वर्ष के लिए एक नया पैरेंट रैपर बनाना शायद एक अच्छा विचार है। प्रत्येक कैलेंडर ग्रिड एक है <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);
}

अंतिम डेमो

बोनस: कंफेटी कैलेंडर

नामक एक उत्कृष्ट पुस्तक पढ़ी ग्रिड बनाना और तोड़ना दूसरे दिन और इस खूबसूरत "नए साल के पोस्टर" पर ठोकर खाई:

प्लेटोब्लॉकचेन डेटा इंटेलिजेंस को ध्यान में रखते हुए पहुंच और अंतर्राष्ट्रीयकरण के साथ कैलेंडर बनाना। लंबवत खोज. ऐ.
स्रोत: ग्रिड बनाना और तोड़ना (दूसरा संस्करण) टिमोथी समारा द्वारा

मुझे लगा कि हम HTML या JavaScript में कुछ भी बदले बिना कुछ ऐसा ही कर सकते हैं। मैंने इसे और अधिक पठनीय बनाने के लिए महीनों के लिए पूर्ण नामों और दिन के नामों के बजाय संख्याओं को शामिल करने की स्वतंत्रता ली है। आनंद लेना!

समय टिकट:

से अधिक सीएसएस ट्रिक्स