Ecme logoEcme logo
داشبورد
    فروشگاه آنلاین
    پروژه
    بازاریابی
    تحلیل
مفاهیم
    هوش مصنوعی
      گفتگو
      تصویر
    پروژه‌ها
      تابلوی اسکرام
      فهرست
      جزئیات
      وظایف
      مسائل
    مشتریان
      فهرست
      ویرایش
      ایجاد
      جزئیات
    محصولات
      فهرست
      ویرایش
      ایجاد
    سفارش‌ها
      فهرست
      ویرایش
      ایجاد
      جزئیات
    حساب کاربری
      تنظیمات
      سابقه فعالیت
      نقش‌ها و دسترسی‌ها
      تعرفه‌ها
    مرکز راهنمایی
      مرکز پشتیبانی
      مقاله
      ویرایش مقاله
      مدیریت مقاله
    تقویم
    مدیریت فایل
    ایمیل
    گفتگو
اجزای رابط کاربری
    عمومی
      دکمه
      شبکه
      تایپوگرافی
      نمادها
    بازخورد
      هشدار
      پنجره گفتگو
      منوی کشویی
      نوار پیشرفت
      پیش‌نمایش
      نشانگر بارگذاری
      پیام موقت
    نمایش اطلاعات
      تصویر کاربر
      نشانک
      تقویم
      کارت‌ها
      چرخ فلک
      جدول
      برچسب
      خط زمان
      راهنمای ابزار
    فرم‌ها
      چک‌باکس
      انتخابگر تاریخ
      کنترل‌های فرم
      ورودی
      گروه ورودی
      دکمه رادیویی
      بخش
      انتخابگر
      اسلایدر
      سوئیچر
      ورودی زمان
      بارگذاری
    ناوبری
      منوی کشویی
      منو
      صفحه‌بندی
      مراحل
      تب ها
    نمودار
      نمودارها
      نقشه‌ها
احراز هویت
    ورود به سیستم
      ساده
      کناری
      دوبخشی
    ثبت‌نام
      ساده
      کناری
      دوبخشی
    بازیابی رمز عبور
      ساده
      کناری
      دوبخشی
    بازنشانی رمز عبور
      ساده
      کناری
      دوبخشی
    تایید رمز یکبار مصرف
      ساده
      کناری
      دوبخشی
سایر
    دسترسی غیرمجاز
    صفحه فرود
راهنما
    مستندات
    اجزای اشتراکی
    ابزارها
    تاریخچه تغییرات
حق نشر © 2026 Ecme تمامی حقوق محفوظ است.
شرایط و ضوابط | حریم خصوصی و سیاست
اجزاء
اختصار عددلینک عملکارت سازگارپیوستبررسی اختیارنمایش تقویمنمودارپنجره تاییدظرفورودی قالب سفارشیجدول دادهورودی تاخیریتصویر دو رودکمه نقطه چیننمودار گانتمقدار رشد و کاهشمتن آیکونگالری تصاویربارگذاریماسونیاستخلال رسانهتغییر ناوبریورودی عددیورودی OTPورودی رمز عبورورودی الگونقشه منطقهویرایشگر متن غنیگزینه آیتم قطعه پیش‌تنظیمپاورقی چسبندهبرجسته‌سازی دستورگروه آواتار کاربران

نمودار گانت (GanttChart)

این کامپوننت نسخه‌ای گسترش‌یافته از کتابخانه gantt-task-react است. ایده‌آل برای نمایش زمان‌بندی پروژه‌ها، وظایف، و نقاط عطف با گزینه‌های سفارشی‌سازی پیشرفته.

مثال (Example)

مثال استفاده.
 نام
پنجشنبه, 30جمعه, 1شنبه, 2یکشنبه, 3دوشنبه, 4سه‌شنبه, 5چهارشنبه, 6پنجشنبه, 7جمعه, 8شنبه, 9یکشنبه, 10دوشنبه, 11سه‌شنبه, 12چهارشنبه, 13پنجشنبه, 14جمعه, 15شنبه, 16یکشنبه, 17دوشنبه, 18سه‌شنبه, 19چهارشنبه, 20پنجشنبه, 21جمعه, 22شنبه, 23یکشنبه, 24دوشنبه, 25سه‌شنبه, 26چهارشنبه, 27پنجشنبه, 28جمعه, 29شنبه, 30یکشنبه, 31دوشنبه, 1سه‌شنبه, 2چهارشنبه, 3پنجشنبه, 4جمعه, 5شنبه, 6یکشنبه, 7 اردیبهشتخرداد

API

نمودار گانت (GanttChart)
ویژگیتوضیحاتنوعپیش‌فرض
tasksآرایه‌ای از وظایف که در نمودار گانت نمایش داده می‌شوند. هر وظیفه شامل ویژگی‌هایی مانند شناسه، نام، شروع، پایان و پیشرفت است.ExtendedTask[][]
viewModeحالت نمایش نمودار گانت. می‌تواند به ساعت، ربع روز، نیم‌روز، روز، هفته، ماه یا سال تنظیم شود.ViewModeViewMode.Day
extraColumnsآرایه‌ای از اشیاء که ستون‌های اضافی برای نمایش در لیست وظایف را تعریف می‌کنند. هر شیء شامل یک عنوان و یک رندرکننده سلول است.{ header: ExtraHeader; cell: ExtraCell }[][]
colorsMapنقشه‌ای از رنگ‌های سفارشی برای انواع وظایف یا وظایف خاص. این ویژگی امکان سبک‌دهی پویا را بر اساس نوع وظیفه یا پروژه فراهم می‌کند.Object{string, string}{}
showArrowیک پرچم برای تعیین نمایش یا عدم نمایش پیکان‌های وابستگی بین وظایف. وقتی false باشد، پیکان‌ها مخفی می‌شوند.booleantrue
headerHeightارتفاع سربرگ در نمودار گانت، بر حسب پیکسل.number50
columnWidthعرض هر ستون در نمودار گانت، بر حسب پیکسل.number65
rowHeightارتفاع هر سطر در نمودار گانت، بر حسب پیکسل.number50
barCornerRadiusشعاع گوشه‌های میله‌های وظایف در نمودار گانت.number6
TaskListHeaderکامپوننت سربرگ سفارشی برای لیست وظایف. امکان افزودن سربرگ‌های اضافی تعریف‌شده در extraColumns را فراهم می‌کند.{ headerHeight: number; rowWidth: string; fontFamily: string; fontSize: string; }TaskListHeader
TaskListTableکامپوننت جدول سفارشی برای لیست وظایف که امکان افزودن سلول‌های اضافی تعریف‌شده در extraColumns را فراهم می‌کند.{ rowHeight: number; rowWidth: string; fontFamily: string; fontSize: string; locale: string; tasks: Task[]; selectedTaskId: string; setSelectedTask: (taskId: string) => void; onExpanderClick: (task: Task) => void; }TaskListTable
TooltipContentکامپوننت راهنمای سفارشی برای نمایش جزئیات وظایف.{ task: Task; fontSize: string; fontFamily: string; }TooltipContent
todayColorرنگی که برای برجسته‌کردن روز جاری در نمودار گانت استفاده می‌شود.stringurl(#horzLines)
arrowColorرنگ پیکان‌های وابستگی بین وظایف.string#3380fa
onSelectتابعی که هنگام انتخاب یا عدم انتخاب یک وظیفه فراخوانی می‌شود.(task: Task, isSelected: boolean) => voidundefined
onDoubleClickتابعی که هنگام دوبار کلیک روی یک وظیفه فراخوانی می‌شود.(task: Task) => voidundefined
onClickتابعی که هنگام کلیک روی یک وظیفه فراخوانی می‌شود.(task: Task) => voidundefined
onDateChangeتابعی که هنگام تغییر تاریخ شروع یا پایان وظیفه فراخوانی می‌شود. بازگرداندن false یا خطا عملیات را لغو می‌کند.(task: Task, children: Task[]) => void | boolean | Promise | Promiseundefined
onProgressChangeتابعی که هنگام تغییر پیشرفت وظیفه فراخوانی می‌شود. بازگرداندن false یا خطا عملیات را لغو می‌کند.(task: Task, children: Task[]) => void | boolean | Promise | Promiseundefined
onDeleteتابعی که هنگام حذف یک وظیفه فراخوانی می‌شود. بازگرداندن false یا خطا عملیات را لغو می‌کند.(task: Task) => void | boolean | Promise | Promiseundefined
onExpanderClickتابعی که هنگام کلیک روی آیکون بازکننده در لیست وظایف فراخوانی می‌شود.(task: Task) => voidundefined

وابستگی‌ها

gantt-task-react

شما می‌توانید تمام ویژگی‌های موجود را در اینجا پیدا کنید gantt-task-react

فهرست مطالب
  • مثال (Example)