إن بناء تطبيق جدول زمني معتاد هو طريقة ممتازة لتعميق فهمكم لـ جافاسكيبت، ونموذج ملامح وثائق المصفح، واستمرار البيانات من جانب العملاء، وباعتماد نظام رصد الأداء على الشبكة العالمية - وتحديدا التخزين المحلي - يمكن أن تخلق تقويما عمليا تماما، موجها نحو الأحداث، يجري بصورة كاملة في بروزر دون الحاجة إلى خادم خلفي أو قاعدة بيانات، وهذا التدريب يسير على نحو متقدم.

لماذا بنيت جدولاً للزبائن؟

وتوفر المكتبات التقويمية السابقة للبناء (مثلاً مكتبة فولكالندر أو داي بيلوت) حلولاً سريعة، ولكن بناء مكتب واحد من الصفر يمنحك السيطرة الكاملة على واجهة المستعملين، ومناولة البيانات، والأداء، كما تحصل على خبرة عملية في المفاهيم الأساسية لـ " جافاسكريبيت " مثل موضوع ]، ووفد المناسبات، و].

إنشاء هيكل 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>

وسيشغل جافاسكريبيه ديمومة ، وسينظر في استخدام شبكة من خدمات الدعم المركزية تبلغ مساحتها 7 كغمات (واحدة لكل يوم من أيام الأسبوع) في وضع الصف الأول للأسماء النهارية (سون - سات).

صفع الجدول مع CSS

(ج) تحويل السائل المنسّق النظيف والمستجيب للجهاز إلى واجهة قابلة للاستخدام، واستخدام مقياس البرمجيات المكلّفة بالشبكة التقويمية، ووضع [(FLT:5]) إضافة أجهزة فضائية لأيام قبل أول الشهر، ولكفالة الاختلاف الكافي لللون، وإدراج أساليب [() على عناصر تفاعلية، ويرد أدناه جدول أدنى للنموذج (خط أو الارتباط).

.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: Generating the Calendar Grid

(أ) تُحسب المهمة المركزية في اليوم الأول من الشهر وفي العدد الإجمالي للأيام، وتستخدم للحصول على الرقم القياسي للأسبوع (0 = الأحد)، ثم تُولد خلايا في حلقة من 1 إلى آخر يوم من الشهر.

العمل مع الهدف التاريخي

الهدف هو العمود الفقري للمنطق التقويمي، ولإتمام آخر يوم من الشهر، استخدام (يعطي اليوم صفر من الشهر المقبل آخر يوم من الشهر الحالي).

بناء الجريم

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);
 }
}

Update the month/year display in the header: ]

الملاحة بين الشهر

- القيام، بعد ذلك، بتصحيح السنة إذا لزم الأمر (مثلاً، بعد كانون الأول/ديسمبر من كانون الثاني/يناير من العام المقبل)، وبعد استكمال المتغيرات، الاتصال مرة أخرى.

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();
});

For extra usability, add a Today blue that resets the view to the current month and highlights the current day.

أحداث التخزين والاسترجاع مع التخزين المحلي

Local Storage] provides a simple key-value store that survives browser restarts. Use a consistent key pattern, e.g., , storing JSON arrays of event objects. Include properties like , , [20]

إنقاذ حدث جديد

وعندما يضغط المستخدم زر " الإنقاذ " ، يلتقط قيمة المدخلات والموعد الذي يتم اختياره حاليا. )يمكنك إضافة ملتقط أو اكتشاف أي خلية يومية تُقرع(.

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
}

أحداث الدفن في خلايا النهار

Inside , for each non-empty day cell, call a function that queries Local Storage for that date key. If events exist, ring through them and append ]] elements to the cell.

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);
 });
}

أحداث التسريح والتحرير

(ب) حذف كلمة " نقر " لكل عنصر من عناصر المناسبات (أو وفد من الوفود المعنية بالاستخدام) واسترجاع الصفيفة لذلك التاريخ، وتصفية الحدث من قبل ، وإنقاذ المجموعة المستكملة من التخزين المحلي، ويمكن إجراء التحرير بتعليق الحدث مرتين، مما يدفع إلى النص الجديد، وتحديث الصفيفة.

الترشيحات المتقدمة لتعزيز الأداء

بمجرد أن يعمل الجدول الأساسي، يمكنك إضافة سمات تحسن بشكل كبير من خبرة المستخدمين.

أحداث مُحدّدة حسب النوع

(د) السماح للمستعملين بإحالة فئات (مثل العمل، والشخصية، والصحة) - تخزين حقل في التخزين المحلي، وفي مركز خدمات الدعم المركزية، يحدد فئات مثل ، ويطبقونها ديناميا.

Drag —and-Drop Rescheduling

استخدام جهاز السحب والسحب الآلي HTML5 لنقل الأحداث بين الزنزانات النهارية، وعندما يسقط الحدث في يوم آخر، يستكمل مفتاح التاريخ في التخزين المحلي: إزالة الحدث من صفيفة تاريخه الأصلي ودفعه إلى صفيفة التاريخ الجديد.

الأحداث المتكررة (أسبوعيا/شهريا)

يضاف خيار " تكرار " عند توفير حدث ما، وفي وظيفة التحميل، يحسب إذا كان التاريخ الحالي يطابق قاعدة التكرار )مثل كل يوم الاثنين( ويعرض الحدث تبعا لذلك، ويخزن قواعد التكرار في مفتاح تخزين محلي منفصل لتجنب الازدواجية.

الأسبوع فيو وكاليندر ميني

فالنظرة الأسبوعية لا تبين إلا أيام الأسبوع الحالية التي تنطوي على حيز أفقي أكبر، كما أن الجدول الزمني الصغير الذي يغطي الشهر يساعد المستعملين على القفز إلى أي وقت بسرعة.

جعل الجدول مستجيباً ومتاحاً

اختبار الجدول الزمني على مختلف أحجام الشاشة: استخدام الاستفسارات لتقويم الخلايا النهارية رأسياً على شاشات صغيرة جداً أو لتقليل الرصفة. وضمان أن تكون جميع العناصر التفاعلية متاحة من حيث الوصل: (]]) للحدث الخاص بالمدخل والهرب.

الأداء وإدارة البيانات

  • ]]Batched Storage Writes: بدلا من القراءة/كتابة التخزين المحلي لكل عملية من عمليات الأحداث، يُحدِث أحداث الشهر بأكمله في جسم من طراز JavaScript ويُحدث تغيرات مُفاجئة دوريا.
  • Limit Event Size]: إبقاء الأجسام المؤثرة في الأحداث صغيرة.
  • Fallback for Storage Limits: عادة ما يُوضع التخزين المحلي في 5-10 MB. Warn users when storage is nearly full.
  • Use IndexedDB for Large Datasets]: If your timetable will hold thousands of events, consider ]IndexedDB for better performance and querying capabilities.

خاتمة

إنشاء نظام تقويمي مع شركة جافاسكوريبت وشركة التخزين المحلية هو مشروع مكافئ يُزيد من مهاراتك في المقدمة، وتتعلم التلاعب بآلية إدارة الشؤون الإدارية، والعمل مع التواريخ، وإدارة الدولة بدون خادم، والتعامل مع تفاعلات المستخدمين، ويمكن توسيع قاعدة البيانات بمزامنة الشبكة، أو السحب الاحتياطي، أو التكامل مع التقويمات الخارجية عن طريق

For further reading, explore the Storage API documentation and the ]Drag and drop API] on MDN. happy coding!