تخصيص ألوان أحداث تقويم React Big Calendar

إن إضافة تلوين لأحداث التقويم في React Big Calendar يعتبر أمرًا هامًا لتمييز بين فئات الأحداث المختلفة. في هذا السياق، سأشرح لك كيفية تحقيق هذا الهدف باستخدام مكتبة React Big Calendar.

أولاً وقبل البدء في تغيير ألوان الأحداث، يجب عليك تحديد فئات الأحداث وتعيين لون لكل فئة. يمكنك تخزين هذه المعلومات في كائن يرتبط بكل فئة. على سبيل المثال، يمكن أن يكون لديك كائن يشبه هذا:

jsxCopy code
const eventCategories = {
  category1: '#FF5733',
  category2: '#33FF57',
  category3: '#5733FF',
  // ... إلخ
};

حيث يُمثل كل مفتاح في الكائن اسم الفئة، وقيمته هي لون الفئة.

ثم يمكنك استخدام دالة eventStyleGetter المقدمة من React Big Calendar لتحديد أسلوب الأحداث. يمكنك تمرير هذه الدالة كخاصية إلى واستخدامها لتعيين الألوان بناءً على فئات الأحداث.

jsxCopy code
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

const localizer = momentLocalizer(moment);

const MyCalendar = (props) => {
  const eventCategories = {
    category1: '#FF5733',
    category2: '#33FF57',
    category3: '#5733FF',
    // ... إلخ
  };

  const eventStyleGetter = (event, start, end, isSelected) => {
    const backgroundColor = eventCategories[event.category];
    const style = {
      backgroundColor,
      borderRadius: '5px',
      opacity: 0.8,
      color: 'white',
      border: '0',
      display: 'block',
    };
    return {
      style,
    };
  };

  const events = [
    {
      title: 'Event 1',
      start: new Date(),
      end: new Date(),
      category: 'category1',
    },
    {
      title: 'Event 2',
      start: new Date(),
      end: new Date(),
      category: 'category2',
    },
    // ... إلخ
  ];

  return (
    <div>
      <Calendar
        localizer={localizer}
        events={events}
        startAccessor="start"
        endAccessor="end"
        eventPropGetter={eventStyleGetter}
      />
    div>
  );
};

export default MyCalendar;

في هذا المثال، يتم تعيين ألوان الأحداث باستخدام الدالة eventStyleGetter حيث تستخدم قيمة category في كل حدث لاسترجاع اللون المناسب من كائن eventCategories. يمكنك تكرار هذه العملية لكل فئة تريد تحديد لونها.

يمكنك تكييف هذا الكود حسب احتياجاتك وتوسيعه لتشمل المزيد من الفئات والتعديلات التي قد تحتاجها لتحقيق المظهر الذي ترغب فيه.

بالطبع، يمكننا توسيع المحتوى ليشمل المزيد من المعلومات حول تخصيص تلوين أحداث تقويم React Big Calendar بشكل أفضل.

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

jsxCopy code
const MyCalendar = (props) => {
  const eventCategories = {
    category1: { color: '#FF5733', label: 'مهمة' },
    category2: { color: '#33FF57', label: 'اجتماع' },
    category3: { color: '#5733FF', label: 'موعد' },
    // ... إلخ
  };

  const eventStyleGetter = (event, start, end, isSelected) => {
    const categoryInfo = eventCategories[event.category];
    const backgroundColor = categoryInfo.color;
    const style = {
      backgroundColor,
      borderRadius: '5px',
      opacity: 0.8,
      color: 'white',
      border: '0',
      display: 'block',
    };
    return {
      style,
    };
  };

  const events = [
    {
      title: 'اجتماع مهم',
      start: new Date(),
      end: new Date(),
      category: 'category1',
    },
    {
      title: 'تقديم تقرير',
      start: new Date(),
      end: new Date(),
      category: 'category2',
    },
    // ... إلخ
  ];

  return (
    <div>
      <Calendar
        localizer={localizer}
        events={events}
        startAccessor="start"
        endAccessor="end"
        eventPropGetter={eventStyleGetter}
      />
      <div style={{ marginTop: '20px' }}>
        {Object.keys(eventCategories).map((category) => (
          <span
            key={category}
            style={{
              display: 'inline-block',
              marginRight: '10px',
              fontWeight: 'bold',
              color: eventCategories[category].color,
            }}
          >
            {eventCategories[category].label}
          span>
        ))}
      div>
    div>
  );
};

export default MyCalendar;

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

استمر في تكامل الأفكار وتخصيص التجربة لتلبية احتياجاتك الخاصة وتحسين تواصل المستخدم مع التقويم الخاص بك.