সহজলভ্যতা এবং আন্তর্জাতিকীকরণকে মাথায় রেখে ক্যালেন্ডার তৈরি করা

সহজলভ্যতা এবং আন্তর্জাতিকীকরণকে মাথায় রেখে ক্যালেন্ডার তৈরি করা

সময় স্ট্যাম্প: মার্চ 13, 2023 9:23 এএম

CSS-Tricks-এ এখানে একটি দ্রুত অনুসন্ধান করা দেখায় যে ক্যালেন্ডারগুলিতে যাওয়ার জন্য কতগুলি ভিন্ন উপায় রয়েছে। কিছু দেখান কিভাবে CSS গ্রিড দক্ষতার সাথে লেআউট তৈরি করতে পারে. কেউ কেউ চেষ্টা করে মিশ্রণে প্রকৃত তথ্য আনুন। কিছু একটি কাঠামোর উপর নির্ভর করুন রাষ্ট্র পরিচালনায় সাহায্য করার জন্য।

একটি ক্যালেন্ডার উপাদান তৈরি করার সময় অনেক বিবেচ্য বিষয় রয়েছে — আমি যে নিবন্ধগুলি লিঙ্ক করেছি তার থেকে অনেক বেশি। আপনি যদি এটি সম্পর্কে চিন্তা করেন, ক্যালেন্ডারগুলি টাইমজোন এবং তারিখের ফর্ম্যাটগুলি পরিচালনা করা থেকে শুরু করে স্থানীয়করণ পর্যন্ত এবং এমনকি তারিখগুলি এক মাস থেকে পরের মাসে প্রবাহিত হওয়ার বিষয়টি নিশ্চিত করে… এবং এটি ক্যালেন্ডার কোথায় তার উপর নির্ভর করে আমরা অ্যাক্সেসযোগ্যতা এবং অতিরিক্ত লেআউট বিবেচনায় নামার আগে। প্রদর্শিত হয় এবং কি না।

অনেক ডেভেলপার ভয় পান Date() লক্ষ্য এবং পুরানো লাইব্রেরিগুলির সাথে লেগে থাকুন moment.js. তবে তারিখ এবং বিন্যাসের ক্ষেত্রে অনেক "গটচাস" থাকলেও, জাভাস্ক্রিপ্টে সাহায্য করার জন্য প্রচুর দুর্দান্ত API এবং জিনিস রয়েছে!

জানুয়ারী 2023 ক্যালেন্ডার গ্রিড।
সহজলভ্যতা এবং আন্তর্জাতিকীকরণকে মাথায় রেখে ক্যালেন্ডার তৈরি করা

আমি এখানে চাকাটি পুনরায় তৈরি করতে চাই না, তবে আমি আপনাকে দেখাব কিভাবে আমরা ভ্যানিলা জাভাস্ক্রিপ্ট সহ একটি ভাল ক্যালেন্ডার পেতে পারি। আমরা দেখব অভিগম্যতা, শব্দার্থিক মার্কআপ ব্যবহার করে এবং স্ক্রিনরিডার-বান্ধব <time> -ট্যাগগুলি - পাশাপাশি আন্তর্জাতিকীকরণ এবং বিন্যাস, ব্যবহার করে Intl.Locale, Intl.DateTimeFormat এবং Intl.NumberFormat-এপিআই

অন্য কথায়, আমরা একটি ক্যালেন্ডার তৈরি করছি... শুধুমাত্র অতিরিক্ত নির্ভরতা ছাড়াই যা আপনি সাধারণত এই ধরনের টিউটোরিয়ালে ব্যবহার করতে দেখতে পারেন, এবং কিছু সূক্ষ্মতা সহ আপনি সাধারণত দেখতে পাবেন না। এবং, এই প্রক্রিয়ার মধ্যে, আমি আশা করি আপনি নতুন জিনিসগুলির জন্য একটি নতুন উপলব্ধি অর্জন করবেন যা জাভাস্ক্রিপ্ট করতে পারে যখন আমি এইরকম কিছু একত্রিত করার সময় আমার মনকে অতিক্রম করে এমন জিনিসগুলির সম্পর্কে ধারণা পাওয়ার সময়।

প্রথমে নামকরণ

আমাদের ক্যালেন্ডার উপাদানকে কী বলা উচিত? আমার মাতৃভাষায়, এটিকে "ক্যালেন্ডার উপাদান" বলা হবে, তাই আসুন এটি ব্যবহার করুন এবং এটিকে "কাল-এল" - নামেও পরিচিত করুন ক্রিপ্টন গ্রহে সুপারম্যানের নাম.

চলুন জিনিসগুলি চালু করার জন্য একটি ফাংশন তৈরি করি:

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 এপিআই. এপিআই আছে একটি 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);

শেষটা হল ক 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। যদিও এটি খুব সাধারণ নয়, অতিরিক্ত প্রসঙ্গের জন্য ক্যালেন্ডারে একটি নির্দিষ্ট সপ্তাহের জন্য সংখ্যাটি প্রদর্শন করা ভাল হতে পারে। আমি এখন এটি থাকা পছন্দ করি, এমনকি যদি আমি এটি ব্যবহার না করি। কিন্তু আমরা এই টিউটোরিয়ালে এটি সম্পূর্ণরূপে ব্যবহার করব।

আমরা একটি ব্যবহার করব 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. আমরা একটি তৈরি day পুনরাবৃত্তিতে বর্তমান দিনের জন্য পরিবর্তনশীল।
  3. আমরা মধ্যে অসঙ্গতি ঠিক করি Intl.Locale API এবং getDay().
  4. যদি day সমান today, আমরা একটি যোগ করুন data-* বৈশিষ্ট্যাবলী।
  5. অবশেষে, আমরা ফিরে <li> একত্রিত ডেটা সহ একটি স্ট্রিং হিসাবে উপাদান।
  6. tabindex="0" কোন ইতিবাচক ট্যাবিনডেক্স মানগুলির পরে কীবোর্ড নেভিগেশন ব্যবহার করার সময় উপাদানটিকে ফোকাসযোগ্য করে তোলে (দ্রষ্টব্য: আপনার উচিত না যোগ ধনাত্মক ট্যাবিন্ডেক্স-মান)

থেকে সংখ্যা "প্যাড" মধ্যে 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-ট্রিকসে, কিন্তু সঙ্গে একটি 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%));
}

ওহ, এবং আসুন প্রতি সপ্তাহের প্রথম তারিখ সংখ্যার আগে যে সপ্তাহের সংখ্যাগুলি যায় সেগুলি ভুলে যাবেন না। আমরা একটি ব্যবহার 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 */
}

আমরা এই সময়ে প্রযুক্তিগতভাবে সম্পন্ন করছি! আমরা একটি ক্যালেন্ডার গ্রিড রেন্ডার করতে পারি যা বর্তমান মাসের তারিখগুলি দেখায়, লোকেল দ্বারা ডেটা স্থানীয়করণের জন্য বিবেচনার সাথে সম্পূর্ণ, এবং নিশ্চিত করে যে ক্যালেন্ডারটি সঠিক শব্দার্থ ব্যবহার করে। এবং আমরা ভ্যানিলা জাভাস্ক্রিপ্ট এবং CSS ব্যবহার করেছি!

কিন্তু এটা নেওয়া যাক আর এক ধাপ...

সারা বছর রেন্ডারিং

হতে পারে আপনি তারিখের একটি পূর্ণ বছর প্রদর্শন করতে হবে! সুতরাং, বর্তমান মাসটি রেন্ডার করার পরিবর্তে, আপনি বর্তমান বছরের জন্য মাসের সমস্ত গ্রিড প্রদর্শন করতে চাইতে পারেন।

ওয়েল, আমরা ব্যবহার করছি পদ্ধতির সম্পর্কে চমৎকার জিনিস হল যে আমরা কল করতে পারেন 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);
}

চূড়ান্ত ডেমো

বোনাস: কনফেটি ক্যালেন্ডার

আমি একটি চমৎকার বই নামক পড়া গ্রিড তৈরি এবং ভাঙা অন্য দিন এবং এই সুন্দর "নববর্ষের পোস্টার" এ হোঁচট খেয়েছে:

প্লাটোব্লকচেইন ডেটা ইন্টেলিজেন্সে প্রবেশযোগ্যতা এবং আন্তর্জাতিকীকরণের সাথে ক্যালেন্ডার তৈরি করা। উল্লম্ব অনুসন্ধান. আ.
উত্স: গ্রিড তৈরি এবং ভাঙা (২য় সংস্করণ) টিমোথি সামারা দ্বারা

আমি ভেবেছিলাম আমরা এইচটিএমএল বা জাভাস্ক্রিপ্টে কিছু পরিবর্তন না করে অনুরূপ কিছু করতে পারি। আমি এটিকে আরও পঠনযোগ্য করার জন্য মাসের জন্য পুরো নাম এবং দিনের নামের পরিবর্তে সংখ্যা অন্তর্ভুক্ত করার স্বাধীনতা নিয়েছি। উপভোগ করুন!

সময় স্ট্যাম্প:

থেকে আরো সিএসএস কৌশল