Skip to content

Latest commit

 

History

History
167 lines (127 loc) · 5.79 KB

README-ar.md

File metadata and controls

167 lines (127 loc) · 5.79 KB

التقويم الكبير لرياكت

تم بناء مكون تقويم الفعاليات هذا لرياكت وتصميمه للمتصفحات الحديثة (والتي لا تحظى بدعم كامل من قبل المتصفحات القديمة، خصوصًا متصفح الانترنت)، ويستخدم Flexbox بدلاً من الطريقة التقليدية باستخدام الجداول.

Big Calendar Demo Image

عرض التجربة والمستندات

مستوحى من Full Calendar.

الاستخدام والإعداد

yarn add react-big-calendar أو npm install --save react-big-calendar

قم بتضمين react-big-calendar/lib/css/react-big-calendar.css للأنماط، وتأكد من أن عنصر حاوية التقويم لديك له ارتفاع، أو لن يظهر التقويم. لتوفير تصميم مخصص خاص بك، انظر إلى التصميم المخصص.

البدء

تشغيل الأمثلة محلياً

$ git clone git@github.com:jquense/react-big-calendar.git
$ cd react-big-calendar
$ yarn
$ yarn storybook

التعريب وتنسيق التاريخ

يشمل react-big-calendar أربع خيارات لمعالجة تنسيق التاريخ والتعريب الثقافي، اعتمادًا على تفضيلك لمكتبات DateTime. يمكنك استخدام إما Moment.js، Globalize.js، date-fns، Day.js localizers.

بغض النظر عن اختيارك، يجب أن تختار بالتأكيد معربًا لاستخدام هذه المكتبة:

Moment.js

import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'

const localizer = momentLocalizer(moment)

const MyCalendar = (props) => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)

Globalize.js v0.1.1

import { Calendar, globalizeLocalizer } from 'react-big-calendar'
import globalize from 'globalize'

const localizer = globalizeLocalizer(globalize)

const MyCalendar = (props) => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)

date-fns v2

import { Calendar, dateFnsLocalizer } from 'react-big-calendar'
import format from 'date-fns/format'
import parse from 'date-fns/parse'
import startOfWeek from 'date-fns/startOfWeek'
import getDay from 'date-fns/getDay'
import enUS from 'date-fns/locale/en-US'

const locales = {
  'en-US': enUS,
}

const localizer = dateFnsLocalizer({
  format,
  parse,
  startOfWeek,
  getDay,
  locales,
})

const MyCalendar = (props) => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)

Day.js

يرجى ملاحظة أن dayjsLocalizer يوسع Day.js بالإضافات التالية:

import { Calendar, dayjsLocalizer } from 'react-big-calendar'
import dayjs from 'dayjs'

const localizer = dayjsLocalizer(dayjs)

const MyCalendar = (props) => (
  <div>
    <Calendar
      localizer={localizer}
      events={myEventsList}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
)

التصميم المخصص

بشكل افتراضي، يمكنك تضمين ملفات CSS المترجمة والبدء في العمل. ولكن في بعض الأحيان، قد ترغب في تخصيص التقويم الكبير ليتناسب مع تصميم التطبيق الخاص بك. لهذا السبب، تم تضمين ملفات SASS مع التقويم الكبير.

  @import 'react-big-calendar/lib/sass/styles';
  @import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD

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

انضم إلى المجتمع

ساعدنا في تحسين التقويم الكبير! انضم إلينا على Slack. (تنتهي روابط الدعوة إلى Slack. إذا لم تتمكن من الانضمام، فقط قدم تقريرًا عن المشكلة وسنحصل على رابط جديد.)