בניית יישום לוח שנה מותאם אישית היא דרך מצוינת להעמיק את ההבנה של JavaScript, מודל אובייקט דפדפן (DOM), ואת המשך הנתונים של הלקוח בצד הלקוח. על ידי מינוף ממשק API של Web Storage – במיוחד אחסון מקומי - אתה יכול ליצור לוח שנה פונקציונלי לחלוטין, מונחה אירוע שפועל לחלוטין בדפדפן ללא צורך בשרת אחורי או מסד נתונים. זה עובר אותך בכל שלב, מהוראות ה- HTML כדי ליישם תכונות מתקדמות כמו ניהול אירועים.

למה לבנות לוח שנה מותאם?

ספריות לוח שנה מבוססות מראש (כגון FullCalendar או DayPilot) מציעות פתרונות מהירים, אך בניית אחת מאפסנות מעניקה לך שליטה מלאה על ממשק המשתמש, ניהול נתונים וביצועים.You גם לצבור ניסיון עם מושגי JavaScript הליבה כגון FLT:0) אובייקט, משלחת אירוע, ו-FLT:1 API וכתוצאה מכך ניתן להרחיב את האפליקציה לתוך כלי ניהול פרויקטים, מערכת או יומן אישי.

הקמת מבנה HTML

התחל עם השלד HTML נקי.הלוח צריך שלושה מרכיבים עיקריים: בר ניווט (לשינוי חודשים), מיכל רשת (עבור תאים יום), וצורה של קלט אירוע.

<div id="calendar">
 <div class="calendar-header">
 <button id="prevBtn">&larr;</button>
 <h2 id="monthYear"></h2>
 <button id="nextBtn">&rarr;</button>
 </div>
 <div class="calendar-grid"></div>
 <div class="event-form">
 <input type="text" id="eventInput" placeholder="Add an event..." />
 <button id="saveEvent">Save</button>
 </div>
</div>

ה-FLT:4 יאוכלס באופן דינמי על ידי JavaScript.עבור פריסה ידידותית לנייד, לשקול שימוש ברשת CSS 7-column (אחד ליום בשבוע) שמור את השורה הראשונה עבור שמות יום (שמש-השטן).

לוח השנה עם CSS

קידוד נקי, תגובתי הופך את ה-HTML הגולמי לממשק שניתן להשתמש בו ב-CSS Grid עבור רשת לוח השנה, הגדרתו:5 (הוספת חללים במשך ימים לפני תחילת החודש.עבור נגישות, להבטיח ניגוד צבע מספיק וכוללת בין סגנונות FLT:6 על אלמנטים אינטראקטיביים.גליון מינימלי מוצג מתחת (inline או מקושר).

.calendar-grid {
 display: grid;
 grid-template-columns: repeat(7, 1fr);
 gap: 2px;
}
.day-cell {
 min-height: 80px;
 border: 1px solid #ccc;
 padding: 4px;
 position: relative;
}
.day-cell.today {
 background-color: #eef;
}
.event {
 font-size: 0.8em;
 background: #4caf50;
 color: #fff;
 padding: 2px 4px;
 margin: 1px 0;
 border-radius: 3px;
 cursor: pointer;
}

השתמש בשאילתות מדיה כדי להפחית את גודל התא על מסכים צרים, ולשקול טקסט אירוע מסתור ומראה רק ספירה.

Core JavaScript: הקמת לוח השנה

כל הדינמיקה שנעשית ב- JavaScript.התפקוד המרכזי, FLT:8, מחשב את היום הראשון של החודש ואת המספר הכולל של ימים. השתמש ב- 10:9 כדי לקבל את מדד השבוע (0= יום ראשון) ולאחר מכן ליצור תאים בלולאה מ 1 עד היום האחרון של החודש.

עבודה עם יעד התאריך

האובייקט הוא עמוד השדרה של לוגיקה לוח השנה.כדי להגיע ליום האחרון של חודש, להשתמש ב-FLT:11 (יום 0 בחודש הבא נותן את היום האחרון של החודש הנוכחי ואת השנה במשתנים גלובליים כך ניווט יכול לעדכן אותם.

בניית הרשת

function renderCalendar() {
 const grid = document.querySelector('.calendar-grid');
 grid.innerHTML = '';

 const firstDay = new Date(currentYear, currentMonth, 1).getDay();
 const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();

 // Add empty cells for days before the 1st
 for (let i = 0; i < firstDay; i++) {
 const empty = document.createElement('div');
 empty.className = 'day-cell empty';
 grid.appendChild(empty);
 }

 // Generate day cells
 for (let day = 1; day <= daysInMonth; day++) {
 const cell = document.createElement('div');
 cell.className = 'day-cell';
 cell.dataset.date = `${currentYear}-${currentMonth + 1}-${day}`;

 const dateSpan = document.createElement('span');
 dateSpan.textContent = day;
 cell.appendChild(dateSpan);

 // Highlight today
 const today = new Date();
 if (currentYear === today.getFullYear() && currentMonth === today.getMonth() && day === today.getDate()) {
 cell.classList.add('today');
 }

 // Load events for this date
 loadEvents(cell);

 grid.appendChild(cell);
 }
}

עדכון התצוגה של חודש/שנה בראש: FLT:13

ניווט בין חודשים

רמקולים להאזנה ללחצנים קודמים ולהלן: Increment או decrement (FLT:14, התאמת השנה במידת הצורך (למשל, לאחר דצמבר מגיע לינואר של השנה הבאה).

document.getElementById('prevBtn').addEventListener('click', () => {
 currentMonth--;
 if (currentMonth < 0) {
 currentMonth = 11;
 currentYear--;
 }
 renderCalendar();
});

document.getElementById('nextBtn').addEventListener('click', () => {
 currentMonth++;
 if (currentMonth > 11) {
 currentMonth = 0;
 currentYear++;
 }
 renderCalendar();
});

לתוספת של [[המאה ה-20]], [[1924]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]]]]]], [[1924]]]]]], [[1924]]]]]]]]]], [[1924]]]]]]]]]]

סיקור: Retrieving Events with Local Storage

(ב) ,0) , אחסון משותף של חנות ערכים פשוטה ששרדת את הדפדפן מחדש. השתמש בתבנית מפתח עקבית, למשל, FLT:17, אחסון מאגרי JSON של פריטים.

להציל אירוע חדש

כאשר המשתמש לוחץ על כפתור "Save", ללכוד את ערך הקלט ואת התאריך שנבחר כיום. (אפשר להוסיף מסלק תאריך או לזהות איזה תא יום הוא לחץ.) לשמור על כל האירועים הקיימים עבור אותו תאריך מאחסון מקומי, לדחוף את האירוע החדש, ולאחר מכן לשמור בחזרה.

function saveEvent(dateKey, eventText) {
 const existing = JSON.parse(localStorage.getItem(dateKey)) || [];
 existing.push({ id: Date.now(), text: eventText, time: new Date().toLocaleTimeString() });
 localStorage.setItem(dateKey, JSON.stringify(existing));
 renderCalendar(); // refresh to show new event
}

עקבו אחרי Day Cells

בתוך , עבור כל תא יום לא מרוקן, לקרוא פונקציה כי שאילתות אחסון מקומי עבור מפתח תאריך זה.אם אירועים קיימים, לולאה דרך אותם ותוספת :24 אלמנטים אל התא.

function loadEvents(cell) {
 const dateKey = cell.dataset.date;
 const events = JSON.parse(localStorage.getItem(dateKey));
 if (!events) return;

 events.forEach(evt => {
 const eventDiv = document.createElement('div');
 eventDiv.className = 'event';
 eventDiv.textContent = evt.text;
 eventDiv.dataset.id = evt.id;
 // Optional: add a delete button
 cell.appendChild(eventDiv);
 });
}

אירועים ועריכה

כדי למחוק, לצרף אירוע לחץ לכל רכיב אירוע (או להשתמש במשלחת אירוע) למקם את המערך עבור התאריך הזה, לסינון האירוע על ידי ה-FLT:26 שלה, ולחסוך את המערך המעודכנים בחזרה לאחסון מקומי.עריכה ניתן לעשות על ידי לחיצה כפולה על האירוע, דרישה לטקסט חדש ועדכון המערך.

תכונות מתקדמות לשיפור התפקודיות

לאחר לוח השנה הבסיסי עובד, באפשרותך להוסיף תכונות לשיפור משמעותי חוויית המשתמש.

אירועים צבעוניים לפי סוג

ניתן למשתמשים להקצות קטגוריות (למשל, עבודה, אישי, בריאות) לאחסן שדה (FLT:27 באחסון מקומי.

דרגו-ו-דרופ מתועדים

השתמש ב- HTML5 דרג ו- Drop API כדי להעביר אירועים בין תאי יום.כאשר אירוע יורד ביום אחר, לעדכן את מפתח התאריך באחסון מקומי: להסיר את האירוע ממערך התאריך המקורי שלו ולדחוף אותו למערך התאריך החדש.

אירועים חוזרים (Weekly / Monthly)

הוסף אפשרות "חזרה" בעת שמירת אירוע.בתפקוד הטעינה, לחשב אם התאריך הנוכחי מתאים לחוק ההישנות (למשל, כל יום שני) ולהציג את האירוע בהתאם.

שבוע תצוגה ומיני לוח שנה

בין תצוגות חודש לשבוע מראה מראה רק את ימי השבוע הנוכחי עם שטח אופקי יותר. לוח שנה קטן של תצוגת חודש עוזר למשתמשים לקפוץ במהירות לכל תאריך.

ביצוע לוח השנה אחראי וגישה

בדוק את לוח השנה על גדלים מסך שונים. השתמש ב -30 שאילתות לערעור תאים יום אנכיים על מסכים קטנים מאוד או להפחית ⁇ .להבטיח שכל האלמנטים האינטראקטיביים הם נגישים: נספח FLT:31 אירועים עבור Enter ובריחה. השתמש ב -3.10 תכונות על כפתורים ואזורי חיים עבור קוראי מסך להכריז על שינויים ותוספות אירועים בחודש.

ביצועים וטיפים לניהול נתונים

  • (ב) [התיקון:0] אחסון כתוב ב-[[1924]]: במקום לקרוא/לכתוב את אחסון מקומי לכל פעולה, לטמון את כל אירועי החודש באובייקט JavaScript ובשינויים קשים מדי פעם.
  • (ב) ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (FLT:0 Fallback for Storage LimitsFLT:1: Local Storage הוא בדרך כלל מכווץ ב-5-10 MB. Warn משתמשים כאשר האחסון כמעט מלא.
  • (ב) [ה]: [ה], [ה], [ה], [ה], [ה], [ה], אם לוח השנה שלכם יקיים אלפי אירועים, ראו:2] ב-DBREFLT: 3 עבור ביצועים טובים יותר ויכולות השאילתה.

מסקנה

יצירת אפליקציה לוח שנה מותאם אישית עם JavaScript ו- Local Storage היא פרויקט מתגמל המחדד את כישורי החזית שלך.You לומדת לתמרן את ה- DOM, לעבוד עם תאריכים, לנהל מדינה ללא שרת, ולטפל באינטראקציות של משתמשים.בסיס הקוד ניתן להרחיב עם סנכרון השרת, גיבוי בענן, או שילוב עם לוחות שנה חיצוניים באמצעות לוח השנה של גוגל (FLT:1FLT:1) להתחיל עם בסיס בסיסי, להוסיף שכבה, ולאחר מכן, תכונות מותאמות בדיוק כמו גרור אירועים.

(ב) לקרא נוסף, לחקור את ה-FLT:0) , 000 , 000 , 000 , 000 ⁇ , ו- Drop APIFLT 3: על MDN.