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 بدلاً من الطريقة التقليدية باستخدام الجداول. + +
+ +
+ +[**عرض التجربة والمستندات**](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) => ( +