fix docs

Author: Inbal-Tish

README.md

@@ -15,22 +15,21 @@ The package is compatible with both **Android** and **iOS**
 
 <br>
 
-
-> ### **Official documentation**  
+> ### **Official documentation**
+>
 > This README provides basic examples of how to get started with `react-native-calendars`. For detailed information, refer to the [official documentation site](https://wix.github.io/react-native-calendars/docs/intro).
 
-
 ## Features ✨
-* Pure JS. No Native code required
-* Date marking - dot, multi-dot, period, multi-period and custom marking
-* Customization of style, content (days, months, etc) and dates
-* Detailed documentation and examples
-* Swipeable calendar with flexible custom rendering
-* Scrolling to today, selecting dates, and more
-* Allowing or blocking certain dates
-* Accessibility support
-* Automatic date formatting for different locales
 
+- Pure JS. No Native code required
+- Date marking - dot, multi-dot, period, multi-period and custom marking
+- Customization of style, content (days, months, etc) and dates
+- Detailed documentation and examples
+- Swipeable calendar with flexible custom rendering
+- Scrolling to today, selecting dates, and more
+- Allowing or blocking certain dates
+- Accessibility support
+- Automatic date formatting for different locales
 
 ## Try it out ⚡
 
@@ -52,63 +51,68 @@ You can check example screens source code in [example module screens](https://gi
 
 This project is compatible with Expo/CRNA (without ejecting), and the examples have been [published on Expo](https://expo.io/@community/react-native-calendars-example)
 
-
 ## Getting Started 🔧
 
 Here's how to get started with react-native-calendars in your React Native project:
 
 ### Install the package:
 
 Using `npm`:
+
 ```
 $ npm install --save react-native-calendars
 ```
 
 Using `Yarn`:
+
 ```
 $ yarn add react-native-calendars
 ```
 
 **RN Calendars is implemented in JavaScript, so no native module linking is required.**
 
 ## Usage 🚀
+
 Basic usage examples of the library
 
 ##### **For detailed information on using this component, see the [official documentation site](https://wix.github.io/react-native-calendars/docs/intro)**
+
 ### Importing the `Calendar` component
 
 ```javascript
 import {`[Calendar](#calendar), [CalendarList](#calendarlist), [Agenda](#agenda)`} from 'react-native-calendars';
 ```
+
 ### Use the `Calendar` component in your app:
 
 ```javascript
 <Calendar
-  onDayPress={(day) => {console.log('selected day', day)}}
+  onDayPress={day => {
+    console.log('selected day', day);
+  }}
 />
 ```
 
-
 ## Some Code Examples
 
-Here are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:  
-
+Here are a few code snippets that demonstrate how to use some of the key features of react-native-calendars:
 
 ### Creating a basic calendar with default settings:
+
 ```javascript
-import React, { useState } from 'react';
-import { Calendar, LocaleConfig } from 'react-native-calendars';
+import React, {useState} from 'react';
+import {Calendar, LocaleConfig} from 'react-native-calendars';
 
 const App = () => {
   const [selected, setSelected] = useState('');
 
   return (
     <Calendar
-      onDayPress={(day) => {
+      onDayPress={day => {
         setSelected(day.dateString);
       }}
       markedDates={{
-        [selected]: { selected: true, disableTouchEvent: true, selectedDotColor: 'orange' },
+        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
       }}
     />
   );
@@ -118,6 +122,7 @@ export default App;
 ```
 
 ### Customize the appearance of the calendar:
+
 ```javascript
 <Calendar
   // Customize the appearance of the calendar
@@ -129,21 +134,24 @@ export default App;
   // Specify the current date
   current={'2012-03-01'}
   // Callback that gets called when the user selects a day
-  onDayPress={(day) => {console.log('selected day', day)}}
+  onDayPress={day => {
+    console.log('selected day', day);
+  }}
   // Mark specific dates as marked
   markedDates={{
     '2012-03-01': {selected: true, marked: true, selectedColor: 'blue'},
     '2012-03-02': {marked: true},
-    '2012-03-03': {selected: true, marked: true, selectedColor: 'blue'},
+    '2012-03-03': {selected: true, marked: true, selectedColor: 'blue'}
   }}
 />
 ```
 
 ### Configuring the locale:
+
 ```javascript
 import {LocaleConfig} from 'react-native-calendars';
-import React, { useState } from 'react';
-import { Calendar, LocaleConfig } from 'react-native-calendars';
+import React, {useState} from 'react';
+import {Calendar, LocaleConfig} from 'react-native-calendars';
 
 LocaleConfig.locales['fr'] = {
   monthNames: [
@@ -160,7 +168,20 @@ LocaleConfig.locales['fr'] = {
     'Novembre',
     'Décembre'
   ],
-  monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
+  monthNames: [
+    'Janvier',
+    'Février',
+    'Mars',
+    'Avril',
+    'Mai',
+    'Juin',
+    'Juillet',
+    'Août',
+    'Septembre',
+    'Octobre',
+    'Novembre',
+    'Décembre'
+  ],
   monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
   dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
   dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
@@ -174,11 +195,11 @@ const App = () => {
 
   return (
     <Calendar
-      onDayPress={(day) => {
+      onDayPress={day => {
         setSelected(day.dateString);
       }}
       markedDates={{
-        [selected]: { selected: true, disableTouchEvent: true, selectedDotColor: 'orange' },
+        [selected]: {selected: true, disableTouchEvent: true, selectedDotColor: 'orange'}
       }}
     />
   );
@@ -188,6 +209,7 @@ export default App;
 ```
 
 ### Adding a global theme to the calendar:
+
 ```javascript
 import React, { useState } from 'react';
 import { Calendar, LocaleConfig } from 'react-native-calendars';
@@ -212,16 +234,16 @@ const App = () => {
         dayTextColor: '#2d4150',
         textDisabledColor: '#d9e
 ```
+
 ## Customized Calendar Examples
 
 ### Calendar
-  <img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/calendar.gif?raw=true">
-
 
+  <img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/calendar.gif?raw=true">
 
 ### Dot marking
 
-  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true">
+  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true">
 
 ### Multi-Dot marking
 
@@ -259,7 +281,6 @@ const App = () => {
 
   <img src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/agenda.gif?raw=true">
 
-
 <br>
 
 ## Authors
@@ -271,15 +292,15 @@ See also the list of [contributors](https://github.com/wix/react-native-calendar
 
 ## Contributing
 
-We welcome contributions to react-native-calendars.  
+We welcome contributions to react-native-calendars.
 
-If you have an idea for a new feature or have discovered a bug, please open an issue.  
+If you have an idea for a new feature or have discovered a bug, please open an issue.
 
-Please `npm run test` and `npm run lint` before pushing changes.  
+Please `npm run test` and `npm run lint` before pushing changes.
 
-Don't forget to add a **title** and a **description** explaining the issue you're trying to solve and your proposed solution.  
+Don't forget to add a **title** and a **description** explaining the issue you're trying to solve and your proposed solution.
 
-Screenshots and Gifs are VERY helpful to add to the PR for reviews.  
+Screenshots and Gifs are VERY helpful to add to the PR for reviews.
 
 Please DO NOT format the files - we're trying to keep a unified syntax and keep the reviewing process fast and simple.
 

docsRNC/docs/Agenda.md

@@ -4,8 +4,8 @@ Agenda component
 This component extends **[CalendarList](https://github.com/wix/react-native-calendars/blob/master/src/calendar-list/index.tsx), [FlatList](https://reactnative.dev/docs/flatlist)** props.
 :::
 
-<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/agenda.gif?raw=true'}/>
-
+<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>
+  <img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/agenda.gif?raw=true'}/>
 </div>
 
 ## API
@@ -60,11 +60,11 @@ Whether to show items only for the selected date
 Replace default ActivityIndicator with a custom one  
 <span style={{color: 'grey'}}>() => JSX.Element</span>
 
-<br>
+<br/>
 
 ## Agenda Examples
 
-<br>
+<br/>
 
 ```javascript
 <Agenda

docsRNC/docs/Calendar.md

@@ -4,8 +4,8 @@ Calendar component
 This component extends **[CalendarHeader](https://github.com/wix/react-native-calendars/blob/master/src/calendar/header/index.tsx), [BasicDay](https://github.com/wix/react-native-calendars/blob/master/src/calendar/day/basic/index.tsx)** props.
 :::
 
-<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}><img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/calendar.gif?raw=true'}/>
-
+<div style={{display: 'flex', flexDirection: 'row', overflowX: 'auto', maxHeight: '500px', alignItems: 'center'}}>
+  <img style={{maxHeight: '420px'}} src={'https://github.com/wix/react-native-calendars/blob/master/demo/assets/calendar.gif?raw=true'}/>
 </div>
 
 ## API
@@ -190,11 +190,11 @@ Whether to disable all touch events for disabled days (can be override with 'dis
 Whether to disable all touch events for inactive days (can be override with 'disableTouchEvent' in 'markedDates')  
 <span style={{color: 'grey'}}>boolean</span>
 
-<br>
+<br/>
 
 ## Calendar Examples
 
-<br>
+<br/>
 
 #### Basic parameters
 
@@ -260,8 +260,7 @@ Whether to disable all touch events for inactive days (can be override with 'dis
 
 Dot marking
 
-  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true">
-
+  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking1.png?raw=true"/>
 
 ```javascript
 <Calendar
@@ -279,8 +278,7 @@ You can customize a dot color for each day independently.
 
 Multi-Dot marking
 
- <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking4.png?raw=true">
-
+ <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking4.png?raw=true"/>
 
 Use `markingType={'multi-dot'}` if you want to display more than one dot. Both the `<Calendar/>` and `<CalendarList/>` support multiple dots by using `dots` array in `markedDates` prop.
 The property `color` is mandatory while `key` and `selectedColor` are optional. If key is omitted then the array index is used as key. If `selectedColor` is omitted then `color` will be used for selected dates.
@@ -301,11 +299,9 @@ const workout = {key: 'workout', color: 'green'};
 
 Period marking
 
-  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking2.png?raw=true">
-
-
-  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking3.png?raw=true">
+  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking2.png?raw=true"/>
 
+  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking3.png?raw=true"/>
 
 ```javascript
 <Calendar
@@ -321,8 +317,7 @@ Period marking
 
 Multi-period marking
 
-  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking6.png?raw=true">
-
+  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking6.png?raw=true"/>
 
 **CAUTION**: This marking is only fully supported by the `<Calendar/>` component because it expands its height. Usage with `<CalendarList/>` might lead to overflow issues.
 
@@ -350,8 +345,7 @@ Multi-period marking
 
 Custom marking allows you to customize each marker with custom styles.
 
-  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking5.png?raw=true">
-
+  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/marking5.png?raw=true"/>
 
 ```javascript
 <Calendar
@@ -400,14 +394,13 @@ Custom marking allows you to customize each marker with custom styles.
 />
 ```
 
-  <img height=350 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/multi-marking.png?raw=true">
+  <img height={350} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/multi-marking.png?raw=true"/>
 
 Keep in mind that different marking types are not compatible. You can use just one marking style for a calendar.
 
 #### Displaying data loading indicator
 
-  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/loader.png?raw=true">
-
+  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/loader.png?raw=true"/>
 
 The loading indicator next to the month name will be displayed if `<Calendar/>` has `displayLoadingIndicator` prop and the `markedDates` collection does not have a value for every day of the month in question. When you load data for days, just set `[]` or special marking value to all days in `markedDates` collection.
 
@@ -505,8 +498,7 @@ theme={{
 }}
 ```
 
-  <img height=50 src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/day-header-style.png?raw=true">
-
+  <img height={50} src="https://github.com/wix-private/wix-react-native-calendar/blob/master/demo/assets/day-header-style.png?raw=true"/>
 
 **Disclaimer**: Issues that arise because something breaks after using stylesheet override will not be supported. Use this option at your own risk.
 
@@ -536,4 +528,3 @@ The `dayComponent` prop has to receive a RN component or a function that receive
 **Tip**: Don't forget to implement `shouldComponentUpdate()` for your custom day component to make the calendar perform better
 
 If you implement an awesome day component please make a PR so that other people could use it :)
-