Κάνοντας μια γρήγορη αναζήτηση εδώ στο CSS-Tricks δείχνει πόσοι διαφορετικοί τρόποι υπάρχουν για να προσεγγίσετε τα ημερολόγια. Κάποιοι δείχνουν πώς Το CSS Grid μπορεί να δημιουργήσει τη διάταξη αποτελεσματικά. Κάποιοι προσπαθούν να φέρνουν πραγματικά δεδομένα στο μείγμα. Μερικοί βασίζονται σε ένα πλαίσιο να βοηθήσει στην κρατική διαχείριση.
Υπάρχουν πολλές σκέψεις κατά τη δημιουργία ενός στοιχείου ημερολογίου — πολύ περισσότερο από αυτό που καλύπτεται στα άρθρα που συνέδεσα. Αν το καλοσκεφτείτε, τα ημερολόγια είναι γεμάτα αποχρώσεις, από το χειρισμό των ζωνών ώρας και των μορφών ημερομηνίας μέχρι την τοπική προσαρμογή και ακόμη και τη διασφάλιση της ροής των ημερομηνιών από τον ένα μήνα στον άλλο… και αυτό είναι πριν καν λάβουμε υπόψη την προσβασιμότητα και τις πρόσθετες εκτιμήσεις διάταξης ανάλογα με το πού βρίσκεται το ημερολόγιο εμφανίζεται και τι όχι.
Πολλοί προγραμματιστές φοβούνται το Date() αντικείμενο και μείνετε με παλιότερες βιβλιοθήκες όπως moment.js. Όμως, ενώ υπάρχουν πολλά "gotchas" όσον αφορά τις ημερομηνίες και τη μορφοποίηση, η JavaScript έχει πολλά δροσερά API και πράγματα για να βοηθήσει!
Δεν θέλω να δημιουργήσω ξανά τον τροχό εδώ, αλλά θα σας δείξω πώς μπορούμε να δημιουργήσουμε ένα καλό ημερολόγιο με JavaScript βανίλιας. Θα εξετάσουμε προσιτότητα, χρησιμοποιώντας σημασιολογική σήμανση και φιλική προς τον αναγνώστη οθόνης <time> -ετικέτες — καθώς και διεθνοποίηση και μορφοποίηση, Με τη χρήση του Intl.Locale, Intl.DateTimeFormat και Intl.NumberFormat-API.
Με άλλα λόγια, φτιάχνουμε ένα ημερολόγιο… μόνο χωρίς τις επιπλέον εξαρτήσεις που συνήθως βλέπετε να χρησιμοποιούνται σε ένα σεμινάριο όπως αυτό, και με ορισμένες από τις αποχρώσεις που μπορεί να μην βλέπετε συνήθως. Και, στη διαδικασία, ελπίζω να κερδίσετε μια νέα εκτίμηση για νεότερα πράγματα που μπορεί να κάνει η JavaScript, ενώ θα έχετε μια ιδέα για τα είδη των πραγμάτων που περνάνε από το μυαλό μου όταν συνθέτω κάτι τέτοιο μαζί.
Πρώτα, ονοματοδοσία
Πώς πρέπει να ονομάζουμε στοιχείο του ημερολογίου μας; Στη μητρική μου γλώσσα, θα ονομαζόταν "στοιχείο kalender", οπότε ας το χρησιμοποιήσουμε και ας το συντομεύσουμε σε "Kal-El" - επίσης γνωστό ως Το όνομα του Σούπερμαν στον πλανήτη Κρύπτον.
Ας δημιουργήσουμε μια συνάρτηση για να ξεκινήσουν τα πράγματα:
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 μέθοδος στο JavaScript επιστρέφει τις ημέρες ως [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>Και ενώ δεν σκοπεύω να κάνω κάποιο styling ακόμα, ξέρω ότι θα ήθελα κάποιο τρόπο να διαμορφώσω τους αριθμούς των ημερομηνιών. Αυτό είναι δυνατό ως έχει, αλλά θέλω επίσης να μπορώ να διαμορφώνω τους αριθμούς της εβδομάδας διαφορετικά από τους αριθμούς του Σαββατοκύριακου, αν χρειάζεται. Λοιπόν, πρόκειται να συμπεριλάβω 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('')}Ας το αναλύσουμε:
- Δημιουργούμε έναν "εικονικό" πίνακα, με βάση τη μεταβλητή "αριθμός ημερών", τον οποίο θα χρησιμοποιήσουμε για να επαναλάβουμε.
- Δημιουργούμε ένα
dayμεταβλητή για την τρέχουσα ημέρα στην επανάληψη. - Διορθώνουμε την απόκλιση μεταξύ των
Intl.LocaleAPI καιgetDay(). - Εάν η
dayείναι ίσο μεtoday, προσθέτουμε αdata-*αποδίδουν. - Τέλος, επιστρέφουμε το
<li>στοιχείο ως συμβολοσειρά με συγχωνευμένα δεδομένα. 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 API, μπορούμε πλέον απλώς να αλλάξουμε τα lang-ιδιότητα του <html> στοιχείο για την αλλαγή του περιβάλλοντος του ημερολογίου με βάση την τρέχουσα περιοχή:
de-DE
fa-IR
zh-Hans-CN-u-nu-hanidecΔιαμόρφωση του ημερολογίου
Ίσως θυμάστε πώς όλες οι μέρες είναι μόνο μία <ol> με στοιχεία λίστας. Για να τα διαμορφώσουμε σε ένα ευανάγνωστο ημερολόγιο, βουτάμε στον υπέροχο κόσμο του CSS Grid. Στην πραγματικότητα, μπορούμε να επαναχρησιμοποιήσουμε το ίδιο πλέγμα από ένα αρχικό πρότυπο ημερολογίου εδώ στο CSS-Tricks, αλλά ενημέρωσε ένα smidge με το :is() σχεσιακό ψευδο για τη βελτιστοποίηση του κώδικα.
Σημειώστε ότι στην πορεία ορίζω διαμορφώσιμες μεταβλητές CSS (και τους τοποθετώ με πρόθεμα ---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 */
}Τελειώσαμε τεχνικά σε αυτό το σημείο! Μπορούμε να αποδώσουμε ένα πλέγμα ημερολογίου που εμφανίζει τις ημερομηνίες για τον τρέχοντα μήνα, συμπληρωμένο με σκέψεις για τον εντοπισμό των δεδομένων ανά τοπική ρύθμιση και διασφαλίζοντας ότι το ημερολόγιο χρησιμοποιεί σωστή σημασιολογία. Και το μόνο που χρησιμοποιήσαμε ήταν βανίλια JavaScript και 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 είναι το όνομα του πατέρα του Kal-El.
<jor-el id="app" data-year="true"> <kal-el data-firstday="7"> <!-- etc. --> </kal-el> <!-- other months -->
</jor-el>Μπορούμε να χρησιμοποιήσουμε <jor-el> να δημιουργήσουμε ένα πλέγμα για τα πλέγματα μας. Meta λοιπόν!
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);
}Τελικό demo
Μπόνους: Ημερολόγιο κομφετί
Διάβασα ένα εξαιρετικό βιβλίο που ονομάζεται Δημιουργία και Σπάσιμο του Πλέγματος τις προάλλες και έπεσα πάνω σε αυτή την όμορφη «Πρωτοχρονιάτικη αφίσα»:
Σκέφτηκα ότι θα μπορούσαμε να κάνουμε κάτι παρόμοιο χωρίς να αλλάξουμε τίποτα στο HTML ή το JavaScript. Πήρα το θάρρος να συμπεριλάβω πλήρη ονόματα για μήνες και αριθμούς αντί για ονόματα ημερών, για να το κάνω πιο ευανάγνωστο. Απολαμβάνω!
- SEO Powered Content & PR Distribution. Ενισχύστε σήμερα.
- Platoblockchain. Web3 Metaverse Intelligence. Ενισχύθηκε η γνώση. Πρόσβαση εδώ.
- πηγή: https://css-tricks.com/making-calendars-with-accessibility-and-internationalization-in-mind/
