diff --git a/README.md b/README.md index 544558e6e..da155cdde 100644 --- a/README.md +++ b/README.md @@ -167,3 +167,7 @@ Big Calendar. Carefully test each change accordingly. Help us improve Big Calendar! Join us on [Slack](https://join.slack.com/t/bigcalendar/shared_invite/zt-2fapdf4pj-oEF51KD2XgHKudkXEhk2lQ). (Slack invite links do expire. If you can't get in, just file an issue and we'll get a new link.) + +## Translations + +* [العربية](/docs/README-ar.md) diff --git a/docs/README-ar.md b/docs/README-ar.md new file mode 100644 index 000000000..f2e9a27d0 --- /dev/null +++ b/docs/README-ar.md @@ -0,0 +1,167 @@ +# التقويم الكبير لرياكت + +تم بناء مكون تقويم الفعاليات هذا لرياكت وتصميمه للمتصفحات الحديثة (والتي لا تحظى بدعم كامل من قبل المتصفحات القديمة، خصوصًا متصفح الانترنت)، ويستخدم Flexbox بدلاً من الطريقة التقليدية باستخدام الجداول. + +

+ Big Calendar Demo Image +

+ +[**عرض التجربة والمستندات**](https://jquense.github.io/react-big-calendar/examples/index.html) + +مستوحى من [Full Calendar](http://fullcalendar.io/). + +## الاستخدام والإعداد + +`yarn add react-big-calendar` أو `npm install --save react-big-calendar` + +قم بتضمين `react-big-calendar/lib/css/react-big-calendar.css` للأنماط، وتأكد من أن عنصر حاوية التقويم لديك +له ارتفاع، أو لن يظهر التقويم. لتوفير تصميم مخصص خاص بك، انظر إلى [التصميم المخصص](#custom-styling). + +## البدء + +- [react-big-calendar](https://github.com/arecvlohe/rbc-starter) +- [react-big-calendar مع السحب والإفلات](https://github.com/arecvlohe/rbc-with-dnd-starter) +- [react-big-calendar مع TypeScript و React hooks مدمج مع Vite](https://github.com/christopher-caldwell/react-big-calendar-demo) + +## تشغيل الأمثلة محلياً + +```sh +$ git clone git@github.com:jquense/react-big-calendar.git +$ cd react-big-calendar +$ yarn +$ yarn storybook +``` + +- افتح [localhost:3000/examples/index.html](http://localhost:3000/examples/index.html). + +### التعريب وتنسيق التاريخ + +يشمل `react-big-calendar` أربع خيارات لمعالجة تنسيق التاريخ والتعريب الثقافي، اعتمادًا +على تفضيلك لمكتبات DateTime. يمكنك استخدام إما [Moment.js](https://momentjs.com/)، [Globalize.js](https://github.com/jquery/globalize)، [date-fns](https://date-fns.org/)، [Day.js](https://day.js.org) localizers. + +بغض النظر عن اختيارك، يجب أن تختار **بالتأكيد** معربًا لاستخدام هذه المكتبة: + +#### Moment.js + +```js +import { Calendar, momentLocalizer } from 'react-big-calendar' +import moment from 'moment' + +const localizer = momentLocalizer(moment) + +const MyCalendar = (props) => ( +
+ +
+) +``` + +#### Globalize.js v0.1.1 + +```js +import { Calendar, globalizeLocalizer } from 'react-big-calendar' +import globalize from 'globalize' + +const localizer = globalizeLocalizer(globalize) + +const MyCalendar = (props) => ( +
+ +
+) +``` + +#### date-fns v2 + +```js +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) => ( +
+ +
+) +``` + +#### Day.js + +يرجى ملاحظة أن dayjsLocalizer يوسع Day.js بالإضافات التالية: + +- [IsBetween](https://day.js.org/docs/en/plugin/is-between) +- [IsSameOrAfter](https://day.js.org/docs/en/plugin/is-same-or-after) +- [IsSameOrBefore](https://day.js.org/docs/en/plugin/is-same-or-before) +- [LocaleData](https://day.js.org/docs/en/plugin/locale-data) +- [LocalizedFormat](https://day.js.org/docs/en/plugin/localized-format) +- [MinMax](https://day.js.org/docs/en/plugin/min-max) +- [UTC](https://day.js.org/docs/en/plugin/utc) + +```js +import { Calendar, dayjsLocalizer } from 'react-big-calendar' +import dayjs from 'dayjs' + +const localizer = dayjsLocalizer(dayjs) + +const MyCalendar = (props) => ( +
+ +
+) +``` + +## التصميم المخصص + +بشكل افتراضي، يمكنك تضمين ملفات CSS المترجمة والبدء في العمل. ولكن في بعض الأحيان، قد ترغب في تخصيص +التقويم الكبير ليتناسب مع تصميم التطبيق الخاص بك. لهذا السبب، تم تضمين ملفات SASS مع التقويم الكبير. + +``` + @import 'react-big-calendar/lib/sass/styles'; + @import 'react-big-calendar/lib/addons/dragAndDrop/styles'; // if using DnD +``` + +توفر مكتبة SASS ملف `variables` يحتوي على متغيرات الألوان والأبعاد التي يمكنك تحديثها لتتناسب مع تطبيقك. _ملحوظة:_ يمكن أن يؤدي تغيير و/أو تجاوز الأنماط إلى حدوث مشكلات في التقديم مع تقويمك الكبير. قم بإجراء اختبارات دقيقة لكل تغيير وفقًا لذلك. + +## انضم إلى المجتمع + +ساعدنا في تحسين التقويم الكبير! انضم إلينا على [Slack](https://join.slack.com/t/bigcalendar/shared_invite/zt-2fapdf4pj-oEF51KD2XgHKudkXEhk2lQ). +(تنتهي روابط الدعوة إلى Slack. إذا لم تتمكن من الانضمام، فقط قدم تقريرًا عن المشكلة وسنحصل على رابط جديد.)