تقویم شمسی با گزارش روزانه

این پروژه یک تقویم شمسی تحت وب است که با استفاده از کتابخانه‌های Moment.js و Moment-Jalaali ساخته شده و امکان نمایش گزارش روزانه را فراهم می‌کند.

ویژگی‌ها

• نمایش تقویم شمسی با قابلیت جابجایی بین ماه‌ها
• نمایش روزهای هفته به زبان فارسی
• هایلایت کردن روز جاری و روز انتخاب‌شده
• نمایش گزارش روزانه با امکان تشخیص روزهایی که گزارش ثبت شده یا نشده است
• واکنش‌گرا و قابل استفاده در دستگاه‌های مختلف

پیش‌نیازها

این پروژه از کتابخانه‌ها و فریمورک‌های زیر استفاده می‌کند:

• Bootstrap 4.6.0
• jQuery 3.6.0
• Moment.js 2.29.1
• Moment-Jalaali 0.9.2

تمامی این کتابخانه‌ها از طریق CDN در کد بارگذاری شده‌اند.

نحوه استفاده

1. دانلود یا کپی کد: فایل HTML موجود را دانلود یا کپی کنید.

2. اجرای فایل HTML: فایل را در مرورگر وب خود باز کنید. نیازی به سرور محلی یا اینترنت نیست، مگر برای بارگذاری کتابخانه‌ها از CDN.

3. استفاده از تقویم:

   • با کلیک روی دکمه‌های ماه قبل و ماه بعد می‌توانید بین ماه‌ها جابجا شوید.
   • با کلیک روی بازگشت به امروز به ماه و روز جاری برمی‌گردید.
   • با کلیک روی هر روز، وضعیت گزارش آن روز نمایش داده می‌شود.

ساختار کد

HTML

• ساختار اصلی تقویم در یک <div> با کلاس calendar قرار دارد.
• سرصفحه تقویم شامل دکمه‌های ناوبری ماه‌ها و نمایش ماه جاری است.
• روزهای هفته در بخش weekdays نمایش داده می‌شوند.
• روزهای ماه در بخش days به صورت داینامیک توسط JavaScript تولید و نمایش داده می‌شوند.

CSS

• استایل‌دهی سفارشی برای تقویم جهت بهبود ظاهر و تجربه کاربری.
• استفاده از کلاس‌های Bootstrap برای استایل‌های پایه.

JavaScript

• استفاده از Moment.js و Moment-Jalaali برای کار با تاریخ‌های شمسی.
• تولید داینامیک روزهای ماه با توجه به ماه انتخاب‌شده.
• آرایه reportsJSON برای ذخیره وضعیت گزارش هر روز (ثبت شده یا نشده).
• افزودن رویدادهای کلیک برای روزها جهت نمایش جزئیات گزارش.

سفارشی‌سازی

• به‌روزرسانی گزارش‌ها: می‌توانید آرایه reportsJSON را با داده‌های خود جایگزین کنید.

  const reportsJSON = [
      {"date": "1403-07-01", "registered": true},
      {"date": "1403-07-02", "registered": false},
      // گزارش‌های بیشتر...
  ];

• تغییر استایل‌ها: با ویرایش بخش <style> در کد HTML می‌توانید ظاهر تقویم را تغییر دهید.
• افزودن قابلیت‌ها: می‌توانید با افزودن کد JavaScript، ویژگی‌های جدیدی مانند رویدادها یا یادآوری‌ها را اضافه کنید.

نکات

• اتصال به اینترنت: برای بارگذاری کتابخانه‌ها از CDN، نیاز به اتصال اینترنت است. در صورت عدم دسترسی، می‌توانید کتابخانه‌ها را به صورت محلی دانلود و در پروژه استفاده کنید.
• سازگاری مرورگرها: این پروژه با مرورگرهای مدرن سازگار است. اطمینان حاصل کنید که از مرورگرهای به‌روز استفاده می‌کنید.
• فرمت تاریخ‌ها: تاریخ‌ها بر اساس تقویم جلالی و با فرمت jYYYY-jMM-jDD تنظیم شده‌اند.

پیش‌نمایش

مشارکت

اگر تمایل به بهبود این پروژه دارید، می‌توانید کد را Fork کرده و Pull Request ارسال کنید.

مجوز

این پروژه تحت مجوز MIT منتشر شده است.