ساخت یک برنامه تقویم سفارشی یک راه عالی برای تعمیق درک خود از جاوا اسکریپت، مدل Object Document مرورگر (DOM)، و پایداری داده های مشتری است.با استفاده از API ذخیره سازی وب - به ویژه ذخیره سازی محلی - شما می توانید یک تقویم کاملا کاربردی و رویداد محور ایجاد کنید که به طور کامل در مرورگر بدون نیاز به سرور یا پایگاه داده اجرا می شود.

چرا یک تقویم سفارشی بسازید؟

کتابخانه های تقویم پیش ساخته شده (مانند FullCalendar یا DayPilot) راه حل های سریعی ارائه می دهند، اما ساخت یکی از ابتدا به شما کنترل کامل رابط کاربری، مدیریت داده ها و عملکرد کاربر را می دهد، شما همچنین تجربه دستی را با مفاهیم اصلی جاوا اسکریپت مانند 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>

به طور پویا توسط جاوا اسکریپت جمعیت خواهد شد.برای یک طرح تلفن همراه دوستانه، در نظر گرفتن استفاده از یک شبکه 7 ستون CSS (یکی برای هر روز از هفته) اولین ردیف برای نام روز (Sun-Sat).

⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

CSS تمیز و پاسخگو HTML خام را به یک رابط کاربری قابل استفاده تبدیل می کند.از یک CSS Grid برای شبکه تقویم استفاده می کند، تنظیم (FLT:5) فضاساز را برای روزها قبل از اولین ماه اضافه می کند.برای دسترسی، اطمینان از کنتراست رنگی کافی و شامل (FLT:6 سبک در عناصر تعاملی نشان داده می شود.

.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: ایجاد شبکه تقویم

تمام رندرهای پویا در جاوا اسکریپت زندگی می کنند. تابع مرکزی، ، روز اول ماه و تعداد کل روز استفاده از برای دریافت شاخص هفتگی (0 = یکشنبه) سپس تولید سلول در حلقه از 1 تا آخرین روز ماه.

کار با تاریخ شی

جسم ستون فقرات منطق تقویم است.برای دریافت آخرین روز از یک ماه، استفاده از [FLT 11] (روز 0 ماه بعد آخرین روز ماه جاری را به روز می دهد).

ساخت Grid

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]

ناوبری بین ماه ها

همچنین بخوانید : شنوندگان رویداد را به دکمه های قبلی و بعدی وارد کنید.آشکار یا تخریب (FLT:14) ، تنظیم سال در صورت نیاز (به عنوان مثال ، بعد از دسامبر تا ژانویه سال بعد) بعد از به روز رسانی متغیرها ، تماس بگیرید (FLT:15 دوباره).

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

برای استفاده بیشتر، اضافه کردن یک امروز دکمه که تنظیم مجدد دیدگاه به ماه جاری و برجسته روز جاری است.

دانلود بازی Storing & Retrieving Events with Local Storage

[[۱] [۱۰] [[۱]] [[۱]]] [[۱]]] [[۱]]] [۱]] [[۳]]] [۱]] [۱] [۱۰] [۱]] [۱]] [۳] [۳]] [۳] [۳] [FLT: ۱] و [۳] [۳] [۳] [۳] [۳]

نجات یک رویداد جدید

هنگامی که کاربر روی دکمه “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

در داخل برای هر سلول غیر خالی روزانه، یک تابع را فراخوانی کنید که ذخیره سازی محلی را برای آن کلید تاریخ جستجو می کند، اگر رویدادها وجود داشته باشند، از طریق آنها حلقه بزنید و عناصر به سلول.

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]، و ذخیره آرایه به روز شده به ذخیره سازی محلی می تواند با دو کلیک کردن رویداد، بارگذاری برای متن جدید، و به روز رسانی آرایه انجام شود.

ویژگی های پیشرفته برای ارتقاء عملکرد

هنگامی که تقویم پایه کار می کند، می توانید ویژگی هایی را اضافه کنید که به طور قابل توجهی تجربه کاربر را بهبود می بخشد.

رویدادهای رنگی توسط Type

اجازه دهید کاربران برای اختصاص دسته (به عنوان مثال، کار، شخصی، سلامت) یک فیلد [FLT 27] در ذخیره سازی محلی، تعریف کلاس هایی مانند ، [FLT 29] و اعمال آنها به صورت پویا.

فشار دادن به جلو و Drop

از HTML5 کشیدن و Drop API برای حرکت رویدادها بین سلول های روزانه استفاده کنید، زمانی که یک رویداد در روز مختلف کاهش می یابد، کلید تاریخ را در ذخیره سازی محلی به روز کنید: رویداد را از آرایه تاریخ اصلی خود حذف کنید و آن را به آرایه تاریخ جدید فشار دهید.

بازگشت به حوادث (Weekly / ماهانه)

گزینه “Repeat” را هنگام صرفه جویی در یک رویداد اضافه کنید.در تابع بارگذاری، محاسبه کنید که آیا تاریخ فعلی مطابق با قانون عود (به عنوان مثال، هر دوشنبه) است و این رویداد را بر اساس آن نشان می دهد.بازگردان قوانین برگشت در یک کلید جداگانه ذخیره سازی محلی برای جلوگیری از تکرار.

دانلود بازی View and Mini Calendar

بین ماه و هفته نظرات نشان می دهد که تنها روزهای فعلی هفته با فضای افقی بیشتر است.یک تقویم کوچک در ماه به کاربران کمک می کند تا به سرعت به هر تاریخ پرش کنند.

ساخت دستور العمل تقویم و دسترسی

تقویم را در اندازه های مختلف صفحه نمایش تست کنید.استفاده از پرس و جو برای قرار دادن سلول های روزانه به صورت عمودی بر روی صفحه نمایش بسیار کوچک یا کاهش padding.اطمینان حاصل کنید که تمام عناصر تعاملی قابل دسترسی هستند: پیوست (FLT 31) رویدادها برای ورود و فرار. ویژگی های روی دکمه ها و مناطق زنده برای خوانندگان صفحه نمایش برای اعلام تغییرات ماه و اضافه شدن رویداد.

ویژگی های Performance and Data Management Tips

  • ذخیره سازی ذخیره سازی : به جای خواندن / نوشتن ذخیره سازی محلی برای هر عملیات رویداد، تمام رویدادهای ماه را در یک شی جاوا اسکریپت ذخیره کنید و تغییرات را به صورت دوره ای از بین ببرید.
  • اندازه رویداد Limit : اشیاء رویداد را کوچک نگه دارید، از ذخیره رشته های بزرگ یا داده های باینری اجتناب کنید.
  • [FLT: 1 ] [FLT: ذخیره سازی محلی به طور معمول در 5 تا 10 مگابایت ذخیره سازی شده است. کاربران Warn زمانی که ذخیره سازی تقریبا کامل است.
  • استفاده از شاخصDB برای داده های بزرگ ؛ اگر تقویم شما هزاران رویداد را در نظر بگیرید IndexedDB برای عملکرد بهتر و قابلیت های جستجو.

نتیجه گیری

ایجاد یک برنامه تقویم سفارشی با جاوا اسکریپت و ذخیره سازی محلی یک پروژه با ارزش است که مهارت های front-end شما یاد می گیرید که DOM را دستکاری کنید، کار با تاریخ، مدیریت دولت بدون سرور و رسیدگی به تعاملات کاربر، کد پایه می تواند با سرور، همگام سازی ابر، یا ادغام با تقویم های خارجی از طریق تقویم تقویم تقویم گوگل] گسترش یابد و دقیقاً به ویژگی های شبکه ای که می توانید آن اضافه کنید، و سپس به آن نیاز دارید، و ادامه دادن آن را با توجه کنید، و ادامه دادن ویژگی های لایه های لایه های لایه ای مانند اتصال، و سپس ادامه دادن آن، و ادامه دادن آن، و سپس اضافه کردن آن، و ادامه دادن آن را به آن، و ادامه دادن آن، و ادامه دادن آن، و ادامه دادن آن، و سپس اضافه کردن آن، و ادامه دادن آن را به آن، و ادامه دادن آن، و ادامه دادن آن، و ادامه دادن آن، پشتیبان گیری.

برای مطالعه بیشتر، بررسی مستندات API (FLT:0) و Drag و Drop API] در برنامه نویسی خوشحال MDN!