دموهای آماده 10

مرکز اعلان‌ها

همه اعلان‌ها خوانده شد
مشاهده تمام اعلان‌ها

تقویم شمسی

کل قالب با تقویم شمسی کار می‌کند: تاریخ‌ها، اعداد و نام ماه‌ها فارسی هستند و می‌توانید در هر لحظه به میلادی سوئیچ کنید.

تبدیل تاریخ

import { toJalali, toGregorian, parts, formatDate, relativeTime, monthLabel, weekdayLabels } from './js/core/jalali.js';

toJalali(new Date('2026-09-22'));   // { jy: 1405, jm: 6, jd: 31 }
toGregorian(1405, 6, 31);           // Date
parts('2026-09-22');                // اجزای تاریخ در تقویم فعال

تبدیل‌ها روی کتابخانه jalaali-js انجام می‌شوند (نام‌های صادرشده ESM هستند؛ import پیش‌فرض کار نمی‌کند).

قالب‌بندی

formatDate('2026-09-22');                       // ۳۱ شهریور ۱۴۰۵
formatDate('2026-09-22', { format: 'long' });    // ۳۱ شهریور ۱۴۰۵
formatDate('2026-09-22', { format: 'medium' });
formatDate('2026-09-22', { format: 'time' });    // ۱۴:۳۰
formatDate('2026-09-22', { format: 'datetime' });
formatDate('2026-09-22', { system: 'gregorian' }); // 22 September 2026
relativeTime('2026-09-20');                     // ۲ روز پیش

تقویم برنامه (Calendar app)

صفحه apps/calendar.html چهار نما دارد: ماه، هفته، روز و فهرست.

<div class="calendar-shell" data-calendar data-calendar-view="month" data-calendar-resource="calendar"></div>
ویژگیکار
data-calendar-viewنمای اولیه: month \week \day \agenda
data-calendar-resourceنام منبع در لایه سرویس
data-calendar-miniتقویم کوچک کنار صفحه

قابلیت‌ها:

  • کشیدن‌و‌رها کردن رویداد به روز دیگر (تغییر تاریخ با یک حرکت)
  • ساخت رویداد با کلیک روی روز، ویرایش و حذف با تأیید
  • دسته‌بندی رنگی رویدادها (کاری، شخصی، جلسه، یادآوری)
  • کلید تغییر تقویم: data-customizer="calendar" یا theme.set('calendar', 'gregorian')
  • رویدادها در localStorage نگه‌داری می‌شوند تا رفت‌و‌برگشت بین صفحات حفظ شود

تقویم شمسی در جدول‌ها و نمودارها

ستون‌های تاریخ در جدول‌های داده با type: 'date' یا type: 'relative' قالب‌بندی می‌شوند و از محور تقویم فعلی پیروی می‌کنند:

{ key: 'createdAt', label: 'تاریخ ثبت', type: 'date', sortable: true }

تعطیلات رسمی

فهرست تعطیلات در src/js/core/jalali.js (ثابت JALALI_HOLIDAYS) قرار دارد و در تقویم با رنگ متفاوت نمایش داده می‌شود. برای سال جدید فقط آرایه را به‌روز کنید.

نکته: نمایش ارقام در تقویم همیشه فارسی است، اما محاسبات با اعداد لاتین انجام می‌شود

برای تبدیل نمایشی از toDigits و برای محاسبه از toLatinDigits استفاده کنید.

هشدار: هرگز با new Date('۱۴۰۵/۰۶/۳۱') کار نکنید؛ ورودی تاریخ را همیشه میلادی (ISO) نگه دارید و فقط برای نمایش تبدیل کنید

Jalali calendar

The whole template works with the Jalali (Solar Hijri) calendar: dates, numbers and month names are localized, and you can switch to Gregorian at any time.

Date conversion

import { toJalali, toGregorian, parts, formatDate, relativeTime, monthLabel, weekdayLabels } from './js/core/jalali.js';

toJalali(new Date('2026-09-22'));   // { jy: 1405, jm: 6, jd: 31 }
toGregorian(1405, 6, 31);           // Date
parts('2026-09-22');                // date parts in the active calendar

Conversions are done with the jalaali-js library (exports are ESM named exports; a default import does not work).

Formatting

formatDate('2026-09-22');                       // 31 Shahrivar 1405
formatDate('2026-09-22', { format: 'long' });    // 31 Shahrivar 1405
formatDate('2026-09-22', { format: 'medium' });
formatDate('2026-09-22', { format: 'time' });    // 14:30
formatDate('2026-09-22', { format: 'datetime' });
formatDate('2026-09-22', { system: 'gregorian' }); // 22 September 2026
relativeTime('2026-09-20');                     // 2 days ago

Calendar app

The apps/calendar.html page has four views: month, week, day and agenda.

<div class="calendar-shell" data-calendar data-calendar-view="month" data-calendar-resource="calendar"></div>
AttributePurpose
data-calendar-viewInitial view: month \week \day \agenda
data-calendar-resourceResource name in the service layer
data-calendar-miniSmall side calendar

Features:

  • Drag and drop an event onto another day (reschedule in one move)
  • Create an event by clicking a day; edit, and delete with confirmation
  • Colour-coded event categories (work, personal, meeting, reminder)
  • Calendar switch key: data-customizer="calendar" or theme.set('calendar', 'gregorian')
  • Events are kept in localStorage so they survive navigating between pages

Jalali calendar in tables and charts

Date columns in data tables are formatted with type: 'date' or type: 'relative' and follow the current calendar axis:

{ key: 'createdAt', label: 'تاریخ ثبت', type: 'date', sortable: true }

Public holidays

The holiday list lives in src/js/core/jalali.js (the JALALI_HOLIDAYS constant) and is shown in a different colour in the calendar. For a new year, just update the array.

Tip: displayed digits follow the active language (Persian, Arabic or Latin), but calculations are always done with Latin digits

Use toDigits for display conversion and toLatinDigits for calculations.

Warning: never work with new Date('۱۴۰۵/۰۶/۳۱'); always keep date input in Gregorian (ISO) and convert only for display

التقويم الهجري الشمسي

يعمل القالب بأكمله بالتقويم الهجري الشمسي (الجلالي): التواريخ والأرقام وأسماء الأشهر مترجمة، ويمكنك التبديل إلى الميلادي في أي لحظة.

تحويل التاريخ

import { toJalali, toGregorian, parts, formatDate, relativeTime, monthLabel, weekdayLabels } from './js/core/jalali.js';

toJalali(new Date('2026-09-22'));   // { jy: 1405, jm: 6, jd: 31 }
toGregorian(1405, 6, 31);           // Date
parts('2026-09-22');                // أجزاء التاريخ في التقويم النشط

تتم التحويلات بمكتبة jalaali-js (الأسماء المصدَّرة من نوع ESM المسماة؛ ولا يعمل الاستيراد الافتراضي).

التنسيق

formatDate('2026-09-22');                       // ٣١ شهريور ١٤٠٥
formatDate('2026-09-22', { format: 'long' });    // ٣١ شهريور ١٤٠٥
formatDate('2026-09-22', { format: 'medium' });
formatDate('2026-09-22', { format: 'time' });    // ١٤:٣٠
formatDate('2026-09-22', { format: 'datetime' });
formatDate('2026-09-22', { system: 'gregorian' }); // 22 September 2026
relativeTime('2026-09-20');                     // قبل يومين

تطبيق التقويم (Calendar app)

تحتوي الصفحة apps/calendar.html على أربعة أنماط عرض: الشهر والأسبوع واليوم والقائمة.

<div class="calendar-shell" data-calendar data-calendar-view="month" data-calendar-resource="calendar"></div>
السمةالوظيفة
data-calendar-viewالعرض الأولي: month \week \day \agenda
data-calendar-resourceاسم المورد في طبقة الخدمات
data-calendar-miniتقويم صغير بجانب الصفحة

الإمكانات:

  • سحب حدث وإفلاته في يوم آخر (تغيير التاريخ بحركة واحدة)
  • إنشاء حدث بالنقر على اليوم، والتعديل والحذف مع التأكيد
  • تصنيف الأحداث بالألوان (عمل، شخصي، اجتماع، تذكير)
  • مفتاح تبديل التقويم: data-customizer="calendar" أو theme.set('calendar', 'gregorian')
  • تُحفظ الأحداث في localStorage لتبقى عند التنقل بين الصفحات

التقويم الهجري الشمسي في الجداول والمخططات

تُنسَّق أعمدة التاريخ في جداول البيانات بـ type: 'date' أو type: 'relative' وتتبع محور التقويم الحالي:

{ key: 'createdAt', label: 'تاریخ ثبت', type: 'date', sortable: true }

العطل الرسمية

توجد قائمة العطل في src/js/core/jalali.js (الثابت JALALI_HOLIDAYS) وتُعرض بلون مختلف في التقويم. لسنة جديدة يكفي تحديث المصفوفة.

ملاحظة: تتبع الأرقام المعروضة اللغة النشطة (فارسية أو عربية أو لاتينية)، لكن الحسابات تتم دائماً بالأرقام اللاتينية

استخدم toDigits للتحويل عند العرض وtoLatinDigits للحساب.

تحذير: لا تعمل أبداً بـ new Date('۱۴۰۵/۰۶/۳۱')؛ احتفظ دائماً بمدخلات التاريخ ميلادية (ISO) وحوّلها للعرض فقط